diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/5.png b/src/assets/images/zonglan/5.png new file mode 100644 index 0000000..7e3df7b --- /dev/null +++ b/src/assets/images/zonglan/5.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/5.png b/src/assets/images/zonglan/5.png new file mode 100644 index 0000000..7e3df7b --- /dev/null +++ b/src/assets/images/zonglan/5.png Binary files differ diff --git a/src/assets/images/zonglan/6.png b/src/assets/images/zonglan/6.png new file mode 100644 index 0000000..0f784b7 --- /dev/null +++ b/src/assets/images/zonglan/6.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/5.png b/src/assets/images/zonglan/5.png new file mode 100644 index 0000000..7e3df7b --- /dev/null +++ b/src/assets/images/zonglan/5.png Binary files differ diff --git a/src/assets/images/zonglan/6.png b/src/assets/images/zonglan/6.png new file mode 100644 index 0000000..0f784b7 --- /dev/null +++ b/src/assets/images/zonglan/6.png Binary files differ diff --git a/src/assets/images/zonglan/7.png b/src/assets/images/zonglan/7.png new file mode 100644 index 0000000..bf6590d --- /dev/null +++ b/src/assets/images/zonglan/7.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/5.png b/src/assets/images/zonglan/5.png new file mode 100644 index 0000000..7e3df7b --- /dev/null +++ b/src/assets/images/zonglan/5.png Binary files differ diff --git a/src/assets/images/zonglan/6.png b/src/assets/images/zonglan/6.png new file mode 100644 index 0000000..0f784b7 --- /dev/null +++ b/src/assets/images/zonglan/6.png Binary files differ diff --git a/src/assets/images/zonglan/7.png b/src/assets/images/zonglan/7.png new file mode 100644 index 0000000..bf6590d --- /dev/null +++ b/src/assets/images/zonglan/7.png Binary files differ diff --git a/src/assets/images/zonglan/8.png b/src/assets/images/zonglan/8.png new file mode 100644 index 0000000..1d76cff --- /dev/null +++ b/src/assets/images/zonglan/8.png Binary files differ diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/5.png b/src/assets/images/zonglan/5.png new file mode 100644 index 0000000..7e3df7b --- /dev/null +++ b/src/assets/images/zonglan/5.png Binary files differ diff --git a/src/assets/images/zonglan/6.png b/src/assets/images/zonglan/6.png new file mode 100644 index 0000000..0f784b7 --- /dev/null +++ b/src/assets/images/zonglan/6.png Binary files differ diff --git a/src/assets/images/zonglan/7.png b/src/assets/images/zonglan/7.png new file mode 100644 index 0000000..bf6590d --- /dev/null +++ b/src/assets/images/zonglan/7.png Binary files differ diff --git a/src/assets/images/zonglan/8.png b/src/assets/images/zonglan/8.png new file mode 100644 index 0000000..1d76cff --- /dev/null +++ b/src/assets/images/zonglan/8.png Binary files differ diff --git a/src/views/sponeScreen/Echarts/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue index 26e7c0b..25f6abc 100644 --- a/src/views/sponeScreen/Echarts/ConstructionDrawings.vue +++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue @@ -37,6 +37,77 @@ value: 0, }, ]; +let colorPie = [ + 'rgba(235, 94, 117, 0.8)', + 'rgba(56, 117, 255, 0.8)', + 'rgba(22, 197, 229, 0.8)', + 'rgba(147, 88, 255, 0.8)', + 'rgba(57, 221, 134, 0.8)', + 'rgba(243, 255, 115, 0.8)', + 'rgba(255, 182, 67, 0.8)', + 'rgba(255, 114, 220, 0.8)', + 'rgba(255, 127, 49, 0.8)', + ]; +let colorWrap = [ + 'rgba(235, 94, 117, 0.8)', + 'rgba(56, 117, 255, 0.8)', + 'rgba(22, 197, 229, 0.8)', + 'rgba(147, 88, 255, 0.8)', + 'rgba(57, 221, 134, 0.8)', + 'rgba(243, 255, 115, 0.8)', + 'rgba(255, 182, 67, 0.8)', + 'rgba(255, 114, 220, 0.8)', + 'rgba(255, 127, 49, 0.8)', +]; +let baseDataPie = [], + baseDataWrap = []; +let total = 0; +data.forEach(function (val, idx, arr) { + total += val.value; +}) +for (let i = 0; i < data.length; i++) { + baseDataWrap.push({ + value: data[i].value, + name: data[i].name, + itemStyle: { + normal: { + color: colorWrap[i], + borderWidth: 5, + borderColor: colorWrap[i], + shadowBlur: 50, + shadowColor: 'rgba(7, 132, 250, 0.8)', + } + } + }, { + value: 5, + name: '', + itemStyle: { + normal: { + color: 'transparent', + borderWidth: 5, + borderColor: 'transparent', + + } + }, + tooltip: { + show: false + }, + }); + + if (i < 3) { + baseDataPie.push({ + value: data[i].value, + name: data[i].name, + itemStyle: { + normal: { + borderWidth: 20, + borderColor: colorPie[i], + } + } + }); + } +} + const curActive = reactive({ name: data[0].name, percent: data[0].value, @@ -45,54 +116,138 @@ myChart.value = proxy.echarts.init(proxy.$refs.echarts); // 绘制图表 myChart.value.setOption({ - color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'], - tooltip: { - trigger: 'item', - formatter: '{b}: {c}%', - }, - legend: { - orient: 'vertical', - top: '16%', - right: '0%', - height: 150, - itemGap: 15, - textStyle: { - color: '#D1DEEE', - padding: [21, 0, 0, 0], - }, - }, + backgroundColor: "#031223", grid: { - left: '12%', - right: '2%', - top: '2%', - bottom: '2%', + left: '1%', // 与容器左侧的距离 + right: '1%', // 与容器右侧的距离 + top: '1%', // 与容器顶部的距离 + bottom: '1%', // 与容器底部的距离 + }, - series: [ - { - type: 'pie', - radius: ['50%', '80%'], - center: ['30%', '50%'], - labelLine: { - show: false, - }, - label: { - show: false, - }, - itemStyle: { - borderWidth: 3, - borderColor: '#185c78', - borderRadius: 8, - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - }, - data, + tooltip: { + show: true, + trigger: 'item', + formatter: "{a}：{b}
数量：{c}" + }, + legend: [{ + data:data, + icon: 'vertical', + right: '5px', + top: 'center', + orient: 'vertical', + itemGap: 20, + itemWidth: 15, + itemHeight: 8, + formatter: function (name) { + let target, percent; + for (let i = 0; i < data.length; i++) { + if (data[i].name === name) { + target = data[i].value; + percent = ((target / total) * 100).toFixed(1); + } + } + let arr = [ ' {blue|' + name + '}' ,' {yellow|' + target + '}',]; + return arr.join("") + }, + textStyle: { + lineHeight: 20, + color: '#f0f4f6', + align: 'right', + rich: { + yellow: { + color: '#f0f4f6', + fontWeight: "bold" + + }, + blue: { + color: '#f0f4f6', + align: 'right', + + }, + } + + }, + }, + /* { + data: ['检修', '抢修', '其他'], + icon: 'vertical', + right: '5px', + top: 'center', + orient: 'vertical', + itemGap: 20, + itemWidth: 15, + itemHeight: 8, + formatter: function(name) { + + let target, percent; + for (let i = 0; i < data.length; i++) { + if (data[i].name === name) { + target = data[i].value; + percent = ((target / total) * 100).toFixed(1); + } + } + let arr = [percent + '% ' + ' {yellow|' + target + '}', ' {blue|' + name + '}']; + return arr.join("\n") + + }, + textStyle: { + + lineHeight: 20, + color: '#f0f4f6', + align: 'right', + rich: { + yellow: { + color: '#00b5f3', + fontWeight: "bold" + + + }, + blue: { + color: '#4be1ff', + align: 'right', + + }, + } + + }, + }*/ ], + + series: [{ + name: '报警', + type: 'pie', + clockWise: false, //顺时加载 + hoverAnimation: false, //鼠标移入变大 + center: ['30%', '50%'], + radius: ['80%', '81%'], + label: { + normal: { + show: false + } + }, + data: baseDataWrap + }, + { + name: '', + type: 'pie', + color: colorPie, + selectedMode: 'single', + radius: ['55%', '58%'], + center: ['30%', '50%'], + hoverAnimation: false, + label: { + normal: { + show: false, + } + }, + tooltip: { + show: false + }, + data: baseDataPie + }, + + ] }); myChart.value.on('mouseover', function (params) { @@ -117,9 +272,11 @@ .soil_constituent { height: 100%; position: relative; + .echarts { height: 100%; } + .curInfo { position: absolute; left: 94px; @@ -127,11 +284,13 @@ transform: translateY(-50%); text-align: center; width: 100px; + .percent { // font-size: 26px; font-size: 18px; color: #fff; } + .name { // font-size: 16px; font-size: 26px; diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/5.png b/src/assets/images/zonglan/5.png new file mode 100644 index 0000000..7e3df7b --- /dev/null +++ b/src/assets/images/zonglan/5.png Binary files differ diff --git a/src/assets/images/zonglan/6.png b/src/assets/images/zonglan/6.png new file mode 100644 index 0000000..0f784b7 --- /dev/null +++ b/src/assets/images/zonglan/6.png Binary files differ diff --git a/src/assets/images/zonglan/7.png b/src/assets/images/zonglan/7.png new file mode 100644 index 0000000..bf6590d --- /dev/null +++ b/src/assets/images/zonglan/7.png Binary files differ diff --git a/src/assets/images/zonglan/8.png b/src/assets/images/zonglan/8.png new file mode 100644 index 0000000..1d76cff --- /dev/null +++ b/src/assets/images/zonglan/8.png Binary files differ diff --git a/src/views/sponeScreen/Echarts/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue index 26e7c0b..25f6abc 100644 --- a/src/views/sponeScreen/Echarts/ConstructionDrawings.vue +++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue @@ -37,6 +37,77 @@ value: 0, }, ]; +let colorPie = [ + 'rgba(235, 94, 117, 0.8)', + 'rgba(56, 117, 255, 0.8)', + 'rgba(22, 197, 229, 0.8)', + 'rgba(147, 88, 255, 0.8)', + 'rgba(57, 221, 134, 0.8)', + 'rgba(243, 255, 115, 0.8)', + 'rgba(255, 182, 67, 0.8)', + 'rgba(255, 114, 220, 0.8)', + 'rgba(255, 127, 49, 0.8)', + ]; +let colorWrap = [ + 'rgba(235, 94, 117, 0.8)', + 'rgba(56, 117, 255, 0.8)', + 'rgba(22, 197, 229, 0.8)', + 'rgba(147, 88, 255, 0.8)', + 'rgba(57, 221, 134, 0.8)', + 'rgba(243, 255, 115, 0.8)', + 'rgba(255, 182, 67, 0.8)', + 'rgba(255, 114, 220, 0.8)', + 'rgba(255, 127, 49, 0.8)', +]; +let baseDataPie = [], + baseDataWrap = []; +let total = 0; +data.forEach(function (val, idx, arr) { + total += val.value; +}) +for (let i = 0; i < data.length; i++) { + baseDataWrap.push({ + value: data[i].value, + name: data[i].name, + itemStyle: { + normal: { + color: colorWrap[i], + borderWidth: 5, + borderColor: colorWrap[i], + shadowBlur: 50, + shadowColor: 'rgba(7, 132, 250, 0.8)', + } + } + }, { + value: 5, + name: '', + itemStyle: { + normal: { + color: 'transparent', + borderWidth: 5, + borderColor: 'transparent', + + } + }, + tooltip: { + show: false + }, + }); + + if (i < 3) { + baseDataPie.push({ + value: data[i].value, + name: data[i].name, + itemStyle: { + normal: { + borderWidth: 20, + borderColor: colorPie[i], + } + } + }); + } +} + const curActive = reactive({ name: data[0].name, percent: data[0].value, @@ -45,54 +116,138 @@ myChart.value = proxy.echarts.init(proxy.$refs.echarts); // 绘制图表 myChart.value.setOption({ - color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'], - tooltip: { - trigger: 'item', - formatter: '{b}: {c}%', - }, - legend: { - orient: 'vertical', - top: '16%', - right: '0%', - height: 150, - itemGap: 15, - textStyle: { - color: '#D1DEEE', - padding: [21, 0, 0, 0], - }, - }, + backgroundColor: "#031223", grid: { - left: '12%', - right: '2%', - top: '2%', - bottom: '2%', + left: '1%', // 与容器左侧的距离 + right: '1%', // 与容器右侧的距离 + top: '1%', // 与容器顶部的距离 + bottom: '1%', // 与容器底部的距离 + }, - series: [ - { - type: 'pie', - radius: ['50%', '80%'], - center: ['30%', '50%'], - labelLine: { - show: false, - }, - label: { - show: false, - }, - itemStyle: { - borderWidth: 3, - borderColor: '#185c78', - borderRadius: 8, - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - }, - data, + tooltip: { + show: true, + trigger: 'item', + formatter: "{a}：{b}
数量：{c}" + }, + legend: [{ + data:data, + icon: 'vertical', + right: '5px', + top: 'center', + orient: 'vertical', + itemGap: 20, + itemWidth: 15, + itemHeight: 8, + formatter: function (name) { + let target, percent; + for (let i = 0; i < data.length; i++) { + if (data[i].name === name) { + target = data[i].value; + percent = ((target / total) * 100).toFixed(1); + } + } + let arr = [ ' {blue|' + name + '}' ,' {yellow|' + target + '}',]; + return arr.join("") + }, + textStyle: { + lineHeight: 20, + color: '#f0f4f6', + align: 'right', + rich: { + yellow: { + color: '#f0f4f6', + fontWeight: "bold" + + }, + blue: { + color: '#f0f4f6', + align: 'right', + + }, + } + + }, + }, + /* { + data: ['检修', '抢修', '其他'], + icon: 'vertical', + right: '5px', + top: 'center', + orient: 'vertical', + itemGap: 20, + itemWidth: 15, + itemHeight: 8, + formatter: function(name) { + + let target, percent; + for (let i = 0; i < data.length; i++) { + if (data[i].name === name) { + target = data[i].value; + percent = ((target / total) * 100).toFixed(1); + } + } + let arr = [percent + '% ' + ' {yellow|' + target + '}', ' {blue|' + name + '}']; + return arr.join("\n") + + }, + textStyle: { + + lineHeight: 20, + color: '#f0f4f6', + align: 'right', + rich: { + yellow: { + color: '#00b5f3', + fontWeight: "bold" + + + }, + blue: { + color: '#4be1ff', + align: 'right', + + }, + } + + }, + }*/ ], + + series: [{ + name: '报警', + type: 'pie', + clockWise: false, //顺时加载 + hoverAnimation: false, //鼠标移入变大 + center: ['30%', '50%'], + radius: ['80%', '81%'], + label: { + normal: { + show: false + } + }, + data: baseDataWrap + }, + { + name: '', + type: 'pie', + color: colorPie, + selectedMode: 'single', + radius: ['55%', '58%'], + center: ['30%', '50%'], + hoverAnimation: false, + label: { + normal: { + show: false, + } + }, + tooltip: { + show: false + }, + data: baseDataPie + }, + + ] }); myChart.value.on('mouseover', function (params) { @@ -117,9 +272,11 @@ .soil_constituent { height: 100%; position: relative; + .echarts { height: 100%; } + .curInfo { position: absolute; left: 94px; @@ -127,11 +284,13 @@ transform: translateY(-50%); text-align: center; width: 100px; + .percent { // font-size: 26px; font-size: 18px; color: #fff; } + .name { // font-size: 16px; font-size: 26px; diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue index dd69681..8b446c5 100644 --- a/src/views/sponeScreen/HaiMianScreen/index.vue +++ b/src/views/sponeScreen/HaiMianScreen/index.vue @@ -159,7 +159,7 @@ .title { font-family: YouSheBiaoTiHei; font-weight: 400; - font-size: 40px; + font-size: 33px; letter-spacing: 10px; color: #ffffff; text-shadow: 3px 3px 5px rgba(0, 40, 86, 0.47); diff --git a/src/assets/images/zonglan/1.png b/src/assets/images/zonglan/1.png new file mode 100644 index 0000000..320933b --- /dev/null +++ b/src/assets/images/zonglan/1.png Binary files differ diff --git a/src/assets/images/zonglan/2.png b/src/assets/images/zonglan/2.png new file mode 100644 index 0000000..be2601e --- /dev/null +++ b/src/assets/images/zonglan/2.png Binary files differ diff --git a/src/assets/images/zonglan/3.png b/src/assets/images/zonglan/3.png new file mode 100644 index 0000000..817a35c --- /dev/null +++ b/src/assets/images/zonglan/3.png Binary files differ diff --git a/src/assets/images/zonglan/4.png b/src/assets/images/zonglan/4.png new file mode 100644 index 0000000..702c0f9 --- /dev/null +++ b/src/assets/images/zonglan/4.png Binary files differ diff --git a/src/assets/images/zonglan/5.png b/src/assets/images/zonglan/5.png new file mode 100644 index 0000000..7e3df7b --- /dev/null +++ b/src/assets/images/zonglan/5.png Binary files differ diff --git a/src/assets/images/zonglan/6.png b/src/assets/images/zonglan/6.png new file mode 100644 index 0000000..0f784b7 --- /dev/null +++ b/src/assets/images/zonglan/6.png Binary files differ diff --git a/src/assets/images/zonglan/7.png b/src/assets/images/zonglan/7.png new file mode 100644 index 0000000..bf6590d --- /dev/null +++ b/src/assets/images/zonglan/7.png Binary files differ diff --git a/src/assets/images/zonglan/8.png b/src/assets/images/zonglan/8.png new file mode 100644 index 0000000..1d76cff --- /dev/null +++ b/src/assets/images/zonglan/8.png Binary files differ diff --git a/src/views/sponeScreen/Echarts/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue index 26e7c0b..25f6abc 100644 --- a/src/views/sponeScreen/Echarts/ConstructionDrawings.vue +++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue @@ -37,6 +37,77 @@ value: 0, }, ]; +let colorPie = [ + 'rgba(235, 94, 117, 0.8)', + 'rgba(56, 117, 255, 0.8)', + 'rgba(22, 197, 229, 0.8)', + 'rgba(147, 88, 255, 0.8)', + 'rgba(57, 221, 134, 0.8)', + 'rgba(243, 255, 115, 0.8)', + 'rgba(255, 182, 67, 0.8)', + 'rgba(255, 114, 220, 0.8)', + 'rgba(255, 127, 49, 0.8)', + ]; +let colorWrap = [ + 'rgba(235, 94, 117, 0.8)', + 'rgba(56, 117, 255, 0.8)', + 'rgba(22, 197, 229, 0.8)', + 'rgba(147, 88, 255, 0.8)', + 'rgba(57, 221, 134, 0.8)', + 'rgba(243, 255, 115, 0.8)', + 'rgba(255, 182, 67, 0.8)', + 'rgba(255, 114, 220, 0.8)', + 'rgba(255, 127, 49, 0.8)', +]; +let baseDataPie = [], + baseDataWrap = []; +let total = 0; +data.forEach(function (val, idx, arr) { + total += val.value; +}) +for (let i = 0; i < data.length; i++) { + baseDataWrap.push({ + value: data[i].value, + name: data[i].name, + itemStyle: { + normal: { + color: colorWrap[i], + borderWidth: 5, + borderColor: colorWrap[i], + shadowBlur: 50, + shadowColor: 'rgba(7, 132, 250, 0.8)', + } + } + }, { + value: 5, + name: '', + itemStyle: { + normal: { + color: 'transparent', + borderWidth: 5, + borderColor: 'transparent', + + } + }, + tooltip: { + show: false + }, + }); + + if (i < 3) { + baseDataPie.push({ + value: data[i].value, + name: data[i].name, + itemStyle: { + normal: { + borderWidth: 20, + borderColor: colorPie[i], + } + } + }); + } +} + const curActive = reactive({ name: data[0].name, percent: data[0].value, @@ -45,54 +116,138 @@ myChart.value = proxy.echarts.init(proxy.$refs.echarts); // 绘制图表 myChart.value.setOption({ - color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'], - tooltip: { - trigger: 'item', - formatter: '{b}: {c}%', - }, - legend: { - orient: 'vertical', - top: '16%', - right: '0%', - height: 150, - itemGap: 15, - textStyle: { - color: '#D1DEEE', - padding: [21, 0, 0, 0], - }, - }, + backgroundColor: "#031223", grid: { - left: '12%', - right: '2%', - top: '2%', - bottom: '2%', + left: '1%', // 与容器左侧的距离 + right: '1%', // 与容器右侧的距离 + top: '1%', // 与容器顶部的距离 + bottom: '1%', // 与容器底部的距离 + }, - series: [ - { - type: 'pie', - radius: ['50%', '80%'], - center: ['30%', '50%'], - labelLine: { - show: false, - }, - label: { - show: false, - }, - itemStyle: { - borderWidth: 3, - borderColor: '#185c78', - borderRadius: 8, - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - }, - data, + tooltip: { + show: true, + trigger: 'item', + formatter: "{a}：{b}
数量：{c}" + }, + legend: [{ + data:data, + icon: 'vertical', + right: '5px', + top: 'center', + orient: 'vertical', + itemGap: 20, + itemWidth: 15, + itemHeight: 8, + formatter: function (name) { + let target, percent; + for (let i = 0; i < data.length; i++) { + if (data[i].name === name) { + target = data[i].value; + percent = ((target / total) * 100).toFixed(1); + } + } + let arr = [ ' {blue|' + name + '}' ,' {yellow|' + target + '}',]; + return arr.join("") + }, + textStyle: { + lineHeight: 20, + color: '#f0f4f6', + align: 'right', + rich: { + yellow: { + color: '#f0f4f6', + fontWeight: "bold" + + }, + blue: { + color: '#f0f4f6', + align: 'right', + + }, + } + + }, + }, + /* { + data: ['检修', '抢修', '其他'], + icon: 'vertical', + right: '5px', + top: 'center', + orient: 'vertical', + itemGap: 20, + itemWidth: 15, + itemHeight: 8, + formatter: function(name) { + + let target, percent; + for (let i = 0; i < data.length; i++) { + if (data[i].name === name) { + target = data[i].value; + percent = ((target / total) * 100).toFixed(1); + } + } + let arr = [percent + '% ' + ' {yellow|' + target + '}', ' {blue|' + name + '}']; + return arr.join("\n") + + }, + textStyle: { + + lineHeight: 20, + color: '#f0f4f6', + align: 'right', + rich: { + yellow: { + color: '#00b5f3', + fontWeight: "bold" + + + }, + blue: { + color: '#4be1ff', + align: 'right', + + }, + } + + }, + }*/ ], + + series: [{ + name: '报警', + type: 'pie', + clockWise: false, //顺时加载 + hoverAnimation: false, //鼠标移入变大 + center: ['30%', '50%'], + radius: ['80%', '81%'], + label: { + normal: { + show: false + } + }, + data: baseDataWrap + }, + { + name: '', + type: 'pie', + color: colorPie, + selectedMode: 'single', + radius: ['55%', '58%'], + center: ['30%', '50%'], + hoverAnimation: false, + label: { + normal: { + show: false, + } + }, + tooltip: { + show: false + }, + data: baseDataPie + }, + + ] }); myChart.value.on('mouseover', function (params) { @@ -117,9 +272,11 @@ .soil_constituent { height: 100%; position: relative; + .echarts { height: 100%; } + .curInfo { position: absolute; left: 94px; @@ -127,11 +284,13 @@ transform: translateY(-50%); text-align: center; width: 100px; + .percent { // font-size: 26px; font-size: 18px; color: #fff; } + .name { // font-size: 16px; font-size: 26px; diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue index dd69681..8b446c5 100644 --- a/src/views/sponeScreen/HaiMianScreen/index.vue +++ b/src/views/sponeScreen/HaiMianScreen/index.vue @@ -159,7 +159,7 @@ .title { font-family: YouSheBiaoTiHei; font-weight: 400; - font-size: 40px; + font-size: 33px; letter-spacing: 10px; color: #ffffff; text-shadow: 3px 3px 5px rgba(0, 40, 86, 0.47); diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue index 07cb745..e06c745 100644 --- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue +++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue @@ -10,8 +10,8 @@
- -
{{ item.projectName }}
+ +
{{ item.projectName }}
@@ -21,15 +21,35 @@