From 9c803f20cc05395bac2d3386accfe230210c07dc Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 19 十二月 2022 20:58:31 +0800
Subject: [PATCH] 1
---
src/components/echart21.vue | 73
src/components/mapviewTwo.vue | 4
src/views/Archive/index.vue | 18
src/components/echart13.vue | 71
src/components/echart26.vue | 63
src/components/echart42.vue | 73
src/components/echart35.vue | 57
src/components/echart33.vue | 59
src/components/echart14.vue | 65
public/config/config.js | 9
src/components/echart11.vue | 65
src/views/Thematic/index.vue | 1122 ++++++++---------
src/components/echart23.vue | 77
src/components/echart36.vue | 53
src/components/echart41.vue | 67
src/components/echart32.vue | 73
src/components/echart45.vue | 65
src/views/exportMap/index.vue | 5
src/components/echart15.vue | 59
src/views/Thematic/index copy.vue | 645 ++++++++++
src/components/echart24.vue | 51
src/components/echart16.vue | 65
src/components/echart44.vue | 47
src/components/echart31.vue | 39
src/components/echart46.vue | 73
src/views/datamanage/SpatialData.vue | 11
/dev/null | 130 --
src/components/echart22.vue | 69
src/views/Synthesis/index.vue | 1
src/views/Tools/LayerTree.vue | 114 +
src/components/echart25.vue | 67
src/components/echart12.vue | 77
src/components/echart43.vue | 73
src/views/Tools/baseVuex.js | 37
src/components/echart34.vue | 57
src/views/Thematic/index.js | 76 +
36 files changed, 2,186 insertions(+), 1,524 deletions(-)
diff --git a/public/config/config.js b/public/config/config.js
index 71aea58..a24f1fc 100644
--- a/public/config/config.js
+++ b/public/config/config.js
@@ -7,6 +7,15 @@
var wnsUrl = 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns';
//gisserver
var gisServerUrl = 'http://192.168.20.39:9055/gisserver';
+//geoServerUrl
+var geoserver = 'http://192.168.20.39:8088';
+var geoServerURl = geoserver + '/geoserver/LF/wms';
+var geoserverWFS =
+ geoserver +
+ '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
+var geoserverWFSLine =
+ geoserver +
+ '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
//妯″瀷鍔犺浇鍦板潃
var modelUrl = 'http://183.162.245.49:8099/pcdata/JC_MAX_MX/SN/tileset.json';
//缁煎悎灞曠ず
diff --git a/src/components/echart11.vue b/src/components/echart11.vue
index 00e77bb..b62ade5 100644
--- a/src/components/echart11.vue
+++ b/src/components/echart11.vue
@@ -10,64 +10,67 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鐩綍鍒嗗竷",
+ text: '鐩綍鍒嗗竷',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
// legend: {},
grid: {
- left: "0%",
- right: "4%",
- bottom: "0%",
+ left: '0%',
+ right: '4%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
yAxis: {
- type: "category",
- data: ["A1", "A2", "A3", "A4", "A5", "A6", "A7"],
+ type: 'category',
+ data: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -78,7 +81,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -87,7 +90,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -102,8 +105,8 @@
},
series: [
{
- name: "鐩綍鍒嗗竷",
- type: "bar",
+ name: '鐩綍鍒嗗竷',
+ type: 'bar',
barWidth: 20,
data: [120, 150, 110, 50, 70, 20, 70],
showBackground: true,
@@ -113,13 +116,13 @@
color: (params) => {
var colorList = [
- ["#188df0", "#83bff6"],
- ["#188df0", "#83bff6"],
- ["#188df0", "#83bff6"],
- ["#188df0", "#83bff6"],
- ["#188df0", "#83bff6"],
- ["#188df0", "#83bff6"],
- ["#188df0", "#83bff6"],
+ ['#188df0', '#83bff6'],
+ ['#188df0', '#83bff6'],
+ ['#188df0', '#83bff6'],
+ ['#188df0', '#83bff6'],
+ ['#188df0', '#83bff6'],
+ ['#188df0', '#83bff6'],
+ ['#188df0', '#83bff6'],
];
var colorItem = colorList[params.dataIndex];
return new this.$echarts.graphic.LinearGradient(
@@ -145,10 +148,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart6"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart6'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart12.vue b/src/components/echart12.vue
index 3b011c0..ede383e 100644
--- a/src/components/echart12.vue
+++ b/src/components/echart12.vue
@@ -8,21 +8,21 @@
export default {
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
//鏂规硶闆嗗悎
methods: {
gaugeChart1() {
- var legendData = ["鎻愪氦鏁版嵁閲�", "鎻愪緵闆嗘垚鏈嶅姟閲�"]; //鍥句緥
+ var legendData = ['鎻愪氦鏁版嵁閲�', '鎻愪緵闆嗘垚鏈嶅姟閲�']; //鍥句緥
var indicator = [
- { name: "绠￠亾璁捐閮�", max: 12288 },
- { name: "绔欏満璁捐閮�", max: 12288 },
- { name: "鎬诲浘瀹�", max: 12288 },
- { name: "鍕樺療瀹�", max: 12288 },
- { name: "鍦熼槻瀹�", max: 12288 },
- { name: "娴嬮噺閮�", max: 12288 },
- { name: "椤圭洰閮�", max: 12288 },
+ { name: '绠￠亾璁捐閮�', max: 12288 },
+ { name: '绔欏満璁捐閮�', max: 12288 },
+ { name: '鎬诲浘瀹�', max: 12288 },
+ { name: '鍕樺療瀹�', max: 12288 },
+ { name: '鍦熼槻瀹�', max: 12288 },
+ { name: '娴嬮噺閮�', max: 12288 },
+ { name: '椤圭洰閮�', max: 12288 },
];
var dataArr = [
{
@@ -31,11 +31,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#4A99FF",
+ color: '#4A99FF',
// shadowColor: '#4A99FF',
// shadowBlur: 10,
},
- shadowColor: "#4A99FF",
+ shadowColor: '#4A99FF',
shadowBlur: 10,
},
},
@@ -43,7 +43,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -51,15 +51,15 @@
colorStops: [
{
offset: 0,
- color: "#BB857A",
+ color: '#BB857A',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#BB857A",
+ color: '#BB857A',
},
],
globalCoord: false,
@@ -81,11 +81,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#03CCDB",
+ color: '#03CCDB',
// shadowColor: '#03CCDB',
// shadowBlur: 10,
},
- shadowColor: "#03CCDB",
+ shadowColor: '#03CCDB',
shadowBlur: 10,
},
},
@@ -93,7 +93,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -101,15 +101,15 @@
colorStops: [
{
offset: 0,
- color: "#03CCDB",
+ color: '#03CCDB',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#03CCDB",
+ color: '#03CCDB',
},
],
globalCoord: false,
@@ -126,14 +126,14 @@
},
},
];
- var colorArr = ["#BB857A", "#03CCDB"]; //棰滆壊
+ var colorArr = ['#BB857A', '#03CCDB']; //棰滆壊
let option = {
title: {
// show: false,
- text: "鏁版嵁鍙婃湇鍔℃彁浜�",
+ text: '鏁版嵁鍙婃湇鍔℃彁浜�',
// x: "4%",
textStyle: {
- color: "#fff",
+ color: '#fff',
// fontSize: "22",
},
// subtextStyle: {
@@ -148,8 +148,8 @@
color: colorArr,
legend: {
- orient: "vertical",
- icon: "circle", //鍥句緥褰㈢姸
+ orient: 'vertical',
+ icon: 'circle', //鍥句緥褰㈢姸
data: legendData,
top: 0,
right: 0,
@@ -158,14 +158,14 @@
itemGap: 21, // 鍥句緥姣忛」涔嬮棿鐨勯棿闅斻�俒 default: 10 ]妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞�鏃朵负绾靛悜闂撮殧銆�
textStyle: {
fontSize: 12,
- color: "#03CCDB",
+ color: '#03CCDB',
},
},
radar: {
// shape: 'circle',
name: {
textStyle: {
- color: "#fff",
+ color: '#fff',
fontSize: 12,
},
},
@@ -180,25 +180,25 @@
show: true,
areaStyle: {
// 鍒嗛殧鍖哄煙鐨勬牱寮忚缃��
- color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
+ color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
},
},
axisLine: {
//鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡
lineStyle: {
- color: "#153269",
+ color: '#153269',
},
},
splitLine: {
lineStyle: {
- color: "#113865", // 鍒嗛殧绾块鑹�
+ color: '#113865', // 鍒嗛殧绾块鑹�
width: 1, // 鍒嗛殧绾跨嚎瀹�
},
},
},
series: [
{
- type: "radar",
+ type: 'radar',
symbolSize: 4,
// symbol: 'angle',
data: dataArr,
@@ -206,15 +206,20 @@
],
};
- let myChart = this.$echarts.init(document.getElementById("gauge_chart1"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(
+ document.getElementById('gauge_chart1')
+ );
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
mounted() {
this.gaugeChart1();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
};
</script>
diff --git a/src/components/echart13.vue b/src/components/echart13.vue
index a220d6e..07b7d59 100644
--- a/src/components/echart13.vue
+++ b/src/components/echart13.vue
@@ -10,20 +10,23 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let dataAxis = [
- "鍕樺療鏁版嵁",
- "宀╁湡鏁版嵁",
- "娴嬮噺鏁版嵁",
- "鍚堣鏁版嵁",
- "绠＄悊鏁版嵁",
+ '鍕樺療鏁版嵁',
+ '宀╁湡鏁版嵁',
+ '娴嬮噺鏁版嵁',
+ '鍚堣鏁版嵁',
+ '绠＄悊鏁版嵁',
];
// prettier-ignore
let data = [122880,
@@ -39,34 +42,34 @@
}
let option = {
title: {
- text: "鍚勭被鏁版嵁瀛樺偍鍒嗗竷",
+ text: '鍚勭被鏁版嵁瀛樺偍鍒嗗竷',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "category",
+ type: 'category',
data: dataAxis,
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -77,7 +80,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -86,7 +89,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -110,33 +113,33 @@
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
dataZoom: [
{
- type: "inside",
+ type: 'inside',
},
],
series: [
{
- type: "bar",
+ type: 'bar',
showBackground: true,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#45CF98" },
- { offset: 0.5, color: "#0CC2C7" },
- { offset: 1, color: "#0EBFC1" },
+ { offset: 0, color: '#45CF98' },
+ { offset: 0.5, color: '#0CC2C7' },
+ { offset: 1, color: '#0EBFC1' },
]),
barBorderRadius: [95, 95, 95, 95],
},
emphasis: {
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#45CF98" },
- { offset: 0.7, color: "#0CC2C7" },
- { offset: 1, color: "#0EBFC1" },
+ { offset: 0, color: '#45CF98' },
+ { offset: 0.7, color: '#0CC2C7' },
+ { offset: 1, color: '#0EBFC1' },
]),
},
},
@@ -145,11 +148,11 @@
],
};
const zoomSize = 6;
- let myChart = this.$echarts.init(document.getElementById("echart2"));
- myChart.on("click", function (params) {
+ this.myChart = this.$echarts.init(document.getElementById('echart2'));
+ this.myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
- myChart.dispatchAction({
- type: "dataZoom",
+ this.myChart.dispatchAction({
+ type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[
@@ -158,9 +161,9 @@
});
});
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart14.vue b/src/components/echart14.vue
index 864ee4d..b1a8334 100644
--- a/src/components/echart14.vue
+++ b/src/components/echart14.vue
@@ -10,32 +10,35 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鏁版嵁鏇存柊閲忎笌鍒嗗竷鎬婚噺",
+ text: '鏁版嵁鏇存柊閲忎笌鍒嗗竷鎬婚噺',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "cross",
+ type: 'cross',
label: {
- backgroundColor: "#FFFFFF",
+ backgroundColor: '#FFFFFF',
},
},
},
legend: {
- data: ["澧為噺", "鎬婚噺", "Video Ads", "Direct", "Search Engine"],
+ data: ['澧為噺', '鎬婚噺', 'Video Ads', 'Direct', 'Search Engine'],
},
toolbox: {
feature: {
@@ -43,25 +46,25 @@
},
},
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
containLabel: true,
},
xAxis: [
{
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
- type: "category",
+ type: 'category',
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
},
@@ -70,48 +73,48 @@
{
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
- type: "value",
+ type: 'value',
boundaryGap: false,
},
],
series: [
{
- name: "澧為噺",
- type: "line",
- stack: "Total",
+ name: '澧為噺',
+ type: 'line',
+ stack: 'Total',
areaStyle: {
- color: "#8F595A",
+ color: '#8F595A',
opacity: 0.5,
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [200, 300, 100, 500, 2000, 500, 200, 400, 100, 100, 80, 300],
},
{
- name: "鎬婚噺",
- type: "line",
- stack: "Total",
+ name: '鎬婚噺',
+ type: 'line',
+ stack: 'Total',
label: {
show: true,
- position: "top",
+ position: 'top',
},
areaStyle: {
- color: "#02929E",
+ color: '#02929E',
opacity: 0.5,
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [
2048, 2051, 2052, 2057, 2077, 2082, 2084, 2088, 2089, 2090, 2090,
@@ -120,10 +123,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart1"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart1'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart15.vue b/src/components/echart15.vue
index 9baece1..9355f83 100644
--- a/src/components/echart15.vue
+++ b/src/components/echart15.vue
@@ -10,90 +10,93 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鍚勭被鏁版嵁鍗犳瘮",
+ text: '鍚勭被鏁版嵁鍗犳瘮',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
- type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+ type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
},
},
legend: {
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
axisLabel: {
- color: "#fff",
+ color: '#fff',
},
},
yAxis: {
axisLabel: {
- color: "#fff",
+ color: '#fff',
},
- type: "category",
- data: ["鍕樺療鏁版嵁", "宀╁湡鏁版嵁", "娴嬮噺鏁版嵁", "鍚堣鏁版嵁", "绠＄悊鏁版嵁"],
+ type: 'category',
+ data: ['鍕樺療鏁版嵁', '宀╁湡鏁版嵁', '娴嬮噺鏁版嵁', '鍚堣鏁版嵁', '绠＄悊鏁版嵁'],
},
series: [
{
- name: "瀛樺劜閲�",
- type: "bar",
- stack: "total",
+ name: '瀛樺劜閲�',
+ type: 'bar',
+ stack: 'total',
label: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [122880, 40960, 153600, 5120, 28672],
},
{
- name: "鎬婚噺",
- type: "bar",
- stack: "total",
+ name: '鎬婚噺',
+ type: 'bar',
+ stack: 'total',
label: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [351232, 351232, 351232, 351232, 351232],
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart5"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart5'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart16.vue b/src/components/echart16.vue
index 1a5ca12..f9838f9 100644
--- a/src/components/echart16.vue
+++ b/src/components/echart16.vue
@@ -10,32 +10,35 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鏁版嵁鎬婚噺瓒嬪娍",
+ text: '鏁版嵁鎬婚噺瓒嬪娍',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "cross",
+ type: 'cross',
label: {
- backgroundColor: "#FFFFFF",
+ backgroundColor: '#FFFFFF',
},
},
},
legend: {
- data: ["澧為噺", "鎬婚噺"],
+ data: ['澧為噺', '鎬婚噺'],
},
toolbox: {
feature: {
@@ -43,25 +46,25 @@
},
},
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
containLabel: true,
},
xAxis: [
{
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
- type: "category",
+ type: 'category',
boundaryGap: false,
data: [2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
},
@@ -70,48 +73,48 @@
{
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
- type: "value",
+ type: 'value',
boundaryGap: false,
},
],
series: [
{
- name: "澧為噺",
- type: "line",
- stack: "Total",
+ name: '澧為噺',
+ type: 'line',
+ stack: 'Total',
areaStyle: {
- color: "#83bff6",
+ color: '#83bff6',
opacity: 0.5,
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [5120, 3072, 2048, 7168, 3072, 4096, 2048, 3072, 500],
},
{
- name: "鎬婚噺",
- type: "line",
- stack: "Total",
+ name: '鎬婚噺',
+ type: 'line',
+ stack: 'Total',
label: {
show: true,
- position: "top",
+ position: 'top',
},
areaStyle: {
- color: "#188df0",
+ color: '#188df0',
opacity: 0.5,
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [
27750, 28262, 28569, 28774, 29491, 29798, 30208, 30412, 30720,
@@ -119,10 +122,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart4"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart4'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart21.vue b/src/components/echart21.vue
index cb43b9e..f11cc44 100644
--- a/src/components/echart21.vue
+++ b/src/components/echart21.vue
@@ -10,71 +10,74 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鏈嶅姟璁块棶閲�",
+ text: '鏈嶅姟璁块棶閲�',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
// legend: {},
grid: {
- left: "0%",
- right: "4%",
- bottom: "0%",
+ left: '0%',
+ right: '4%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
yAxis: {
- type: "category",
+ type: 'category',
data: [
- "鏁版嵁绠＄悊",
- "杩愮淮绠＄悊",
- "缁煎悎灞曠ず",
- "鏁版嵁璐ㄦ",
- "鏁版嵁浜ゆ崲",
- "鏈嶅姟绠＄悊",
+ '鏁版嵁绠＄悊',
+ '杩愮淮绠＄悊',
+ '缁煎悎灞曠ず',
+ '鏁版嵁璐ㄦ',
+ '鏁版嵁浜ゆ崲',
+ '鏈嶅姟绠＄悊',
],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -85,7 +88,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -94,7 +97,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -109,8 +112,8 @@
},
series: [
{
- name: "鍚勯」鐩凡瀹屾垚宸ユ湡",
- type: "bar",
+ name: '鍚勯」鐩凡瀹屾垚宸ユ湡',
+ type: 'bar',
barWidth: 20,
data: [12000, 500, 1500, 400, 300, 700],
showBackground: true,
@@ -120,12 +123,12 @@
barBorderRadius: [0, 90, 90, 0],
color: (params) => {
var colorList = [
- ["#5774ce", "#7ed3f4"],
- ["#5774ce", "#7ed3f4"],
- ["#5774ce", "#7ed3f4"],
- ["#5774ce", "#7ed3f4"],
- ["#5774ce", "#7ed3f4"],
- ["#5774ce", "#7ed3f4"],
+ ['#5774ce', '#7ed3f4'],
+ ['#5774ce', '#7ed3f4'],
+ ['#5774ce', '#7ed3f4'],
+ ['#5774ce', '#7ed3f4'],
+ ['#5774ce', '#7ed3f4'],
+ ['#5774ce', '#7ed3f4'],
];
var colorItem = colorList[params.dataIndex];
return new this.$echarts.graphic.LinearGradient(
@@ -151,10 +154,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart21"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart21'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart22.vue b/src/components/echart22.vue
index 839173a..eede3ce 100644
--- a/src/components/echart22.vue
+++ b/src/components/echart22.vue
@@ -10,20 +10,23 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let dataAxis = [
- "鍕樺療鏁版嵁",
- "宀╁湡鏁版嵁",
- "娴嬮噺鏁版嵁",
- "鍚堣鏁版嵁",
- "绠＄悊鏁版嵁",
+ '鍕樺療鏁版嵁',
+ '宀╁湡鏁版嵁',
+ '娴嬮噺鏁版嵁',
+ '鍚堣鏁版嵁',
+ '绠＄悊鏁版嵁',
];
// prettier-ignore
let data = [1200,500,1000,200,200];
@@ -34,33 +37,33 @@
}
let option = {
title: {
- text: "鏁版嵁涓嬭浇閲�",
+ text: '鏁版嵁涓嬭浇閲�',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "category",
+ type: 'category',
data: dataAxis,
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 6; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -71,7 +74,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -80,7 +83,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -104,31 +107,31 @@
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
dataZoom: [
{
- type: "inside",
+ type: 'inside',
},
],
series: [
{
- type: "bar",
+ type: 'bar',
showBackground: true,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#40FBCB" },
- { offset: 1, color: "#20B2AA" },
+ { offset: 0, color: '#40FBCB' },
+ { offset: 1, color: '#20B2AA' },
]),
},
emphasis: {
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#2378f7" },
- { offset: 0.7, color: "#2378f7" },
- { offset: 1, color: "##7ed3f4" },
+ { offset: 0, color: '#2378f7' },
+ { offset: 0.7, color: '#2378f7' },
+ { offset: 1, color: '##7ed3f4' },
]),
},
},
@@ -137,11 +140,11 @@
],
};
const zoomSize = 6;
- let myChart = this.$echarts.init(document.getElementById("echart22"));
- myChart.on("click", function (params) {
+ this.myChart = this.$echarts.init(document.getElementById('echart22'));
+ this.myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
- myChart.dispatchAction({
- type: "dataZoom",
+ this.myChart.dispatchAction({
+ type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[
@@ -150,9 +153,9 @@
});
});
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart23.vue b/src/components/echart23.vue
index 485f6a3..ff4f70e 100644
--- a/src/components/echart23.vue
+++ b/src/components/echart23.vue
@@ -8,21 +8,21 @@
export default {
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
//鏂规硶闆嗗悎
methods: {
gaugeChart1() {
- var legendData = ["鏈嶅姟璁块棶閲�", "鏁版嵁涓嬭浇閲�"]; //鍥句緥
+ var legendData = ['鏈嶅姟璁块棶閲�', '鏁版嵁涓嬭浇閲�']; //鍥句緥
var indicator = [
- { name: "绠￠亾璁捐閮�", max: 3000 },
- { name: "绔欏満璁捐閮�", max: 3000 },
- { name: "鎬诲浘瀹�", max: 3000 },
- { name: "鍕樺療瀹�", max: 3000 },
- { name: "鍦熼槻瀹�", max: 3000 },
- { name: "娴嬮噺瀹�", max: 3000 },
- { name: "椤圭洰閮�", max: 3000 },
+ { name: '绠￠亾璁捐閮�', max: 3000 },
+ { name: '绔欏満璁捐閮�', max: 3000 },
+ { name: '鎬诲浘瀹�', max: 3000 },
+ { name: '鍕樺療瀹�', max: 3000 },
+ { name: '鍦熼槻瀹�', max: 3000 },
+ { name: '娴嬮噺瀹�', max: 3000 },
+ { name: '椤圭洰閮�', max: 3000 },
];
var dataArr = [
{
@@ -31,11 +31,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#4A99FF",
+ color: '#4A99FF',
// shadowColor: '#4A99FF',
// shadowBlur: 10,
},
- shadowColor: "#4A99FF",
+ shadowColor: '#4A99FF',
shadowBlur: 10,
},
},
@@ -43,7 +43,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -51,15 +51,15 @@
colorStops: [
{
offset: 0,
- color: "#4A99FF",
+ color: '#4A99FF',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#4A99FF",
+ color: '#4A99FF',
},
],
globalCoord: false,
@@ -81,11 +81,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#4BFFFC",
+ color: '#4BFFFC',
// shadowColor: '#4BFFFC',
// shadowBlur: 10,
},
- shadowColor: "#4BFFFC",
+ shadowColor: '#4BFFFC',
shadowBlur: 10,
},
},
@@ -93,7 +93,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -101,15 +101,15 @@
colorStops: [
{
offset: 0,
- color: "#4BFFFC",
+ color: '#4BFFFC',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#4BFFFC",
+ color: '#4BFFFC',
},
],
globalCoord: false,
@@ -126,14 +126,14 @@
},
},
];
- var colorArr = ["#4A99FF", "#4BFFFC"]; //棰滆壊
+ var colorArr = ['#4A99FF', '#4BFFFC']; //棰滆壊
let option = {
title: {
// show: false,
- text: "閮ㄩ棬浣跨敤鏁版嵁",
+ text: '閮ㄩ棬浣跨敤鏁版嵁',
// x: "4%",
textStyle: {
- color: "#fff",
+ color: '#fff',
// fontSize: "22",
},
// subtextStyle: {
@@ -148,8 +148,8 @@
color: colorArr,
legend: {
- orient: "vertical",
- icon: "circle", //鍥句緥褰㈢姸
+ orient: 'vertical',
+ icon: 'circle', //鍥句緥褰㈢姸
data: legendData,
top: 0,
right: 0,
@@ -158,21 +158,21 @@
itemGap: 21, // 鍥句緥姣忛」涔嬮棿鐨勯棿闅斻�俒 default: 10 ]妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞�鏃朵负绾靛悜闂撮殧銆�
textStyle: {
fontSize: 12,
- color: "#00E4FF",
+ color: '#00E4FF',
},
},
radar: {
// shape: 'circle',
name: {
textStyle: {
- color: "#fff",
+ color: '#fff',
fontSize: 12,
},
},
radius: 90,
nameGap: 12, // 鍥句腑宸ヨ壓绛夊瓧璺濈鍥剧殑璺濈
splitNumber: 4, // 缃戞牸绾跨殑涓暟
- center: ["50%", "60%"], // 鍥剧殑浣嶇疆
+ center: ['50%', '60%'], // 鍥剧殑浣嶇疆
indicator: indicator,
splitArea: {
@@ -180,25 +180,25 @@
show: true,
areaStyle: {
// 鍒嗛殧鍖哄煙鐨勬牱寮忚缃��
- color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
+ color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
},
},
axisLine: {
//鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡
lineStyle: {
- color: "#153269",
+ color: '#153269',
},
},
splitLine: {
lineStyle: {
- color: "#113865", // 鍒嗛殧绾块鑹�
+ color: '#113865', // 鍒嗛殧绾块鑹�
width: 1, // 鍒嗛殧绾跨嚎瀹�
},
},
},
series: [
{
- type: "radar",
+ type: 'radar',
symbolSize: 4,
// symbol: 'angle',
data: dataArr,
@@ -206,15 +206,18 @@
],
};
- let myChart = this.$echarts.init(document.getElementById("echart23"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart23'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
mounted() {
this.gaugeChart1();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
};
</script>
diff --git a/src/components/echart24.vue b/src/components/echart24.vue
index 53ad639..1911204 100644
--- a/src/components/echart24.vue
+++ b/src/components/echart24.vue
@@ -10,27 +10,30 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "1-12鏈堟暟鎹洿鏂伴噺",
+ text: '1-12鏈堟暟鎹洿鏂伴噺',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "cross",
+ type: 'cross',
label: {
- backgroundColor: "#FFFFFF",
+ backgroundColor: '#FFFFFF',
},
},
},
@@ -43,25 +46,25 @@
},
},
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
containLabel: true,
},
xAxis: [
{
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
- type: "category",
+ type: 'category',
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
},
@@ -70,39 +73,39 @@
{
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
- type: "value",
+ type: 'value',
boundaryGap: false,
},
],
series: [
{
- name: "澧為噺",
- type: "line",
- stack: "Total",
+ name: '澧為噺',
+ type: 'line',
+ stack: 'Total',
areaStyle: {
- color: "#8F595A",
+ color: '#8F595A',
opacity: 0.5,
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [200, 300, 100, 500, 2000, 500, 200, 400, 100, 100, 80, 300],
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart24"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart24'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart25.vue b/src/components/echart25.vue
index fdf7d9b..8410821 100644
--- a/src/components/echart25.vue
+++ b/src/components/echart25.vue
@@ -10,64 +10,67 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鐢ㄦ埛澧為噺鍜屾�婚噺鍗犳瘮",
+ text: '鐢ㄦ埛澧為噺鍜屾�婚噺鍗犳瘮',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "item",
- formatter: "{a} <br/>{b} : {c} ({d}%)",
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)',
},
graphic: [
{
- type: "text",
- left: "center",
- top: "40%",
+ type: 'text',
+ left: 'center',
+ top: '40%',
style: {
- fill: "#fff",
- text: "鎬荤敤鎴烽噺",
+ fill: '#fff',
+ text: '鎬荤敤鎴烽噺',
},
},
{
- type: "text",
- left: "center",
- top: "50%",
+ type: 'text',
+ left: 'center',
+ top: '50%',
z: 10,
style: {
- fill: "#fff",
+ fill: '#fff',
- text: "400",
- font: "30px Microsoft YaHei",
+ text: '400',
+ font: '30px Microsoft YaHei',
},
},
],
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
// containLabel: true,
},
series: [
{
- name: "鐢ㄦ埛閲�",
- type: "pie",
- radius: ["40%", "70%"],
+ name: '鐢ㄦ埛閲�',
+ type: 'pie',
+ radius: ['40%', '70%'],
labelLine: {
normal: {
length: 15, // 鎸囩ず绾垮搴�
lineStyle: {
- color: "#fff", // 鎸囩ず绾块鑹�
+ color: '#fff', // 鎸囩ず绾块鑹�
},
},
},
@@ -76,33 +79,33 @@
// 鍚勫垎鍖虹殑鎻愮ず鍐呭
// params: 鍗充笅闈紶鍏ョ殑data鏁扮粍,閫氳繃鑷畾涔夊嚱鏁帮紝灞曠ず浣犳兂瑕佺殑鍐呭鍜屾牸寮�
formatter: function (params) {
- return params.name + "\n\n" + params.percent + "%";
+ return params.name + '\n\n' + params.percent + '%';
},
textStyle: {
// 鎻愮ず鏂囧瓧鐨勬牱寮�
- color: "#fff",
+ color: '#fff',
fontSize: 14,
},
},
},
data: [
- { value: 280, name: "寰�骞寸敤鎴烽噺" },
- { value: 120, name: "浠婂勾鏂板鐢ㄦ埛閲�" },
+ { value: 280, name: '寰�骞寸敤鎴烽噺' },
+ { value: 120, name: '浠婂勾鏂板鐢ㄦ埛閲�' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)",
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart25"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart25'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart26.vue b/src/components/echart26.vue
index ca76ef4..38922b8 100644
--- a/src/components/echart26.vue
+++ b/src/components/echart26.vue
@@ -10,15 +10,18 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
- let dataAxis = ["A2", "A3", "A4", "A5", "A6", "A7"];
+ let dataAxis = ['A2', 'A3', 'A4', 'A5', 'A6', 'A7'];
// prettier-ignore
let data = [300,200,80,120,80,50];
let yMax = 500;
@@ -28,33 +31,33 @@
}
let option = {
title: {
- text: "鍚勯」鐩暟鎹噺",
+ text: '鍚勯」鐩暟鎹噺',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "category",
+ type: 'category',
data: dataAxis,
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 6; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -65,7 +68,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -74,7 +77,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -98,32 +101,32 @@
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
dataZoom: [
{
- type: "inside",
+ type: 'inside',
},
],
series: [
{
- type: "bar",
+ type: 'bar',
showBackground: true,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#83bff6" },
- { offset: 0.5, color: "#188df0" },
- { offset: 1, color: "#188df0" },
+ { offset: 0, color: '#83bff6' },
+ { offset: 0.5, color: '#188df0' },
+ { offset: 1, color: '#188df0' },
]),
},
emphasis: {
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#2378f7" },
- { offset: 0.7, color: "#2378f7" },
- { offset: 1, color: "#83bff6" },
+ { offset: 0, color: '#2378f7' },
+ { offset: 0.7, color: '#2378f7' },
+ { offset: 1, color: '#83bff6' },
]),
},
},
@@ -132,11 +135,11 @@
],
};
const zoomSize = 6;
- let myChart = this.$echarts.init(document.getElementById("echart26"));
- myChart.on("click", function (params) {
+ this.myChart = this.$echarts.init(document.getElementById('echart26'));
+ this.myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
- myChart.dispatchAction({
- type: "dataZoom",
+ this.myChart.dispatchAction({
+ type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[
@@ -145,9 +148,9 @@
});
});
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart31.vue b/src/components/echart31.vue
index d14d853..53627a1 100644
--- a/src/components/echart31.vue
+++ b/src/components/echart31.vue
@@ -10,43 +10,46 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "椤圭洰绫诲埆",
+ text: '椤圭洰绫诲埆',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "item",
+ trigger: 'item',
},
legend: {
- top: "5%",
- right: "0",
+ top: '5%',
+ right: '0',
textStyle: {
fontSize: 12,
- color: "#fff",
+ color: '#fff',
},
},
series: [
{
- name: "椤圭洰绫诲埆",
- type: "pie",
- radius: ["45%", "55%"],
+ name: '椤圭洰绫诲埆',
+ type: 'pie',
+ radius: ['45%', '55%'],
// avoidLabelOverlap: false,
label: {
- formatter: "{b}锛歿c}",
+ formatter: '{b}锛歿c}',
textStyle: {
fontSize: 12,
- color: "#fff",
+ color: '#fff',
},
},
@@ -54,16 +57,16 @@
// show: false,
},
data: [
- { value: 2, name: "绔欏満绫�" },
- { value: 5, name: "绠￠亾绫�" },
+ { value: 2, name: '绔欏満绫�' },
+ { value: 5, name: '绠￠亾绫�' },
],
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart31"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart31'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart32.vue b/src/components/echart32.vue
index 323be47..8a177cf 100644
--- a/src/components/echart32.vue
+++ b/src/components/echart32.vue
@@ -10,21 +10,24 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let dataAxis = [
- "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁",
- "涓縿涓滅嚎绠￠亾宸ョ▼涓",
- "骞垮窞绔�",
- "鍞愬北LNG",
- "鏂扮枂杩炴湪娌佺珯鍦�",
- "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�",
+ '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁',
+ '涓縿涓滅嚎绠￠亾宸ョ▼涓',
+ '骞垮窞绔�',
+ '鍞愬北LNG',
+ '鏂扮枂杩炴湪娌佺珯鍦�',
+ '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�',
];
// prettier-ignore
let data = [2000, 1800, 800, 1000, 600, 700];
@@ -35,33 +38,33 @@
}
let option = {
title: {
- text: "鍚勯」鐩绠�",
+ text: '鍚勯」鐩绠�',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "category",
+ type: 'category',
data: dataAxis,
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -72,7 +75,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -81,7 +84,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -105,35 +108,35 @@
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
dataZoom: [
{
- type: "inside",
+ type: 'inside',
},
],
series: [
{
- type: "bar",
+ type: 'bar',
showBackground: true,
barWidth: 20,
itemStyle: {
barBorderRadius: [90, 90, 0, 0],
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#b8d746" },
- { offset: 0.5, color: "#8edc69" },
- { offset: 1, color: "#74c3c9" },
+ { offset: 0, color: '#b8d746' },
+ { offset: 0.5, color: '#8edc69' },
+ { offset: 1, color: '#74c3c9' },
]),
},
emphasis: {
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#2378f7" },
- { offset: 0.7, color: "#2378f7" },
- { offset: 1, color: "#83bff6" },
+ { offset: 0, color: '#2378f7' },
+ { offset: 0.7, color: '#2378f7' },
+ { offset: 1, color: '#83bff6' },
]),
},
},
@@ -142,11 +145,11 @@
],
};
const zoomSize = 6;
- let myChart = this.$echarts.init(document.getElementById("echart32"));
- myChart.on("click", function (params) {
+ this.myChart = this.$echarts.init(document.getElementById('echart32'));
+ this.myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
- myChart.dispatchAction({
- type: "dataZoom",
+ this.myChart.dispatchAction({
+ type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[
@@ -155,9 +158,9 @@
});
});
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart33.vue b/src/components/echart33.vue
index 597f0ef..294227c 100644
--- a/src/components/echart33.vue
+++ b/src/components/echart33.vue
@@ -10,69 +10,72 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "椤圭洰鑰楁椂",
+ text: '椤圭洰鑰楁椂',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
legend: {
- right: "0",
+ right: '0',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
yAxis: {
- type: "category",
- data: ["A2", "A3", "A4", "A5", "A6", "A7"],
+ type: 'category',
+ data: ['A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 3; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -83,7 +86,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -92,7 +95,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -107,21 +110,21 @@
},
series: [
{
- name: "棰勮宸ユ湡锛堝ぉ锛�",
- type: "bar",
+ name: '棰勮宸ユ湡锛堝ぉ锛�',
+ type: 'bar',
data: [432, 432, 288, 252, 180, 180],
},
{
- name: "宸插畬鎴愬伐鏈燂紙澶╋級",
- type: "bar",
+ name: '宸插畬鎴愬伐鏈燂紙澶╋級',
+ type: 'bar',
data: [200, 120, 200, 150, 90, 20],
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart6"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart6'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart34.vue b/src/components/echart34.vue
index bdcb374..91cccb7 100644
--- a/src/components/echart34.vue
+++ b/src/components/echart34.vue
@@ -10,49 +10,52 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "椤圭洰杩涘害瀹屾垚鐧惧垎姣�",
+ text: '椤圭洰杩涘害瀹屾垚鐧惧垎姣�',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "category",
+ type: 'category',
data: [
- "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁",
- "涓縿涓滅嚎绠￠亾宸ョ▼涓",
- "骞垮窞绔�",
- "鍞愬北LNG",
- "鏂扮枂杩炴湪娌佺珯鍦�",
- "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�",
+ '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁',
+ '涓縿涓滅嚎绠￠亾宸ョ▼涓',
+ '骞垮窞绔�',
+ '鍞愬北LNG',
+ '鏂扮枂杩炴湪娌佺珯鍦�',
+ '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�',
],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 3; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -63,7 +66,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -72,7 +75,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -86,35 +89,35 @@
},
},
yAxis: {
- type: "value",
+ type: 'value',
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
series: [
{
data: [0.4, 0.2, 0.7, 0.65, 0.5, 0.1],
- type: "bar",
+ type: 'bar',
showBackground: true,
barWidth: 20,
backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
+ color: 'rgba(180, 180, 180, 0.2)',
},
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart34"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart34'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart35.vue b/src/components/echart35.vue
index 69f2680..397a6d7 100644
--- a/src/components/echart35.vue
+++ b/src/components/echart35.vue
@@ -10,68 +10,71 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "浜哄憳鏋勬垚",
+ text: '浜哄憳鏋勬垚',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
// legend: {},
grid: {
- left: "0%",
- right: "4%",
- bottom: "0%",
+ left: '0%',
+ right: '4%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
yAxis: {
- type: "category",
- data: ["涓撶", "鏈", "纭曞＋", "鍗氬＋鍙婁互涓�", "鍏朵粬"],
+ type: 'category',
+ data: ['涓撶', '鏈', '纭曞＋', '鍗氬＋鍙婁互涓�', '鍏朵粬'],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
series: [
{
- name: "浜哄憳鏋勬垚",
- type: "bar",
+ name: '浜哄憳鏋勬垚',
+ type: 'bar',
// barWidth: 20,
data: [15, 120, 50, 40, 20],
itemStyle: {
@@ -80,12 +83,12 @@
barBorderRadius: [0, 10, 10, 0],
color: (params) => {
var colorList = [
- ["#00FCFF", "#008297"],
- ["#0091FF", "#005EA4"],
- ["#901698", "#F157EE"],
- ["#40FBCB", "#009871"],
- ["#FF515A", "#FFDD53"],
- ["#6574E2", "#261164"],
+ ['#00FCFF', '#008297'],
+ ['#0091FF', '#005EA4'],
+ ['#901698', '#F157EE'],
+ ['#40FBCB', '#009871'],
+ ['#FF515A', '#FFDD53'],
+ ['#6574E2', '#261164'],
];
var colorItem = colorList[params.dataIndex];
return new this.$echarts.graphic.LinearGradient(
@@ -111,10 +114,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart35"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart35'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart36.vue b/src/components/echart36.vue
index 09c3233..23ec66f 100644
--- a/src/components/echart36.vue
+++ b/src/components/echart36.vue
@@ -10,23 +10,26 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鍚勯」鐩汉鍛樺垎閰�",
+ text: '鍚勯」鐩汉鍛樺垎閰�',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "item",
+ trigger: 'item',
},
visualMap: {
show: false,
@@ -38,49 +41,49 @@
},
series: [
{
- name: "鍚勯」鐩汉鍛樺垎閰�",
- type: "pie",
- radius: "55%",
- center: ["50%", "50%"],
+ name: '鍚勯」鐩汉鍛樺垎閰�',
+ type: 'pie',
+ radius: '55%',
+ center: ['50%', '50%'],
data: [
- { value: 80, name: "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁" },
- { value: 70, name: "涓縿涓滅嚎绠￠亾宸ョ▼涓" },
- { value: 15, name: "骞垮窞绔�" },
- { value: 30, name: "鍞愬北LNG" },
- { value: 15, name: "鏂扮枂杩炴湪娌佺珯鍦�" },
- { value: 35, name: "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�" },
+ { value: 80, name: '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁' },
+ { value: 70, name: '涓縿涓滅嚎绠￠亾宸ョ▼涓' },
+ { value: 15, name: '骞垮窞绔�' },
+ { value: 30, name: '鍞愬北LNG' },
+ { value: 15, name: '鏂扮枂杩炴湪娌佺珯鍦�' },
+ { value: 35, name: '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�' },
].sort(function (a, b) {
return a.value - b.value;
}),
- roseType: "radius",
+ roseType: 'radius',
label: {
- color: "rgba(255, 255, 255, 0.8)",
+ color: 'rgba(255, 255, 255, 0.8)',
},
labelLine: {
lineStyle: {
- color: "rgba(255, 255, 255, 0.8)",
+ color: 'rgba(255, 255, 255, 0.8)',
},
smooth: 0.2,
length: 10,
length2: 20,
},
itemStyle: {
- color: "#c23531",
+ color: '#c23531',
shadowBlur: 200,
- shadowColor: "rgba(0, 0, 0, 0.5)",
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
},
- animationType: "scale",
- animationEasing: "elasticOut",
+ animationType: 'scale',
+ animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
},
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart36"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart36'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart41.vue b/src/components/echart41.vue
index 0e9c2c9..5b89940 100644
--- a/src/components/echart41.vue
+++ b/src/components/echart41.vue
@@ -10,75 +10,78 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "椤圭洰鏈嶅姟鍒嗙被",
+ text: '椤圭洰鏈嶅姟鍒嗙被',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
// legend: {},
grid: {
- left: "0%",
- right: "4%",
- bottom: "0%",
+ left: '0%',
+ right: '4%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
yAxis: {
- type: "category",
+ type: 'category',
data: [
- "闂瑙ｆ瀽",
- "闇�姹傚弽棣�",
- "涓撻鏈嶅姟",
- "鐜板満鏀寔",
- "鐗堟湰鍗囩骇",
- "鎶�鏈煿璁�",
+ '闂瑙ｆ瀽',
+ '闇�姹傚弽棣�',
+ '涓撻鏈嶅姟',
+ '鐜板満鏀寔',
+ '鐗堟湰鍗囩骇',
+ '鎶�鏈煿璁�',
],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
series: [
{
- name: "椤圭洰鏈嶅姟鍒嗙被",
- type: "bar",
+ name: '椤圭洰鏈嶅姟鍒嗙被',
+ type: 'bar',
barWidth: 20,
data: [120, 45, 5, 15, 4, 12],
itemStyle: {
@@ -87,12 +90,12 @@
barBorderRadius: [0, 90, 90, 0],
color: (params) => {
var colorList = [
- ["#00FCFF", "#008297"],
- ["#0091FF", "#005EA4"],
- ["#901698", "#F157EE"],
- ["#40FBCB", "#009871"],
- ["#FF515A", "#FFDD53"],
- ["#6574E2", "#261164"],
+ ['#00FCFF', '#008297'],
+ ['#0091FF', '#005EA4'],
+ ['#901698', '#F157EE'],
+ ['#40FBCB', '#009871'],
+ ['#FF515A', '#FFDD53'],
+ ['#6574E2', '#261164'],
];
var colorItem = colorList[params.dataIndex];
return new this.$echarts.graphic.LinearGradient(
@@ -118,10 +121,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart41"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart41'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart42.vue b/src/components/echart42.vue
index 99d9341..2fed85c 100644
--- a/src/components/echart42.vue
+++ b/src/components/echart42.vue
@@ -10,21 +10,24 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let dataAxis = [
- "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁",
- "涓縿涓滅嚎绠￠亾宸ョ▼涓",
- "骞垮窞绔�",
- "鍞愬北LNG",
- "鏂扮枂杩炴湪娌佺珯鍦�",
- "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�",
+ '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁',
+ '涓縿涓滅嚎绠￠亾宸ョ▼涓',
+ '骞垮窞绔�',
+ '鍞愬北LNG',
+ '鏂扮枂杩炴湪娌佺珯鍦�',
+ '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�',
];
// prettier-ignore
let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1];
@@ -35,33 +38,33 @@
}
let option = {
title: {
- text: "椤圭洰瀹屾垚杩涘害",
+ text: '椤圭洰瀹屾垚杩涘害',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
grid: {
- left: "0%",
- right: "0%",
- bottom: "0%",
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "category",
+ type: 'category',
data: dataAxis,
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -72,7 +75,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -81,7 +84,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -105,32 +108,32 @@
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
dataZoom: [
{
- type: "inside",
+ type: 'inside',
},
],
series: [
{
- type: "bar",
+ type: 'bar',
showBackground: true,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#83bff6" },
- { offset: 0.5, color: "#188df0" },
- { offset: 1, color: "#188df0" },
+ { offset: 0, color: '#83bff6' },
+ { offset: 0.5, color: '#188df0' },
+ { offset: 1, color: '#188df0' },
]),
},
emphasis: {
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#2378f7" },
- { offset: 0.7, color: "#2378f7" },
- { offset: 1, color: "#83bff6" },
+ { offset: 0, color: '#2378f7' },
+ { offset: 0.7, color: '#2378f7' },
+ { offset: 1, color: '#83bff6' },
]),
},
},
@@ -139,11 +142,11 @@
],
};
const zoomSize = 6;
- let myChart = this.$echarts.init(document.getElementById("echart42"));
- myChart.on("click", function (params) {
+ this.myChart = this.$echarts.init(document.getElementById('echart42'));
+ this.myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
- myChart.dispatchAction({
- type: "dataZoom",
+ this.myChart.dispatchAction({
+ type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[
@@ -152,9 +155,9 @@
});
});
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart43.vue b/src/components/echart43.vue
index 8e9e2c2..7aa3926 100644
--- a/src/components/echart43.vue
+++ b/src/components/echart43.vue
@@ -8,21 +8,21 @@
export default {
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
//鏂规硶闆嗗悎
methods: {
gaugeChart1() {
- var legendData = ["浜哄憳", "鍙樻洿鍚庝汉鍛�"]; //鍥句緥
+ var legendData = ['浜哄憳', '鍙樻洿鍚庝汉鍛�']; //鍥句緥
var indicator = [
- { name: "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�", max: 80 },
- { name: "鍞愬北LNG", max: 80 },
- { name: "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁", max: 160 },
+ { name: '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�', max: 80 },
+ { name: '鍞愬北LNG', max: 80 },
+ { name: '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁', max: 160 },
- { name: "涓縿涓滅嚎绠￠亾宸ョ▼涓", max: 100 },
- { name: "鏂扮枂杩炴湪娌佺珯鍦�", max: 40 },
- { name: "骞垮窞绔�", max: 40 },
+ { name: '涓縿涓滅嚎绠￠亾宸ョ▼涓', max: 100 },
+ { name: '鏂扮枂杩炴湪娌佺珯鍦�', max: 40 },
+ { name: '骞垮窞绔�', max: 40 },
];
var dataArr = [
{
@@ -31,11 +31,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#4A99FF",
+ color: '#4A99FF',
// shadowColor: '#4A99FF',
// shadowBlur: 10,
},
- shadowColor: "#4A99FF",
+ shadowColor: '#4A99FF',
shadowBlur: 10,
},
},
@@ -43,7 +43,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -51,15 +51,15 @@
colorStops: [
{
offset: 0,
- color: "#4A99FF",
+ color: '#4A99FF',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#4A99FF",
+ color: '#4A99FF',
},
],
globalCoord: false,
@@ -81,11 +81,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: "#4BFFFC",
+ color: '#4BFFFC',
// shadowColor: '#4BFFFC',
// shadowBlur: 10,
},
- shadowColor: "#4BFFFC",
+ shadowColor: '#4BFFFC',
shadowBlur: 10,
},
},
@@ -93,7 +93,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: "linear",
+ type: 'linear',
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -101,15 +101,15 @@
colorStops: [
{
offset: 0,
- color: "#4BFFFC",
+ color: '#4BFFFC',
},
{
offset: 0.5,
- color: "rgba(0,0,0,0)",
+ color: 'rgba(0,0,0,0)',
},
{
offset: 1,
- color: "#4BFFFC",
+ color: '#4BFFFC',
},
],
globalCoord: false,
@@ -126,14 +126,14 @@
},
},
];
- var colorArr = ["#4A99FF", "#4BFFFC"]; //棰滆壊
+ var colorArr = ['#4A99FF', '#4BFFFC']; //棰滆壊
let option = {
title: {
// show: false,
- text: "浜哄憳鍙樺姩",
+ text: '浜哄憳鍙樺姩',
// x: "4%",
textStyle: {
- color: "#fff",
+ color: '#fff',
// fontSize: "22",
},
// subtextStyle: {
@@ -148,8 +148,8 @@
color: colorArr,
legend: {
- orient: "vertical",
- icon: "circle", //鍥句緥褰㈢姸
+ orient: 'vertical',
+ icon: 'circle', //鍥句緥褰㈢姸
data: legendData,
top: 0,
right: 0,
@@ -158,14 +158,14 @@
itemGap: 21, // 鍥句緥姣忛」涔嬮棿鐨勯棿闅斻�俒 default: 10 ]妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞�鏃朵负绾靛悜闂撮殧銆�
textStyle: {
fontSize: 12,
- color: "#00E4FF",
+ color: '#00E4FF',
},
},
radar: {
// shape: 'circle',
name: {
textStyle: {
- color: "#fff",
+ color: '#fff',
fontSize: 12,
},
},
@@ -180,25 +180,25 @@
show: true,
areaStyle: {
// 鍒嗛殧鍖哄煙鐨勬牱寮忚缃��
- color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
+ color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
},
},
axisLine: {
//鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡
lineStyle: {
- color: "#153269",
+ color: '#153269',
},
},
splitLine: {
lineStyle: {
- color: "#113865", // 鍒嗛殧绾块鑹�
+ color: '#113865', // 鍒嗛殧绾块鑹�
width: 1, // 鍒嗛殧绾跨嚎瀹�
},
},
},
series: [
{
- type: "radar",
+ type: 'radar',
symbolSize: 4,
// symbol: 'angle',
data: dataArr,
@@ -206,15 +206,18 @@
],
};
- let myChart = this.$echarts.init(document.getElementById("echart43"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart43'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
mounted() {
this.gaugeChart1();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
};
</script>
diff --git a/src/components/echart44.vue b/src/components/echart44.vue
index 5b85155..b513684 100644
--- a/src/components/echart44.vue
+++ b/src/components/echart44.vue
@@ -10,46 +10,49 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鍚勯」鐩�讳綋杩涘害",
+ text: '鍚勯」鐩�讳綋杩涘害',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "item",
+ trigger: 'item',
},
// legend: {},
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
containLabel: true,
},
series: [
{
- name: "鍚勯」鐩�讳綋杩涘害",
- type: "pie",
- radius: ["40%", "70%"],
- roseType: "radius",
- color: ["#03effb", "#00bec4", "#3a82ab"],
+ name: '鍚勯」鐩�讳綋杩涘害',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ roseType: 'radius',
+ color: ['#03effb', '#00bec4', '#3a82ab'],
avoidLabelOverlap: false,
itemStyle: {
- fontColor: "fff",
- borderColor: "#fff",
+ fontColor: 'fff',
+ borderColor: '#fff',
},
label: {
show: false,
- position: "center",
+ position: 'center',
},
emphasis: {
// label: {
@@ -61,17 +64,17 @@
show: false,
},
data: [
- { value: 4, name: "宸插畬鎴�" },
- { value: 7, name: "杩涜涓�" },
- { value: 8, name: "鏈紑濮�" },
+ { value: 4, name: '宸插畬鎴�' },
+ { value: 7, name: '杩涜涓�' },
+ { value: 8, name: '鏈紑濮�' },
],
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart44"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart44'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart45.vue b/src/components/echart45.vue
index 56e7845..bfc654f 100644
--- a/src/components/echart45.vue
+++ b/src/components/echart45.vue
@@ -10,106 +10,109 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "璧勯噾浣跨敤鍜岄绠楀姣�",
+ text: '璧勯噾浣跨敤鍜岄绠楀姣�',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
legend: {
- data: ["鍓╀綑閲戦", "宸蹭娇鐢ㄩ噾棰�", "棰勭畻閲戦"],
+ data: ['鍓╀綑閲戦', '宸蹭娇鐢ㄩ噾棰�', '棰勭畻閲戦'],
},
grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
containLabel: true,
},
xAxis: [
{
- type: "value",
+ type: 'value',
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
],
yAxis: [
{
- type: "category",
+ type: 'category',
axisTick: {
show: false,
},
- data: ["A2", "A3", "A4", "A5", "A6", "A7"],
+ data: ['A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
],
series: [
{
- name: "鍓╀綑",
- type: "bar",
+ name: '鍓╀綑',
+ type: 'bar',
label: {
show: true,
- position: "inside",
+ position: 'inside',
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [1200, 1440, 240, 350, 300, 630],
},
{
- name: "棰勭畻閲戦锛堜竾鍏�)",
- type: "bar",
- stack: "Total",
+ name: '棰勭畻閲戦锛堜竾鍏�)',
+ type: 'bar',
+ stack: 'Total',
label: {
show: true,
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [2000, 1800, 800, 1000, 600, 700],
},
{
- name: "宸蹭娇鐢ㄩ噾棰濓紙涓囧厓锛�",
- type: "bar",
- stack: "Total",
+ name: '宸蹭娇鐢ㄩ噾棰濓紙涓囧厓锛�',
+ type: 'bar',
+ stack: 'Total',
label: {
show: true,
- position: "left",
+ position: 'left',
},
emphasis: {
- focus: "series",
+ focus: 'series',
},
data: [-800, -360, -560, -650, -300, -70],
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart45"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart45'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/echart46.vue b/src/components/echart46.vue
index b666a2f..fba3ba7 100644
--- a/src/components/echart46.vue
+++ b/src/components/echart46.vue
@@ -10,71 +10,74 @@
components: {},
data() {
//杩欓噷瀛樻斁鏁版嵁
- return {};
+ return { myChart };
},
mounted() {
this.lineChart();
+ this.$bus.$on('resizeEchart', (res) => {
+ this.myChart.resize();
+ });
},
//鏂规硶闆嗗悎
methods: {
lineChart() {
let option = {
title: {
- text: "鍚勯」鐩畬鎴愬伐鏈�",
+ text: '鍚勯」鐩畬鎴愬伐鏈�',
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
},
},
// legend: {},
grid: {
- left: "0%",
- right: "4%",
- bottom: "0%",
+ left: '0%',
+ right: '4%',
+ bottom: '0%',
containLabel: true,
},
xAxis: {
- type: "value",
+ type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
},
},
yAxis: {
- type: "category",
+ type: 'category',
data: [
- "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁",
- "涓縿涓滅嚎绠￠亾宸ョ▼涓",
- "骞垮窞绔�",
- "鍞愬北LNG",
- "鏂扮枂杩炴湪娌佺珯鍦�",
- "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�",
+ '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁',
+ '涓縿涓滅嚎绠￠亾宸ョ▼涓',
+ '骞垮窞绔�',
+ '鍞愬北LNG',
+ '鏂扮枂杩炴湪娌佺珯鍦�',
+ '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�',
],
axisLine: {
lineStyle: {
- color: "#ccc",
+ color: '#ccc',
},
},
axisLabel: {
show: true,
textStyle: {
- color: "#fff",
+ color: '#fff',
},
formatter: function (params) {
- var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -85,7 +88,7 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -94,7 +97,7 @@
tempStr = params.substring(start, paramsNameNumber);
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + "\n";
+ tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
@@ -109,8 +112,8 @@
},
series: [
{
- name: "鍚勯」鐩凡瀹屾垚宸ユ湡",
- type: "bar",
+ name: '鍚勯」鐩凡瀹屾垚宸ユ湡',
+ type: 'bar',
barWidth: 20,
data: [200, 120, 200, 150, 90, 20],
showBackground: true,
@@ -120,12 +123,12 @@
barBorderRadius: [0, 90, 90, 0],
color: (params) => {
var colorList = [
- ["#40FBCB", "#009871"],
- ["#40FBCB", "#009871"],
- ["#40FBCB", "#009871"],
- ["#40FBCB", "#009871"],
- ["#40FBCB", "#009871"],
- ["#40FBCB", "#009871"],
+ ['#40FBCB', '#009871'],
+ ['#40FBCB', '#009871'],
+ ['#40FBCB', '#009871'],
+ ['#40FBCB', '#009871'],
+ ['#40FBCB', '#009871'],
+ ['#40FBCB', '#009871'],
];
var colorItem = colorList[params.dataIndex];
return new this.$echarts.graphic.LinearGradient(
@@ -151,10 +154,10 @@
},
],
};
- let myChart = this.$echarts.init(document.getElementById("echart46"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
+ this.myChart = this.$echarts.init(document.getElementById('echart46'));
+ this.myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ this.myChart.resize();
});
},
},
diff --git a/src/components/mapviewTwo.vue b/src/components/mapviewTwo.vue
index 3ca5c34..2f15fd1 100644
--- a/src/components/mapviewTwo.vue
+++ b/src/components/mapviewTwo.vue
@@ -1,13 +1,13 @@
<template>
<div class="map_box">
- <div class="header_box">
+ <!-- <div class="header_box">
<h3 v-for="(e, i) in title" :key="i">
<span v-if="typeIndex == i + 1">{{ e }}</span>
</h3>
<div class="close">
<i class="el-icon-circle-close" @click="close"></i>
</div>
- </div>
+ </div> -->
<div id="map"></div>
<div class="left">
<echart11 v-if="typeIndex == '1'" class="echart1"></echart11>
diff --git a/src/components/mixin/baseVuex.js b/src/components/mixin/baseVuex.js
deleted file mode 100644
index 7a7a7d5..0000000
--- a/src/components/mixin/baseVuex.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
- mapState,
- mapMutations
-} from 'vuex'
-export default {
- computed: {
- ...mapState('layerTree', [
- 'treeData',
- ]),
- ...mapState('user', [
- 'user',
- ]),
- ...mapState('mapTools', [
- 'hideTools',
- 'hidePositionBtn',
- 'statusbar',
- 'navBar',
- 'scaleBarStatus'
- ]),
- ...mapState('mapStatus', [
- 'viewCenter',
- 'mapStatus',
- ])
- },
- methods: {
- ...mapMutations('layerTree', [
- 'setTreeData',
- 'addTreeChildren',
- 'updataTreeNode',
- 'checkTreeNode',
- 'removeTreeNode'
- ]),
- ...mapMutations('user', [
- 'changeUserData',
- ]),
- ...mapMutations('mapTools', [
- 'changeScaleBarVisible',
- 'changeNavBarVisible',
- 'changeMapToolsVisible',
- ]),
- ...mapMutations('mapStatus', [
- 'setView',
- 'changeMapStatus',
- ])
- }
-}
diff --git a/src/components/mixin/layerTree.js b/src/components/mixin/layerTree.js
deleted file mode 100644
index 8c8cdc6..0000000
--- a/src/components/mixin/layerTree.js
+++ /dev/null
@@ -1,130 +0,0 @@
-// 閬嶅巻鑺傜偣
-function ergodicNode(nodes) {
- if (nodes && nodes.length) {
- nodes.forEach((item) => {
- item.rename = false;
- item.children && ergodicNode(item.children);
- });
- }
-}
-
-/**
- * 鍥惧眰鏍戞暟鎹�
- */
-export default {
- namespaced: true,
- state: {
- // 宸ョ▼鏍戞暟鎹�
- treeData: [],
- },
- mutations: {
- // 瀹氫箟宸ョ▼鏍戞暟鎹�
- setTreeData(state, data = []) {
- ergodicNode(data);
- state.treeData = data;
- },
- // 鏍戞寚瀹氫綅缃鍔犲瓙鑺傜偣锛堝繀椤绘爣璇嗕负key锛�
- addTreeChildren({ treeData }, { parentNode, pid, item }) {
- if (!pid) {
- treeData.push(item);
- return;
- }
- (parentNode || treeData).forEach((ele) => {
- if (ele.id === pid) {
- if (ele.children) {
- ele.children.push(item);
- } else {
- (parentNode || treeData).push(item);
- }
-
- return;
- } else {
- if (ele.children) {
- this.commit('layerTree/addTreeChildren', {
- parentNode: ele.children,
- pid,
- item,
- });
- }
- }
- });
- },
- // 鍕鹃�夎妭鐐�
- checkTreeNode({ treeData }, { parentNode, id, checked }) {
- (parentNode || treeData).forEach((ele) => {
- if (!id || (id && ele.id === id)) {
- // id涓嶅瓨锛屽嬀閫夋墍鏈夊瓙鑺傜偣锛宨d瀛樺湪锛屽嬀閫夊綋鍓嶈妭鐐�
- ele.checked = checked;
- if (ele.children) {
- this.commit('layerTree/checkTreeNode', {
- parentNode: ele.children,
- checked,
- });
- } else if (ele._children) {
- this.commit('layerTree/checkTreeNode', {
- parentNode: ele._children,
- checked,
- });
- }
- if (id) {
- return;
- }
- } else {
- // 閫掑綊
- if (ele.children) {
- this.commit('layerTree/checkTreeNode', {
- parentNode: ele.children,
- id,
- checked,
- });
- }
- }
- });
- },
- // 鏇存柊鑺傜偣鏁版嵁
- updataTreeNode({ treeData }, { parentNode, id, nodeValue, key, value }) {
- (parentNode || treeData).forEach((ele) => {
- if (ele.id === id) {
- if (nodeValue) {
- for (let _key in nodeValue) {
- if (nodeValue[_key] === undefined) {
- delete ele[_key];
- } else {
- ele[_key] = nodeValue[_key];
- }
- }
- } else {
- ele[key] = value;
- }
- return;
- } else {
- if (ele.children) {
- this.commit('layerTree/updataTreeNode', {
- parentNode: ele.children,
- id,
- nodeValue,
- key,
- value,
- });
- }
- }
- });
- },
- // 绉婚櫎鑺傜偣
- removeTreeNode({ treeData }, { id, parentNode }) {
- (parentNode || treeData).forEach((ele, index) => {
- if (ele.id === id) {
- (parentNode || treeData).splice(index, 1);
- return;
- } else {
- if (ele.children) {
- this.commit('layerTree/removeTreeNode', {
- id,
- parentNode: ele.children,
- });
- }
- }
- });
- },
- },
-};
diff --git a/src/views/Archive/index.vue b/src/views/Archive/index.vue
index 6af5376..4adec2e 100644
--- a/src/views/Archive/index.vue
+++ b/src/views/Archive/index.vue
@@ -8,18 +8,18 @@
</div>
<div class="top_right">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
- <el-form-item>
+ <!-- <el-form-item>
<el-input
v-model="formInline.user"
suffix-icon="el-icon-search"
:placeholder="$t('common.pleaseInput')"
></el-input>
- </el-form-item>
- <el-form-item>
+ </el-form-item> -->
+ <!-- <el-form-item>
<el-button icon="el-icon-search" class="primaries">{{
$t('common.iquery')
}}</el-button>
- </el-form-item>
+ </el-form-item> -->
<el-form-item>
<el-button @click="getSpaceMapVisibale" class="primaries">{{
$t('synthesis.rangequery')
@@ -28,7 +28,7 @@
</el-form>
</div>
</div>
-
+<!--
<div class="box_item">
<div class="box_left">璧勬枡绫诲埆</div>
<div class="box_cont">
@@ -70,10 +70,10 @@
<i class="el-icon-plus"></i> {{ $t('synthesis.Multiplechoice') }}
</div>
</div>
- </div>
+ </div> -->
<div class="bottom_content">
<div class="bottom_left">
- <div class="box_div">褰撳墠鎼滅储鍏抽敭璇�:</div>
+ <!-- <div class="box_div">褰撳墠鎼滅储鍏抽敭璇�:</div> -->
<div>
<ul>
<li>鎼滅储绫诲瀷</li>
@@ -160,7 +160,7 @@
:data="tableData1"
style="width: 100%"
@selection-change="handleSelectionChange1"
- height="86%"
+ height="100%"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="name" :label="$t('dataManage.vmobj.name')" />
@@ -1232,7 +1232,7 @@
.bottom_right {
width: calc(100% - 320px);
padding: 0px 20px;
- max-height: 460px;
+ max-height: 600px;
overflow-y: auto;
color: white;
li {
diff --git a/src/views/Synthesis/index.vue b/src/views/Synthesis/index.vue
index b32f41f..eec6c0b 100644
--- a/src/views/Synthesis/index.vue
+++ b/src/views/Synthesis/index.vue
@@ -252,7 +252,6 @@
margin: 0;
width: 300px;
height: auto;
-
transition: width 2s;
}
diff --git a/src/views/Thematic/index copy.vue b/src/views/Thematic/index copy.vue
new file mode 100644
index 0000000..d17429a
--- /dev/null
+++ b/src/views/Thematic/index copy.vue
@@ -0,0 +1,645 @@
+<template>
+ <div class="themaic">
+ <div class="headera-title">
+ <div>
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item>
+ <label class="th_title">{{ $t('themaic.name') }}</label>
+ </el-form-item>
+ <el-form-item>
+ <el-input
+ :placeholder="$t('common.pleaseInput')"
+ suffix-icon="el-icon-search"
+ v-model="input3"
+ />
+ </el-form-item>
+ <el-form-item>
+ <div class="title_count" style="color: white">
+ {{ $t('themaic.find') }}
+ <label style="magin: 0% 15px">{{ listcount }}</label>
+ {{ $t('themaic.record') }}
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="header_right">
+ <el-form :inline="true" :model="form" class="demo-form-inline">
+ <el-form-item :label="$t('themaic.maptltle')">
+ <el-select
+ v-model="selvalue"
+ class="m-2"
+ placeholder="Select"
+ style="width: 150px"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <div class="margin-right: 32px;">
+ <label style="margin-right: 10px; color: white"
+ >{{ $t('themaic.sortbytime') }}:</label
+ >
+
+ <i
+ @click="changetime(1)"
+ :class="{ active: timeindex == 1 }"
+ class="el-icon-caret-bottom"
+ ></i>
+
+ <i
+ @click="changetime(2)"
+ :class="{ active: timeindex == 2 }"
+ class="el-icon-caret-top"
+ ></i>
+ </div>
+ </el-form-item>
+ <el-form-item>
+ <div>
+ <label style="margin-right: 10px; color: white"
+ >{{ $t('themaic.sortbyviews') }}:</label
+ >
+
+ <i
+ @click="changeChecked(1)"
+ :class="{ active: checkindex == 1 }"
+ class="el-icon-caret-bottom"
+ ></i>
+
+ <i
+ @click="changeChecked(2)"
+ :class="{ active: checkindex == 2 }"
+ class="el-icon-caret-top"
+ ></i>
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+ <div class="themaic_content">
+ <div
+ @click="showThematic(item)"
+ v-for="(item, i) in middleList"
+ class="midedle_div"
+ :key="i"
+ >
+ <el-card class="middle_card">
+ <table>
+ <tr>
+ <td>
+ <div class="midddle_title">
+ <div class="t1">{{ item.name }}</div>
+ <div>
+ <label class="t2">{{ item.time }}</label
+ ><label class="t2">娴忚{{ item.count }}娆�</label>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div
+ class="middle_image"
+ :style="{
+ background: 'url(' + item.url + ') no-repeat center',
+ 'background-size': '100% 100%',
+ }"
+ ></div>
+ </td>
+ </tr>
+ <tr>
+ <td></td>
+ </tr>
+ </table>
+ </el-card>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: center">
+ <div class="pagination_box">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="1"
+ :page-sizes="[1, 2, 5, 10]"
+ :page-size="10"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="count"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ <!-- <el-card style="height: 100%">
+ <el-row :gutter="20">
+ <el-col :span="6">
+ <div class="th_title">{{ $t('themaic.name') }}</div>
+ </el-col>
+ <el-col :span="4" :offset="14">
+ <el-input
+ size="small"
+ :placeholder="$t('common.pleaseInput')"
+ suffix-icon="el-icon-search"
+ v-model="input3"
+ >
+ </el-input>
+ </el-col>
+ </el-row>
+ <el-divider />
+ <el-row>
+ <el-col :span="5">
+ <label style="margin-right: 10px"
+ >{{ $t('themaic.maptltle') }}:</label
+ >
+ <el-select
+ v-model="selvalue"
+ class="m-2"
+ placeholder="Select"
+ style="width: 150px"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-col>
+ <el-col :span="3">
+ <div style="margin-top: 5px">
+ <label style="margin-right: 10px"
+ >{{ $t('themaic.sortbytime') }}:</label
+ >
+
+ <i
+ @click="changetime(1)"
+ :class="{ active: timeindex == 1 }"
+ class="el-icon-caret-bottom"
+ ></i>
+
+ <i
+ @click="changetime(2)"
+ :class="{ active: timeindex == 2 }"
+ class="el-icon-caret-top"
+ ></i>
+ </div>
+ </el-col>
+ <el-col :span="3">
+ <div style="margin-top: 5px">
+ <label style="margin-right: 10px"
+ >{{ $t('themaic.sortbyviews') }}:</label
+ >
+
+ <i
+ @click="changeChecked(1)"
+ :class="{ active: checkindex == 1 }"
+ class="el-icon-caret-bottom"
+ ></i>
+
+ <i
+ @click="changeChecked(2)"
+ :class="{ active: checkindex == 2 }"
+ class="el-icon-caret-top"
+ ></i>
+ </div>
+ </el-col>
+ <el-col :span="10"> </el-col>
+ <el-col :span="3">
+ <div style="margin-top: 5px">
+ {{ $t('themaic.find') }}
+ <label style="magin: 0% 15px">{{ listcount }}</label>
+ {{ $t('themaic.record') }}
+ </div>
+ </el-col>
+ </el-row>
+ <el-divider />
+ <el-card shadow="never" class="themic_middle_card">
+ <div
+ @click="showThematic(item)"
+ v-for="(item, i) in middleList"
+ class="midedle_div"
+ :key="i"
+ >
+ <el-card class="middle_card">
+ <!-- <div>
+
+
+
+ </div>
+
+ <table>
+ <tr>
+ <td>
+ <div class="t1">{{ item.name }}</div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div
+ class="middle_image"
+ :style="{
+ background: 'url(' + item.url + ') no-repeat center',
+ 'background-size': '100% 100%',
+ }"
+ ></div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div style="position: absolute; bottom: 2%; right: 4%">
+ <label class="t2">{{ item.time }}</label
+ ><label class="t2">娴忚{{ item.count }}娆�</label>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </el-card>
+ </div>
+ </el-card>
+ -->
+ <el-dialog
+ class="themaic_dialog"
+ :modal-append-to-body="true"
+ :append-to-body="true"
+ :show-close="false"
+ :visible.sync="dialogVisible"
+ width="99%"
+ :before-close="handleClose"
+ >
+ <map-View
+ v-if="dialogVisible"
+ @close="close"
+ :typeIndex="typeIndex"
+ ></map-View>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import mapView from '@/components/mapviewTwo';
+export default {
+ components: {
+ mapView,
+ },
+ data() {
+ return {
+ dialogVisible: false,
+ input3: '',
+ count: 0,
+ listcount: 0,
+ checkindex: 1,
+ timeindex: 1,
+ pagesize: 10,
+ selvalue: '鍏ㄩ儴',
+
+ middleList: [
+ {
+ index: '1',
+ name: '绠￠亾鍩虹鏁版嵁涓撻鍥�',
+ time: '2022-07-10',
+ count: '28',
+ url: require('../../assets/img/themic/a1.jpg'),
+ pop: '/LFWeb/content/right/xxtj/xxtj1.html',
+ },
+ {
+ index: '2',
+ name: '鐢ㄦ埛浣跨敤鎯呭喌涓撻鍥�',
+ time: '2022-07-22',
+ count: '6',
+ url: require('../../assets/img/themic/a2.jpg'),
+ pop: '/LFWeb/content/right/xxtj/xxtj2.html',
+ },
+ {
+ index: '3',
+ name: '椤圭洰鍩烘湰鎯呭喌涓撻鍥�',
+ time: '2022-06-25',
+ count: '23',
+ url: require('../../assets/img/themic/a3.jpg'),
+ pop: '/LFWeb/content/right/xxtj/xxtj3.html',
+ },
+ {
+ index: '4',
+ name: '椤圭洰杩涘害绠＄悊涓撻鍥�',
+ time: '2022-07-17',
+ count: '15',
+ url: require('../../assets/img/themic/a4.jpg'),
+ pop: '/LFWeb/content/right/xxtj/xxtj4.html',
+ },
+ {
+ index: '5',
+ name: '鍏ㄧ悆椤圭洰鍒嗗竷涓撻鍥�',
+ time: '2022-07-20',
+ count: '7',
+ url: require('../../assets/img/themic/a5.jpg'),
+ pop: '/LFWeb/content/right/xxtj/xxtj5.html',
+ },
+ {
+ index: '6',
+ name: '鍏ㄥ浗绠＄綉鍒嗗竷涓撻鍥�',
+ time: '2022-07-26',
+ count: '5',
+ url: require('../../assets/img/themic/a6.jpg'),
+ pop: '/LFWeb/content/right/xxtj/xxtj5.html',
+ },
+ {
+ index: '7',
+ name: '鍏ㄥ浗椤圭洰瓒宠抗涓撻鍥�',
+ time: '2022-06-30',
+ count: '10',
+ url: require('../../assets/img/themic/a7.jpg'),
+ pop: '/LFWeb/content/right/xxtj/xxtj5.html',
+ },
+ ],
+ options: [
+ {
+ value: '鍏ㄩ儴',
+ label: '鍏ㄩ儴',
+ },
+ ],
+ typeIndex: '',
+ };
+ },
+ mounted() {
+ this.count = this.middleList.length;
+ this.listcount = this.middleList.length;
+ },
+ created() {
+ var val = this.$store.state.currentPerms;
+ var permsEntity = this.$store.state.permsEntity;
+ for (var i = 0; i < permsEntity.length; i++) {
+ if (permsEntity[i].perms == val) {
+ // this.showMenuChange(permsEntity[i], permsEntity);
+ console.log('涓撻鍥�', permsEntity[i]);
+ }
+ }
+ },
+ methods: {
+ close() {
+ this.$confirm('纭鍏抽棴锛�')
+ .then((_) => {
+ this.dialogVisible = false;
+ })
+ .catch((_) => {});
+ },
+ handleSizeChange(val) {
+ console.log(`姣忛〉 ${val} 鏉);
+ },
+ handleCurrentChange(val) {
+ console.log(`褰撳墠椤�: ${val}`);
+ },
+ handleClose(done) {
+ this.$confirm('纭鍏抽棴锛�')
+ .then((_) => {
+ done();
+ })
+ .catch((_) => {});
+ },
+ changeChecked(res) {
+ if (this.checkindex != res) {
+ this.checkindex = res;
+ }
+ },
+ changetime(res) {
+ if (this.timeindex != res) {
+ this.timeindex = res;
+ }
+ },
+ showThematic(res) {
+ this.typeIndex = res.index;
+
+ this.dialogVisible = true;
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.themaic {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
+ background: #303030;
+
+ .headera-title {
+ width: calc(100% - 2px);
+ height: 70px;
+ display: flex;
+ justify-content: space-between;
+ background: #353539;
+ .th_title {
+ width: 81px;
+ height: 20px;
+ font-size: 21px;
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ color: #009cff;
+ line-height: 49px;
+ margin-left: 30px;
+ bottom: 24px;
+ }
+
+ .title_count {
+ height: 18px;
+ font-size: 19px;
+ font-family: Source Han Sans CN;
+ font-weight: 200;
+ color: #ffffff;
+ }
+ .header_right {
+ float: right;
+ margin-right: 30px;
+
+ height: 100%;
+ width: auto;
+ }
+ .active {
+ color: #409eff;
+ }
+ }
+ .themaic_content {
+ width: calc(100% - 54px);
+ height: 80%;
+ display: flex;
+ flex-flow: row wrap;
+
+ justify-content: flex-start;
+ padding: 17px 27px 0px 27px;
+
+ .midedle_div {
+ width: 456px;
+ height: 303px;
+ margin-right: 10px;
+ .t1 {
+ font-size: 16px;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #ffffff;
+ line-height: 35px;
+ }
+ .middle_image {
+ height: 220px;
+ width: 415px;
+ }
+ .t2 {
+ font-size: 12px;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #ffffff;
+ line-height: 35px;
+ }
+ .midddle_title {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ .themic_middle_card {
+ border: transparent;
+ }
+ /deep/.el-card {
+ background: #454545;
+ border: 1px solid #454545;
+ }
+ }
+ .pagination_box {
+ /deep/.el-input__inner {
+ background-color: transparent !important;
+ border: 1px solid;
+ color: white;
+ }
+ /deep/.el-pagination__total {
+ color: white;
+ }
+ /deep/.el-pagination__jump {
+ color: white;
+ }
+ /deep/.el-pager li.active {
+ color: #409eff;
+ }
+ /deep/.el-pager li {
+ color: white;
+ background: transparent;
+ }
+ /deep/.el-pager li {
+ color: white;
+ }
+ /deep/.btn-prev {
+ background: transparent;
+ }
+ /deep/.btn-next {
+ background: transparent;
+ }
+ }
+ /deep/.el-form-item__content {
+ line-height: 70px;
+ }
+ /deep/ .el-input__inner {
+ border: 1px solid white;
+ color: white;
+ }
+ /deep/.el-form-item__label {
+ color: white;
+ line-height: 70px;
+ }
+ /deep/ .el-form--inline .el-form-item {
+ margin-right: 32px;
+ }
+ /deep/.el-input__inner {
+ background-color: transparent !important ;
+ color: #fff;
+ border: 1px solid white !important;
+ }
+}
+
+// .themaic .el-divider--horizontal {
+// margin: 10px 0 !important;
+// }
+
+// .themaic .th_title {
+// font-size: 22px;
+// font-family: Microsoft YaHei;
+// font-weight: bold;
+// color: #3b4d6e;
+// }
+
+// .radiusSearch .el-input__wrapper {
+// border-radius: 50px;
+// }
+
+// .themaic .active {
+// color: #409eff;
+// }
+
+// .themaic .themic_middle_card {
+// border: transparent;
+
+// }
+
+// .themaic .themic_middle_card .el-card__body {
+// padding: 0px;
+// }
+
+// .themaic
+
+// .themaic .midedle_div .middle_card {
+// width: 100%;
+// height: 100%;
+// }
+
+// .themaic .midedle_div .middle_card .el-card__body {
+// padding: 10px;
+// }
+
+// .themaic .midedle_div .t1 {
+// font-size: 16px;
+// font-family: Microsoft YaHei;
+// font-weight: bold;
+// color: #000000;
+// }
+
+// .themaic .midedle_div .t2 {
+// font-size: 13px;
+// font-family: Microsoft YaHei;
+// font-weight: 400;
+// color: #3f3f3f;
+// margin-right: 10px;
+// }
+
+// .themaic .midedle_div .middle_image {
+// width: 94%;
+// /* margin-top: 10px; */
+// height: 73%;
+// position: absolute;
+// }
+</style>
+<style>
+.themaic_dialog .el-dialog {
+ background: rgba(0, 0, 0, 0.8) !important;
+ margin-top: 5px !important;
+ margin-bottom: 5px !important;
+ /* margin-top: 5px !important;
+margin-top: 5px !important; */
+}
+
+.themaic_dialog .el-dialog__header {
+ background: transparent !important;
+ padding: 0;
+ margin: 0;
+ color: #fff;
+}
+
+.themaic_dialog .el-dialog__body {
+ background: transparent !important;
+ height: 98vh;
+ padding: 0;
+ margin: 0;
+ font-size: 20px;
+}
+.el-card {
+ background: #303030;
+ border: 0px;
+}
+</style>
diff --git a/src/views/Thematic/index.js b/src/views/Thematic/index.js
new file mode 100644
index 0000000..9f7d95f
--- /dev/null
+++ b/src/views/Thematic/index.js
@@ -0,0 +1,76 @@
+export const right_menu = [
+ {
+ id: '1',
+ name: '椤圭洰灞曠ず',
+ },
+ {
+ id: '2',
+ name: '宸ョ▼灞曠ず',
+ },
+ {
+ id: '3',
+ name: '宸ョ▼宸¤',
+ },
+];
+export const right_list = [
+ [
+ { id: 'a13', name: '澶у睆瑙嗗浘', layer: [11, 12, 13, 14] },
+ { id: 'a1', name: '鍏ㄧ悆绠＄綉鍥�', layer: [11, 12], index: '1' },
+ { id: 'a2', name: '鍏ㄧ悆椤圭洰瓒宠抗鍥�', layer: [13, 14], index: '2' },
+ { id: 'a3', name: '鍏ㄥ浗瀹樼綉鍥�', layer: [11, 13], index: '3' },
+ { id: 'a4', name: '鍏ㄥ浗椤圭洰瓒宠抗鍥�', layer: [12, 14], index: '4' },
+ { id: 'a5', name: '绠￠亾鍩虹鏁版嵁缁熻鍜屽垎鏋�', layer: [11, 12, 13] },
+ { id: 'a6', name: '鍏ㄥ浗椤圭洰鏌辩姸鍥�', layer: [11, 12, 14] },
+ { id: 'a7', name: '鍏ㄧ悆椤圭洰鏌辩姸鍥�', layer: [12, 13, 14] },
+ { id: 'a8', name: '鍏ㄧ悆椤圭洰楗煎浘', layer: [11] },
+ { id: 'a9', name: '鍏ㄥ浗椤圭洰楗煎浘', layer: [12] },
+ { id: 'a11', name: '鍏ㄧ悆椤圭洰鏅曟覆鍥�', layer: [13] },
+ { id: 'a12', name: '鍏ㄥ浗椤圭洰鏅曟覆鍥�', layer: [14] },
+ ],
+ [
+ { id: 'b1', name: '涓縿涓滅嚎绠￠亾宸ョ▼涓' },
+ { id: 'b2', name: '瑗挎皵涓滆緭涓夌嚎涓绠￠亾宸ョ▼' },
+ { id: 'b3', name: '瑗挎皵涓滆緭涓夌嚎涓绠￠亾宸ョ▼' },
+ { id: 'b4', name: '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�' },
+ { id: 'b5', name: '灞变笢绠＄綉瑗垮共绾块」鐩�' },
+ ],
+ [
+ { id: 'c1', name: '瑗挎皵涓滆緭涓�绾�' },
+ { id: 'c2', name: '瑗挎皵涓滆緭浜岀嚎瑗挎骞�' },
+ { id: 'c3', name: '瑗挎皵涓滆緭娣鏀嚎' },
+ { id: 'c4', name: '瑗块儴鍘熸补绠￠亾宸ョ▼' },
+ ],
+];
+export const image_layer = [
+ {
+ id: 1,
+ label: 'LF',
+ isEdit: false,
+ children: [
+ {
+ id: 11,
+ label: '绠￠亾涓績绾�',
+ resource: 'LF:m_pipeline',
+ isEdit: false,
+ },
+ {
+ id: 12,
+ label: '鎴樼暐閫氶亾',
+ resource: 'LF:th_strategic_channel',
+ isEdit: false,
+ },
+ {
+ id: 13,
+ label: '椤圭洰',
+ resource: 'LF:bs_project',
+ isEdit: false,
+ },
+ {
+ id: 14,
+ label: '绔欏満',
+ resource: 'LF:m_sitepoint',
+ isEdit: false,
+ },
+ ],
+ },
+];
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index d17429a..47d3181 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -1,415 +1,388 @@
<template>
<div class="themaic">
- <div class="headera-title">
- <div>
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
- <el-form-item>
- <label class="th_title">{{ $t('themaic.name') }}</label>
- </el-form-item>
- <el-form-item>
- <el-input
- :placeholder="$t('common.pleaseInput')"
- suffix-icon="el-icon-search"
- v-model="input3"
- />
- </el-form-item>
- <el-form-item>
- <div class="title_count" style="color: white">
- {{ $t('themaic.find') }}
- <label style="magin: 0% 15px">{{ listcount }}</label>
- {{ $t('themaic.record') }}
- </div>
- </el-form-item>
- </el-form>
- </div>
- <div class="header_right">
- <el-form :inline="true" :model="form" class="demo-form-inline">
- <el-form-item :label="$t('themaic.maptltle')">
- <el-select
- v-model="selvalue"
- class="m-2"
- placeholder="Select"
- style="width: 150px"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <div class="margin-right: 32px;">
- <label style="margin-right: 10px; color: white"
- >{{ $t('themaic.sortbytime') }}:</label
- >
-
- <i
- @click="changetime(1)"
- :class="{ active: timeindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
-
- <i
- @click="changetime(2)"
- :class="{ active: timeindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-form-item>
- <el-form-item>
- <div>
- <label style="margin-right: 10px; color: white"
- >{{ $t('themaic.sortbyviews') }}:</label
- >
-
- <i
- @click="changeChecked(1)"
- :class="{ active: checkindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
-
- <i
- @click="changeChecked(2)"
- :class="{ active: checkindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-form-item>
- </el-form>
- </div>
- </div>
- <div class="themaic_content">
- <div
- @click="showThematic(item)"
- v-for="(item, i) in middleList"
- class="midedle_div"
- :key="i"
- >
- <el-card class="middle_card">
- <table>
- <tr>
- <td>
- <div class="midddle_title">
- <div class="t1">{{ item.name }}</div>
- <div>
- <label class="t2">{{ item.time }}</label
- ><label class="t2">娴忚{{ item.count }}娆�</label>
- </div>
- </div>
- </td>
- </tr>
- <tr>
- <td>
- <div
- class="middle_image"
- :style="{
- background: 'url(' + item.url + ') no-repeat center',
- 'background-size': '100% 100%',
- }"
- ></div>
- </td>
- </tr>
- <tr>
- <td></td>
- </tr>
- </table>
- </el-card>
- </div>
- </div>
- <div style="display: flex; justify-content: center">
- <div class="pagination_box">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="1"
- :page-sizes="[1, 2, 5, 10]"
- :page-size="10"
- layout="total, sizes, prev, pager, next, jumper"
- :total="count"
+ <div class="left_menu" :class="{ left_main_show: !leftMenuOpen }">
+ <div class="tree-container">
+ <el-tree
+ :data="treeData"
+ show-checkbox
+ node-key="id"
+ default-expand-all
+ :props="defaultProps"
+ ref="tree"
+ @check-change="handleCheckChange"
>
- </el-pagination>
+ </el-tree>
</div>
- </div>
- <!-- <el-card style="height: 100%">
- <el-row :gutter="20">
- <el-col :span="6">
- <div class="th_title">{{ $t('themaic.name') }}</div>
- </el-col>
- <el-col :span="4" :offset="14">
- <el-input
- size="small"
- :placeholder="$t('common.pleaseInput')"
- suffix-icon="el-icon-search"
- v-model="input3"
- >
- </el-input>
- </el-col>
- </el-row>
- <el-divider />
- <el-row>
- <el-col :span="5">
- <label style="margin-right: 10px"
- >{{ $t('themaic.maptltle') }}:</label
- >
- <el-select
- v-model="selvalue"
- class="m-2"
- placeholder="Select"
- style="width: 150px"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-col>
- <el-col :span="3">
- <div style="margin-top: 5px">
- <label style="margin-right: 10px"
- >{{ $t('themaic.sortbytime') }}:</label
- >
- <i
- @click="changetime(1)"
- :class="{ active: timeindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
-
- <i
- @click="changetime(2)"
- :class="{ active: timeindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-col>
- <el-col :span="3">
- <div style="margin-top: 5px">
- <label style="margin-right: 10px"
- >{{ $t('themaic.sortbyviews') }}:</label
- >
-
- <i
- @click="changeChecked(1)"
- :class="{ active: checkindex == 1 }"
- class="el-icon-caret-bottom"
- ></i>
-
- <i
- @click="changeChecked(2)"
- :class="{ active: checkindex == 2 }"
- class="el-icon-caret-top"
- ></i>
- </div>
- </el-col>
- <el-col :span="10"> </el-col>
- <el-col :span="3">
- <div style="margin-top: 5px">
- {{ $t('themaic.find') }}
- <label style="magin: 0% 15px">{{ listcount }}</label>
- {{ $t('themaic.record') }}
- </div>
- </el-col>
- </el-row>
- <el-divider />
- <el-card shadow="never" class="themic_middle_card">
- <div
- @click="showThematic(item)"
- v-for="(item, i) in middleList"
- class="midedle_div"
- :key="i"
- >
- <el-card class="middle_card">
- <!-- <div>
-
-
-
- </div>
-
- <table>
- <tr>
- <td>
- <div class="t1">{{ item.name }}</div>
- </td>
- </tr>
- <tr>
- <td>
- <div
- class="middle_image"
- :style="{
- background: 'url(' + item.url + ') no-repeat center',
- 'background-size': '100% 100%',
- }"
- ></div>
- </td>
- </tr>
- <tr>
- <td>
- <div style="position: absolute; bottom: 2%; right: 4%">
- <label class="t2">{{ item.time }}</label
- ><label class="t2">娴忚{{ item.count }}娆�</label>
- </div>
- </td>
- </tr>
- </table>
- </el-card>
+ <div class="changeBaseLayer">
+ <div @click="changeMenulayer" class="CenDiv">
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
</div>
- </el-card>
- -->
- <el-dialog
- class="themaic_dialog"
- :modal-append-to-body="true"
- :append-to-body="true"
- :show-close="false"
- :visible.sync="dialogVisible"
- width="99%"
- :before-close="handleClose"
- >
- <map-View
- v-if="dialogVisible"
- @close="close"
- :typeIndex="typeIndex"
- ></map-View>
- </el-dialog>
+ </div>
+ </div>
+ <div class="center_content">
+ <div id="MapView" class="MapView">
+ <div class="leftEchart" v-show="openEcharts">
+ <echart11 v-if="typeIndex == '1'" class="echart1"></echart11>
+ <echart12 v-if="typeIndex == '1'" class="echart1"></echart12>
+ <echart13 v-if="typeIndex == '1'" class="echart1"></echart13>
+ <echart21 v-if="typeIndex == '2'" class="echart1"></echart21>
+ <echart22 v-if="typeIndex == '2'" class="echart1"></echart22>
+ <echart23 v-if="typeIndex == '2'" class="echart1"></echart23>
+ <echart31 v-if="typeIndex == '3'" class="echart1"></echart31>
+ <echart32 v-if="typeIndex == '3'" class="echart1"></echart32>
+ <echart33 v-if="typeIndex == '3'" class="echart1"></echart33>
+ <echart44 v-if="typeIndex == '4'" class="echart1"></echart44>
+ <echart45 v-if="typeIndex == '4'" class="echart1"></echart45>
+ <echart46 v-if="typeIndex == '4'" class="echart1"></echart46>
+ </div>
+ <div class="rightEchart" v-show="openEcharts">
+ >
+ <echart14 v-if="typeIndex == '1'" class="echart1"></echart14>
+ <echart15 v-if="typeIndex == '1'" class="echart1"></echart15>
+ <echart16 v-if="typeIndex == '1'" class="echart1"></echart16>
+ <echart24 v-if="typeIndex == '2'" class="echart1"></echart24>
+ <echart25 v-if="typeIndex == '2'" class="echart1"></echart25>
+ <echart26 v-if="typeIndex == '2'" class="echart1"></echart26>
+ <echart34 v-if="typeIndex == '3'" class="echart1"></echart34>
+ <echart35 v-if="typeIndex == '3'" class="echart1"></echart35>
+ <echart36 v-if="typeIndex == '3'" class="echart1"></echart36>
+ <echart41 v-if="typeIndex == '4'" class="echart1"></echart41>
+ <echart42 v-if="typeIndex == '4'" class="echart1"></echart42>
+ <echart43 v-if="typeIndex == '4'" class="echart1"></echart43>
+ </div>
+ <div class="left_content">
+ <div v-show="leftMenuOpen" @click="showLeftMenu">
+ <i style="color: white" class="el-icon-caret-left"></i>
+ </div>
+ <div v-show="!leftMenuOpen" @click="showLeftMenu">
+ <i style="color: white" class="el-icon-caret-right"></i>
+ </div>
+ </div>
+ <div class="right_content">
+ <div v-show="!rightMenuOpen" @click="showRightMenu">
+ <i style="color: white" class="el-icon-caret-left"></i>
+ </div>
+ <div v-show="rightMenuOpen" @click="showRightMenu">
+ <i style="color: white" class="el-icon-caret-right"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right_menu" :class="{ right_main_show: !rightMenuOpen }">
+ <div class="content_right">
+ <ul>
+ <li
+ @click="changeRightList(item)"
+ v-for="item in rightList"
+ :class="item.id == changeSelectli ? 'changeliStyle' : ''"
+ >
+ {{ item.name }}
+ </li>
+ </ul>
+ </div>
+ <div class="bottom_right">
+ <div
+ v-for="item in rightMenu"
+ class="right_item"
+ :class="{ changeStyle: changeSelectStyle == item.id }"
+ @click="changeRightMenu(item)"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
</div>
</template>
<script>
-import mapView from '@/components/mapviewTwo';
+import mapsdk from '../../components/mapsdk.vue';
+import { right_menu, right_list, image_layer } from './index.js';
+import echart11 from '../../components/echart11.vue';
+import echart12 from '../../components/echart12.vue';
+import echart13 from '../../components/echart13.vue';
+import echart14 from '../../components/echart14.vue';
+import echart15 from '../../components/echart15.vue';
+import echart16 from '../../components/echart16.vue';
+import echart21 from '../../components/echart21.vue';
+import echart22 from '../../components/echart22.vue';
+import echart23 from '../../components/echart23.vue';
+import echart24 from '../../components/echart24.vue';
+import echart25 from '../../components/echart25.vue';
+import echart26 from '../../components/echart26.vue';
+import echart31 from '../../components/echart31.vue';
+import echart32 from '../../components/echart32.vue';
+import echart33 from '../../components/echart33.vue';
+import echart34 from '../../components/echart34.vue';
+import echart35 from '../../components/echart35.vue';
+import echart36 from '../../components/echart36.vue';
+import echart41 from '../../components/echart41.vue';
+import echart42 from '../../components/echart42.vue';
+import echart43 from '../../components/echart43.vue';
+import echart44 from '../../components/echart44.vue';
+import echart45 from '../../components/echart45.vue';
+import echart46 from '../../components/echart46.vue';
+import axios from 'axios';
export default {
components: {
- mapView,
+ mapsdk,
+ echart11,
+ echart12,
+ echart13,
+ echart14,
+ echart15,
+ echart16,
+ echart21,
+ echart22,
+ echart23,
+ echart24,
+ echart25,
+ echart26,
+ echart31,
+ echart32,
+ echart33,
+ echart34,
+ echart35,
+ echart36,
+ echart41,
+ echart43,
+ echart42,
+ echart44,
+ echart45,
+ echart46,
},
data() {
return {
- dialogVisible: false,
- input3: '',
- count: 0,
- listcount: 0,
- checkindex: 1,
- timeindex: 1,
- pagesize: 10,
- selvalue: '鍏ㄩ儴',
-
- middleList: [
- {
- index: '1',
- name: '绠￠亾鍩虹鏁版嵁涓撻鍥�',
- time: '2022-07-10',
- count: '28',
- url: require('../../assets/img/themic/a1.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj1.html',
- },
- {
- index: '2',
- name: '鐢ㄦ埛浣跨敤鎯呭喌涓撻鍥�',
- time: '2022-07-22',
- count: '6',
- url: require('../../assets/img/themic/a2.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj2.html',
- },
- {
- index: '3',
- name: '椤圭洰鍩烘湰鎯呭喌涓撻鍥�',
- time: '2022-06-25',
- count: '23',
- url: require('../../assets/img/themic/a3.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj3.html',
- },
- {
- index: '4',
- name: '椤圭洰杩涘害绠＄悊涓撻鍥�',
- time: '2022-07-17',
- count: '15',
- url: require('../../assets/img/themic/a4.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj4.html',
- },
- {
- index: '5',
- name: '鍏ㄧ悆椤圭洰鍒嗗竷涓撻鍥�',
- time: '2022-07-20',
- count: '7',
- url: require('../../assets/img/themic/a5.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj5.html',
- },
- {
- index: '6',
- name: '鍏ㄥ浗绠＄綉鍒嗗竷涓撻鍥�',
- time: '2022-07-26',
- count: '5',
- url: require('../../assets/img/themic/a6.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj5.html',
- },
- {
- index: '7',
- name: '鍏ㄥ浗椤圭洰瓒宠抗涓撻鍥�',
- time: '2022-06-30',
- count: '10',
- url: require('../../assets/img/themic/a7.jpg'),
- pop: '/LFWeb/content/right/xxtj/xxtj5.html',
- },
- ],
- options: [
- {
- value: '鍏ㄩ儴',
- label: '鍏ㄩ儴',
- },
- ],
- typeIndex: '',
+ typeIndex: null,
+ leftMenuOpen: false,
+ rightMenuOpen: false,
+ changeSelectStyle: null,
+ changeSelectli: null,
+ rightMenu: [],
+ rightList: [],
+ treeData: [],
+ centerFlag: false,
+ isActive: true,
+ isMenuLayer: false,
+ openEcharts: false,
+ defaultProps: {
+ children: 'children',
+ label: 'label',
+ },
};
},
mounted() {
- this.count = this.middleList.length;
- this.listcount = this.middleList.length;
+ this.treeData = image_layer;
+ this.rightList = right_list[0];
+ this.rightMenu = right_menu;
+ this.changeSelectli = this.rightList[0].id;
+ this.changeSelectStyle = this.rightMenu[0].id;
+ this.initMapView();
+ this.addImageLayer();
},
- created() {
- var val = this.$store.state.currentPerms;
- var permsEntity = this.$store.state.permsEntity;
- for (var i = 0; i < permsEntity.length; i++) {
- if (permsEntity[i].perms == val) {
- // this.showMenuChange(permsEntity[i], permsEntity);
- console.log('涓撻鍥�', permsEntity[i]);
- }
- }
- },
+ created() {},
methods: {
- close() {
- this.$confirm('纭鍏抽棴锛�')
- .then((_) => {
- this.dialogVisible = false;
- })
- .catch((_) => {});
- },
- handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉);
- },
- handleCurrentChange(val) {
- console.log(`褰撳墠椤�: ${val}`);
- },
- handleClose(done) {
- this.$confirm('纭鍏抽棴锛�')
- .then((_) => {
- done();
- })
- .catch((_) => {});
- },
- changeChecked(res) {
- if (this.checkindex != res) {
- this.checkindex = res;
+ changeRightList(res) {
+ this.changeSelectli = res.id;
+ if (res.layer != null) {
+ var layer = res.layer;
+ this.$refs.tree.setCheckedKeys(layer);
}
- },
- changetime(res) {
- if (this.timeindex != res) {
- this.timeindex = res;
+ if (res.index != null) {
+ this.openEcharts = true;
+ this.typeIndex = res.index;
+ } else {
+ this.openEcharts = false;
+ this.typeIndex = null;
}
- },
- showThematic(res) {
- this.typeIndex = res.index;
+ var vid = res.id;
- this.dialogVisible = true;
+ if (vid.indexOf('b') != -1) {
+ var url = geoserverWFS + '%27' + res.name + '%27';
+ axios.get(url).then((res) => {
+ if (res.status == 200) {
+ var point = res.data.features[0].geometry.coordinates;
+ //瀹氫綅
+ MapViewer.camera.flyTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(
+ point[0],
+ point[1],
+ 8000
+ ),
+ });
+ }
+ });
+ } else if (vid.indexOf('a') != -1) {
+ //瀹氫綅
+ MapViewer.camera.flyTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
+ });
+ } else if (vid.indexOf('c') != -1) {
+ var url = geoserverWFSLine + '%27' + res.name + '%27';
+ axios.get(url).then((res) => {
+ if (res.status == 200) {
+ if (res.data.features.length == 0) return;
+ var std = [];
+ for (var i in res.data.features) {
+ var featurLayer = res.data.features[i];
+ var path = featurLayer.geometry.coordinates[0];
+ for (var j in path) {
+ std.push(path[j][0], path[j][1], 50);
+ }
+ }
+ this.showPathLine(std);
+ }
+ });
+ }
+ },
+ showPathLine(res) {
+ sgworld.Creator.getFlyData(res, (data) => {
+ data.showPoint = false;
+ data.showLine = true;
+ data.mode = 1;
+ // 寮圭獥鏁版嵁
+ window.PathAnimationData = {
+ flyData: data,
+ };
+ window.PathAnimationData.winIndex = layer.open({
+ type: 2,
+ title: '璺緞鍔ㄧ敾',
+ shade: false,
+ area: ['352px', '690px'],
+ offset: 'r',
+ skin: 'other-class',
+ content: SmartEarthRootUrl + 'Workers/path/Path.html',
+ end: function () {
+ PathAnimationData.fly && PathAnimationData.fly.exit();
+ },
+ });
+ });
+ },
+ showLeftMenu() {
+ this.leftMenuOpen = !this.leftMenuOpen;
+ var a = 0;
+ var layer = setInterval(() => {
+ a++;
+ this.$bus.$emit('resizeEchart', true);
+ if (a == 20) {
+ clearInterval(layer);
+ this.$bus.$emit('resizeEchart', true);
+ }
+ }, 100);
+ },
+ showRightMenu() {
+ this.rightMenuOpen = !this.rightMenuOpen;
+ var a = 0;
+ var layer = setInterval(() => {
+ a++;
+ this.$bus.$emit('resizeEchart', true);
+ if (a == 20) {
+ clearInterval(layer);
+ this.$bus.$emit('resizeEchart', true);
+ }
+ }, 100);
+ },
+ changeRightMenu(res) {
+ this.rightList = right_list[parseInt(res.id) - 1];
+ this.changeSelectStyle = res.id;
+ },
+ initMapView() {
+ window.sgworld = new SmartEarth.SGWorld('MapView', {
+ licenseServer: window.sceneConfig.licenseServer,
+ });
+
+ window.MapViewer = window.sgworld._Viewer;
+
+ //瀹氫綅
+ sgworld.Navigate.jumpTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
+ });
+
+ MapViewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+
+ MapViewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtVecBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+ MapViewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtAnnoLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ })
+ );
+ //鏄剧ずfps
+ MapViewer.scene.debugShowFramesPerSecond = false;
+ //瀵艰埅鎺т欢
+ window.sgworld.navControl('nav', false);
+ //姣斾緥灏�
+ window.sgworld.navControl('scale', false);
+ },
+ changeMenulayer() {
+ this.isActive = !this.isActive;
+ this.isMenuLayer = !this.isMenuLayer;
+ this.setLayerVisible();
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ MapViewer.imageryLayers.get(2).show = true;
+ MapViewer.imageryLayers.get(1).show = false;
+ } else {
+ MapViewer.imageryLayers.get(2).show = false;
+ MapViewer.imageryLayers.get(1).show = true;
+ }
+ },
+ addImageLayer() {
+ var val_layer = this.treeData[0].children;
+ var std = [];
+ for (var i = 0; i < val_layer.length; i++) {
+ let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ url: geoServerURl,
+ layers: val_layer[i].resource,
+ parameters: {
+ transparent: true,
+ format: 'image/png',
+ },
+ });
+ layerWMS.name = val_layer[i].label;
+ window.MapViewer.imageryLayers.addImageryProvider(layerWMS);
+ std.push(val_layer[i].id);
+ }
+ this.$refs.tree.setCheckedKeys(std);
+ },
+ handleCheckChange(data, checked, indeterminate) {
+ if (data.children != null) return;
+ for (var i = 0; i < window.MapViewer.imageryLayers._layers.length; i++) {
+ var val_id =
+ window.MapViewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == data.label) {
+ const img_layer = window.MapViewer.imageryLayers._layers[i];
+ img_layer.show = checked;
+ }
+ }
},
},
};
@@ -419,227 +392,188 @@
.themaic {
width: 100%;
height: 100%;
- position: relative;
- cursor: pointer;
- overflow: hidden;
background: #303030;
-
- .headera-title {
- width: calc(100% - 2px);
- height: 70px;
- display: flex;
- justify-content: space-between;
- background: #353539;
- .th_title {
- width: 81px;
- height: 20px;
- font-size: 21px;
- font-family: Source Han Sans SC;
- font-weight: 400;
- color: #009cff;
- line-height: 49px;
- margin-left: 30px;
- bottom: 24px;
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ .left_menu {
+ margin: 0;
+ width: 300px;
+ height: 100%;
+ transition: width 2s;
+ background: #133a5f;
+ .tree-container {
+ margin: 10px;
}
- .title_count {
- height: 18px;
- font-size: 19px;
- font-family: Source Han Sans CN;
- font-weight: 200;
- color: #ffffff;
- }
- .header_right {
- float: right;
- margin-right: 30px;
-
- height: 100%;
- width: auto;
- }
- .active {
- color: #409eff;
+ .changeBaseLayer {
+ width: 100%;
+ height: 80px;
+ margin-top: calc(190% - 10px);
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ .CenDiv {
+ height: 40px;
+ width: 60px;
+ margin: 2%;
+ border-radius: 5px;
+ }
+ .CenDiv:hover {
+ border: 1px solid #409eff;
+ }
+ .active {
+ height: 40px;
+ width: 60px;
+ background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
+ .menuLayer {
+ height: 40px;
+ width: 60px;
+ background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
}
}
- .themaic_content {
- width: calc(100% - 54px);
- height: 80%;
- display: flex;
- flex-flow: row wrap;
-
- justify-content: flex-start;
- padding: 17px 27px 0px 27px;
-
- .midedle_div {
- width: 456px;
- height: 303px;
- margin-right: 10px;
- .t1 {
- font-size: 16px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- line-height: 35px;
- }
- .middle_image {
- height: 220px;
- width: 415px;
- }
- .t2 {
- font-size: 12px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- line-height: 35px;
- }
- .midddle_title {
+ .center_content {
+ flex: 1;
+ height: 100%;
+ .MapView {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ float: left;
+ position: relative;
+ .leftEchart {
+ z-index: 60;
+ position: absolute;
+ height: 100%;
+ width: 20%;
+ margin-left: 1.5%;
display: flex;
+ flex-direction: column;
justify-content: space-between;
}
- }
- .themic_middle_card {
- border: transparent;
- }
- /deep/.el-card {
- background: #454545;
- border: 1px solid #454545;
+ .rightEchart {
+ z-index: 60;
+ position: absolute;
+ height: 100%;
+ width: 20%;
+ right: 0;
+ opacity: 0.5;
+ margin-right: 1.5%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .right_content {
+ width: 10px;
+ height: 100%;
+ z-index: 60;
+ display: flex;
+ align-items: center;
+ right: 0;
+ position: absolute;
+ padding: 0px 5px;
+ }
+ .left_content {
+ width: 10px;
+ height: 100%;
+ z-index: 60;
+ left: 0;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ padding: 0px 5px;
+ }
}
}
- .pagination_box {
- /deep/.el-input__inner {
- background-color: transparent !important;
- border: 1px solid;
- color: white;
+ .item_menu {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ .left_main_show {
+ width: 0;
+ }
+ .right_menu {
+ margin: 0;
+ width: 300px;
+ height: 100%;
+ transition: width 2s;
+ background: #133a5f;
+
+ .content_right {
+ width: calc(100% -20px);
+ height: 95%;
+ li {
+ border-bottom: 1px solid white;
+ padding: 10px 10px;
+ color: white;
+ }
+ li:hover {
+ color: #409eff;
+ }
+ .changeliStyle {
+ color: #409eff;
+ }
}
- /deep/.el-pagination__total {
- color: white;
+
+ .bottom_right {
+ width: 100%;
+ height: 5%;
+ display: flex;
+ position: relative;
+ .right_item {
+ align-items: center;
+ display: flex;
+ height: calc(100% - 2px);
+ flex-grow: 1;
+ justify-content: center;
+ font-size: 16px;
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ color: white;
+ border-bottom: 1px solid white;
+ border-top: 1px solid white;
+ border-left: 1px solid white;
+ }
}
- /deep/.el-pagination__jump {
- color: white;
- }
- /deep/.el-pager li.active {
- color: #409eff;
- }
- /deep/.el-pager li {
- color: white;
- background: transparent;
- }
- /deep/.el-pager li {
- color: white;
- }
- /deep/.btn-prev {
- background: transparent;
- }
- /deep/.btn-next {
- background: transparent;
+ .changeStyle {
+ background: #409eff;
}
}
- /deep/.el-form-item__content {
- line-height: 70px;
+
+ .right_main_show {
+ width: 0;
}
- /deep/ .el-input__inner {
- border: 1px solid white;
- color: white;
+ .echart1 {
+ width: 88%;
+ height: 27%;
+ border: 3px solid rgba(204, 204, 204, 0.76);
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.4);
}
- /deep/.el-form-item__label {
- color: white;
- line-height: 70px;
+
+ /deep/ .el-tree {
+ padding-top: 15px;
+ padding-left: 10px;
+ // 涓嶅彲鍏ㄩ�夋牱寮�
+ .el-tree-node {
+ .is-leaf + .el-checkbox .el-checkbox__inner {
+ display: inline-block;
+ }
+ .el-checkbox .el-checkbox__inner {
+ display: none;
+ }
+ }
}
- /deep/ .el-form--inline .el-form-item {
- margin-right: 32px;
- }
- /deep/.el-input__inner {
- background-color: transparent !important ;
- color: #fff;
- border: 1px solid white !important;
- }
-}
-
-// .themaic .el-divider--horizontal {
-// margin: 10px 0 !important;
-// }
-
-// .themaic .th_title {
-// font-size: 22px;
-// font-family: Microsoft YaHei;
-// font-weight: bold;
-// color: #3b4d6e;
-// }
-
-// .radiusSearch .el-input__wrapper {
-// border-radius: 50px;
-// }
-
-// .themaic .active {
-// color: #409eff;
-// }
-
-// .themaic .themic_middle_card {
-// border: transparent;
-
-// }
-
-// .themaic .themic_middle_card .el-card__body {
-// padding: 0px;
-// }
-
-// .themaic
-
-// .themaic .midedle_div .middle_card {
-// width: 100%;
-// height: 100%;
-// }
-
-// .themaic .midedle_div .middle_card .el-card__body {
-// padding: 10px;
-// }
-
-// .themaic .midedle_div .t1 {
-// font-size: 16px;
-// font-family: Microsoft YaHei;
-// font-weight: bold;
-// color: #000000;
-// }
-
-// .themaic .midedle_div .t2 {
-// font-size: 13px;
-// font-family: Microsoft YaHei;
-// font-weight: 400;
-// color: #3f3f3f;
-// margin-right: 10px;
-// }
-
-// .themaic .midedle_div .middle_image {
-// width: 94%;
-// /* margin-top: 10px; */
-// height: 73%;
-// position: absolute;
-// }
-</style>
-<style>
-.themaic_dialog .el-dialog {
- background: rgba(0, 0, 0, 0.8) !important;
- margin-top: 5px !important;
- margin-bottom: 5px !important;
- /* margin-top: 5px !important;
-margin-top: 5px !important; */
-}
-
-.themaic_dialog .el-dialog__header {
- background: transparent !important;
- padding: 0;
- margin: 0;
- color: #fff;
-}
-
-.themaic_dialog .el-dialog__body {
- background: transparent !important;
- height: 98vh;
- padding: 0;
- margin: 0;
- font-size: 20px;
-}
-.el-card {
- background: #303030;
- border: 0px;
}
</style>
diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue
index 4aeadb2..0c2d1a8 100644
--- a/src/views/Tools/LayerTree.vue
+++ b/src/views/Tools/LayerTree.vue
@@ -20,6 +20,8 @@
@node-drop="handleDrop"
@node-contextmenu="rightClick"
:filter-node-method="filterNode"
+ @check-change="handleCheckChange"
+ :default-checked-keys="handleTreeCheck"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
@@ -106,32 +108,46 @@
appendNodetitle: '',
maxexpandId: 4,
rightClickMenuStyle: {},
+ handleTreeCheck: [],
dialogVisible: false,
addFormServer: {},
+ layerId: [
+ 'm_pipeline',
+ 'th_strategic_channel',
+ 'bs_project',
+ 'm_sitepoint',
+ ],
treeData: [
{
id: 1,
- label: '褰卞儚',
+ label: 'LF',
isEdit: false,
- children: [],
- },
- {
- id: 2,
- label: '鍦板舰',
- isEdit: false,
- children: [],
- },
- {
- id: 3,
- label: '妯″瀷',
- isEdit: false,
- children: [],
- },
- {
- id: 4,
- label: '鐭㈤噺',
- isEdit: false,
- children: [],
+ children: [
+ {
+ id: 11,
+ label: '绠￠亾涓績绾�',
+ resource: 'LF:m_pipeline',
+ isEdit: false,
+ },
+ {
+ id: 12,
+ label: '鎴樼暐閫氶亾',
+ resource: 'LF:th_strategic_channel',
+ isEdit: false,
+ },
+ {
+ id: 13,
+ label: '椤圭洰',
+ resource: 'LF:bs_project',
+ isEdit: false,
+ },
+ {
+ id: 14,
+ label: '绔欏満',
+ resource: 'LF:m_sitepoint',
+ isEdit: false,
+ },
+ ],
},
],
defaultProps: {
@@ -190,6 +206,15 @@
// 榧犳爣宸﹀嚮浜嬩欢
handleLeftclick(data, node) {
this.foo();
+ if (node.checked == true) {
+ for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
+ var val_id =
+ window.Viewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == data.label) {
+ const img_layer = window.Viewer.imageryLayers._layers[i];
+ }
+ }
+ }
},
// 鍙栨秷榧犳爣鐩戝惉浜嬩欢 鑿滃崟鏍�
foo() {
@@ -223,7 +248,6 @@
this.addFormServer = {};
},
setAddServer() {
- debugger;
var data = this.addFormServer;
data.id = Math.ceil(Math.random() * 100);
this.$refs.tree.append(data, this.currentNode);
@@ -270,13 +294,59 @@
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
+ handleCheckChange(data, checked, indeterminate) {
+ if (data.children != null) return;
+ var std = [];
+ if (checked == true) {
+ for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
+ var val_id =
+ window.Viewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == data.label) {
+ std.push(data.label);
+ }
+ }
+ if (std.length == 0) {
+ let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ url: geoServerURl,
+ layers: data.resource,
+ parameters: {
+ transparent: true,
+ format: 'image/png',
+ },
+ });
+ layerWMS.name = data.label;
+ window.Viewer.imageryLayers.addImageryProvider(layerWMS);
+ }
+ } else {
+ for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
+ var val_id =
+ window.Viewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == data.label) {
+ const img_layer = window.Viewer.imageryLayers._layers[i];
+ window.Viewer.imageryLayers.remove(img_layer);
+ }
+ }
+ }
+ },
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
- mounted() {},
+ mounted() {
+ var std = [];
+ var val = this.treeData[0].children;
+ for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
+ var val_id = window.Viewer.imageryLayers._layers[i].imageryProvider.name;
+ for (var j = 0; j < val.length; j++) {
+ if (val_id == val[j].label) {
+ std.push(val[j].id);
+ }
+ }
+ }
+ this.$refs.tree.setCheckedKeys(std);
+ },
};
</script>
<style scoped lang="less">
diff --git a/src/views/Tools/baseVuex.js b/src/views/Tools/baseVuex.js
index 7a7a7d5..2226d8e 100644
--- a/src/views/Tools/baseVuex.js
+++ b/src/views/Tools/baseVuex.js
@@ -1,26 +1,18 @@
-import {
- mapState,
- mapMutations
-} from 'vuex'
+import { mapState, mapMutations } from 'vuex';
export default {
computed: {
- ...mapState('layerTree', [
- 'treeData',
- ]),
- ...mapState('user', [
- 'user',
- ]),
+ // ...mapState('layerTree', [
+ // 'treeData',
+ // ]),
+ ...mapState('user', ['user']),
...mapState('mapTools', [
'hideTools',
'hidePositionBtn',
'statusbar',
'navBar',
- 'scaleBarStatus'
+ 'scaleBarStatus',
]),
- ...mapState('mapStatus', [
- 'viewCenter',
- 'mapStatus',
- ])
+ ...mapState('mapStatus', ['viewCenter', 'mapStatus']),
},
methods: {
...mapMutations('layerTree', [
@@ -28,19 +20,14 @@
'addTreeChildren',
'updataTreeNode',
'checkTreeNode',
- 'removeTreeNode'
+ 'removeTreeNode',
]),
- ...mapMutations('user', [
- 'changeUserData',
- ]),
+ ...mapMutations('user', ['changeUserData']),
...mapMutations('mapTools', [
'changeScaleBarVisible',
'changeNavBarVisible',
'changeMapToolsVisible',
]),
- ...mapMutations('mapStatus', [
- 'setView',
- 'changeMapStatus',
- ])
- }
-}
+ ...mapMutations('mapStatus', ['setView', 'changeMapStatus']),
+ },
+};
diff --git a/src/views/datamanage/SpatialData.vue b/src/views/datamanage/SpatialData.vue
index 71af9bf..b88d160 100644
--- a/src/views/datamanage/SpatialData.vue
+++ b/src/views/datamanage/SpatialData.vue
@@ -48,7 +48,7 @@
</el-form-item>
</el-form>
<el-divider class="eldivider" />
- <div style="height: 85%">
+ <div style="height=500px">
<el-table
ref="filterTable"
:data="tableData"
@@ -393,6 +393,9 @@
if (data.children != null) return;
this.listData.name = data.entity; //瑕佹煡璇㈣〃鏍肩被鍨嬶紱
this.getClickTable = data;
+ this.listData.pageIndex =1;
+ this.listData.pageSize=10;
+ this.count = 0;
this.filedsLayer = this.getCollapseDomFiled(); //鑾峰彇姣忎釜琛ㄥ瓧娈靛悕绉板強闃堝��
//鑾峰彇table淇℃伅
@@ -515,13 +518,13 @@
},
//鍒嗛〉鐐瑰嚮浜嬩欢
handleSizeChange(val) {
- this.listdata.pageSize = val;
- this.listdata.pageIndex = 1;
+ this.listData.pageSize = val;
+ this.listData.pageIndex = 1;
//鑾峰彇table淇℃伅
this.getCollapseTable(this.filedsLayer);
},
handleCurrentChange(val) {
- this.listdata.pageIndex = val;
+ this.listData.pageIndex = val;
//鑾峰彇table淇℃伅
this.getCollapseTable(this.filedsLayer);
},
diff --git a/src/views/exportMap/index.vue b/src/views/exportMap/index.vue
index 220ee02..738dddd 100644
--- a/src/views/exportMap/index.vue
+++ b/src/views/exportMap/index.vue
@@ -266,11 +266,6 @@
id: 1,
label: '鍥惧眰',
children: [
- {
- label: '闃�瀹�',
- value: '闃�瀹�',
- resource: 'http://192.168.20.39:9055/gisserver/wmsserver/lfgd',
- },
{ label: '绔欏満', value: '绔欏満' },
{ label: '绠￠亾涓績绾�', value: '绠￠亾涓績绾�' },
],
--
Gitblit v1.9.3