From 5aec569c9d67c86819010171bc527afede505fe5 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 23 二月 2023 18:51:48 +0800
Subject: [PATCH] 管网一张图对接接口数据
---
src/components/Screen/left.vue | 338 +++++++++++++++++++++++++++++---------------------------
1 files changed, 176 insertions(+), 162 deletions(-)
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index 2886037..cf51f3c 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -4,9 +4,19 @@
<img :src="leftImg" @click="ChangeLeft" />
</div>
<div class="leftContainer" v-show="ChartDisplay">
- <div class="current1" id="leftCurrent1"></div>
- <div class="current1" id="leftCurrent2"></div>
- <div class="current1" id="leftCurrent3"></div>
+ <div class="current1" id="leftCurrent1">
+ <div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
+ <count-data-apply ></count-data-apply>
+ </div>
+ <div class="current1" id="leftCurrent2">
+ <div class="aside-title">鏈嶅姟绫诲埆</div>
+
+ <service-type></service-type>
+ </div>
+ <div class="current1" id="leftCurrent3">
+ <div class="aside-title">瀛樺偍淇℃伅</div>
+ <data-storage></data-storage>
+ </div>
</div>
<div class="leftContainer" v-show="ProjectreeDisplay">
<project-tree></project-tree>
@@ -14,10 +24,16 @@
</div>
</template>
<script>
-import ProjectTree from './ProjectTree.vue'
+import ProjectTree from "./ProjectTree.vue"
+import countDataApply from "@/components/chart/CountDataApply.vue"
+import ServiceType from "../chart/ServiceType.vue"
+import DataStorage from "../chart/DataStorage.vue"
export default {
components: {
- ProjectTree
+ ProjectTree,
+ countDataApply,
+ ServiceType,
+ DataStorage,
},
data() {
return {
@@ -28,8 +44,8 @@
}
},
mounted() {
- this.OpenLeftInit();
- this.OpenLeftInitChart();
+ this.OpenLeftInit()
+ // this.OpenLeftInitChart();
},
methods: {
ChangeLeft() {
@@ -39,7 +55,7 @@
} else {
this.leftImg = require("../../assets/img/Screen/rightArrow.png")
}
- this.ChartDisplay = !this.ChartDisplay;
+ this.ChartDisplay = !this.ChartDisplay
}
if (this.leftMessage == "projectree") {
@@ -48,109 +64,107 @@
} else {
this.leftImg = require("../../assets/img/Screen/rightArrow.png")
}
- this.ProjectreeDisplay = !this.ProjectreeDisplay;
+ this.ProjectreeDisplay = !this.ProjectreeDisplay
}
-
- this.$parent.ChangeWidth("left");
+ this.$parent.ChangeWidth("left")
},
//鎵撳紑澶у睆宸︿晶鐣岄潰
OpenLeftInit() {
- this.ChartDisplay = true;
- this.ProjectreeDisplay = false;
- this.leftMessage = "init";
- this.OpenLeftInitChart();
- this.$parent.ChangeWidth("leftView");
-
+ this.ChartDisplay = true
+ this.ProjectreeDisplay = false
+ this.leftMessage = "init"
+ // this.OpenLeftInitChart();
+ this.$parent.ChangeWidth("leftView")
},
//鎵撳紑宸ョ▼鏍�
OpenLeftProjectTree() {
- this.ChartDisplay = false;
- this.ProjectreeDisplay = true;
- this.leftMessage = "projectree";
- this.$parent.ChangeWidth("leftTree");
+ this.ChartDisplay = false
+ this.ProjectreeDisplay = true
+ this.leftMessage = "projectree"
+ this.$parent.ChangeWidth("leftTree")
},
//澶у睆鐣岄潰鍥捐〃
OpenLeftInitChart() {
//宸︿竴鍥�
let option1 = {
title: {
- text: '椤圭洰鍒嗙被',
+ text: "椤圭洰鍒嗙被",
padding: [10, 30],
textStyle: {
- color: '#fff',
- fontSize: 15
+ color: "#fff",
+ fontSize: 15,
},
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow',
+ type: "shadow",
},
},
grid: {
- left: '2%',
- right: '4%',
- bottom: '0%',
+ left: "2%",
+ 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: [36, 45, 25, 15, 49, 33],
itemStyle: {
normal: {
// 鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
barBorderRadius: [0, 90, 90, 0],
- color: (params) => {
+ color: params => {
var colorList = [
- ['#00FCFF', '#008297'],
- ['#0091FF', '#005EA4'],
- ['#901698', '#F157EE'],
- ['#40FBCB', '#009871'],
- ['#FF515A', '#FFDD53'],
- ['#6574E2', '#261164'],
- ];
- var colorItem = colorList[params.dataIndex];
+ ["#00FCFF", "#008297"],
+ ["#0091FF", "#005EA4"],
+ ["#901698", "#F157EE"],
+ ["#40FBCB", "#009871"],
+ ["#FF515A", "#FFDD53"],
+ ["#6574E2", "#261164"],
+ ]
+ var colorItem = colorList[params.dataIndex]
return new this.$echarts.graphic.LinearGradient(
1,
0,
@@ -167,68 +181,68 @@
},
],
false
- );
+ )
},
},
},
},
],
- };
- let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"));
- myChart1.setOption(option1);
+ }
+ let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"))
+ myChart1.setOption(option1)
window.addEventListener("resize", function () {
- myChart1.resize();
- });
+ myChart1.resize()
+ })
//宸︿簩鍥�
let dataAxis = [
- '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁',
- '涓縿涓滅嚎绠￠亾宸ョ▼涓',
- '骞垮窞绔�',
- '鍞愬北LNG',
- '鏂扮枂杩炴湪娌佺珯鍦�',
- '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�',
- ];
- let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1];
- let yMax = 500;
- let dataShadow = [];
+ "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁",
+ "涓縿涓滅嚎绠￠亾宸ョ▼涓",
+ "骞垮窞绔�",
+ "鍞愬北LNG",
+ "鏂扮枂杩炴湪娌佺珯鍦�",
+ "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�",
+ ]
+ let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1]
+ let yMax = 500
+ let dataShadow = []
for (let i = 0; i < data.length; i++) {
- dataShadow.push(yMax);
+ dataShadow.push(yMax)
}
let option2 = {
title: {
- text: '椤圭洰瀹屾垚搴�',
+ text: "椤圭洰瀹屾垚搴�",
padding: [10, 30],
textStyle: {
- color: '#fff',
- fontSize: 15
+ color: "#fff",
+ fontSize: 15,
},
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow',
+ type: "shadow",
},
},
grid: {
- left: '3%',
- right: '0%',
- bottom: '0%',
+ left: "3%",
+ 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 paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
- var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
- var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
+ var newParamsName = "" // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var paramsNameNumber = params.length // 瀹為檯鏍囩鐨勪釜鏁�
+ var provideNumber = 4 // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
+ var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
/**
* 鍒ゆ柇鏍囩鐨勪釜鏁版槸鍚﹀ぇ浜庤瀹氱殑涓暟锛� 濡傛灉澶т簬锛屽垯杩涜鎹㈣澶勭悊 濡傛灉涓嶅ぇ浜庯紝鍗崇瓑浜庢垨灏忎簬锛屽氨杩斿洖鍘熸爣绛�
*/
@@ -236,25 +250,25 @@
if (paramsNameNumber > provideNumber) {
/** 寰幆姣忎竴琛�,p琛ㄧず琛� */
for (var p = 0; p < rowNumber; p++) {
- var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
- var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
- var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
+ var tempStr = "" // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var start = p * provideNumber // 寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + provideNumber // 缁撴潫鎴彇鐨勪綅缃�
// 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
if (p == rowNumber - 1) {
// 鏈�鍚庝竴娆′笉鎹㈣
- tempStr = params.substring(start, paramsNameNumber);
+ tempStr = params.substring(start, paramsNameNumber)
} else {
// 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
- tempStr = params.substring(start, end) + '\n';
+ tempStr = params.substring(start, end) + "\n"
}
- newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
+ newParamsName += tempStr // 鏈�缁堟嫾鎴愮殑瀛楃涓�
}
} else {
// 灏嗘棫鏍囩鐨勫�艰祴缁欐柊鏍囩
- newParamsName = params;
+ newParamsName = params
}
//灏嗘渶缁堢殑瀛楃涓茶繑鍥�
- return newParamsName;
+ return newParamsName
},
},
},
@@ -264,7 +278,7 @@
},
splitLine: {
- show: false
+ show: false,
},
axisTick: {
show: false,
@@ -273,70 +287,69 @@
axisLabel: {
show: true,
textStyle: {
- color: '#fff',
+ color: "#fff",
},
},
},
dataZoom: [
{
- type: 'inside',
+ type: "inside",
},
],
series: [
{
- type: 'bar',
- barWidth: '40%',
+ type: "bar",
+ barWidth: "40%",
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" },
]),
},
},
data: data,
},
],
- };
- const zoomSize = 6;
- let myChart2 = this.$echarts.init(document.getElementById('leftCurrent2'));
- myChart2.on('click', function (params) {
+ }
+ const zoomSize = 6
+ let myChart2 = this.$echarts.init(document.getElementById("leftCurrent2"))
+ myChart2.on("click", function (params) {
myChart2.dispatchAction({
- type: 'dataZoom',
+ type: "dataZoom",
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue:
dataAxis[
- Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
+ Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
],
- });
- });
+ })
+ })
- myChart2.setOption(option2);
- window.addEventListener('resize', function () {
- myChart2.resize();
- });
-
+ myChart2.setOption(option2)
+ window.addEventListener("resize", function () {
+ myChart2.resize()
+ })
//宸︿笁鍥�
- var legendData = ['浜哄憳', '鍙樻洿鍚庝汉鍛�']; //鍥句緥
+ var legendData = ["浜哄憳", "鍙樻洿鍚庝汉鍛�"] //鍥句緥
var indicator = [
- { name: '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�', max: 80 },
- { name: '鍞愬北LNG', max: 80 },
- { name: '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁', max: 160 },
- { name: '涓縿涓滅嚎绠￠亾宸ョ▼涓', max: 100 },
- { name: '鏂扮枂杩炴湪娌佺珯鍦�', max: 40 },
- { name: '骞垮窞绔�', max: 40 },
- ];
+ { name: "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�", max: 80 },
+ { name: "鍞愬北LNG", max: 80 },
+ { name: "涓縿涓滅嚎绠￠亾宸ョ▼鍗楁", max: 160 },
+ { name: "涓縿涓滅嚎绠￠亾宸ョ▼涓", max: 100 },
+ { name: "鏂扮枂杩炴湪娌佺珯鍦�", max: 40 },
+ { name: "骞垮窞绔�", max: 40 },
+ ]
var dataArr = [
{
value: [35, 30, 80, 70, 15, 15],
@@ -344,11 +357,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: '#4A99FF',
+ color: "#4A99FF",
// shadowColor: '#4A99FF',
// shadowBlur: 10,
},
- shadowColor: '#4A99FF',
+ shadowColor: "#4A99FF",
shadowBlur: 10,
},
},
@@ -356,7 +369,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: 'linear',
+ type: "linear",
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -364,15 +377,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,
@@ -384,7 +397,7 @@
label: {
show: true,
formatter: function (params) {
- return params.value;
+ return params.value
},
},
},
@@ -394,11 +407,11 @@
itemStyle: {
normal: {
lineStyle: {
- color: '#4BFFFC',
+ color: "#4BFFFC",
// shadowColor: '#4BFFFC',
// shadowBlur: 10,
},
- shadowColor: '#4BFFFC',
+ shadowColor: "#4BFFFC",
shadowBlur: 10,
},
},
@@ -406,7 +419,7 @@
normal: {
// 鍗曢」鍖哄煙濉厖鏍峰紡
color: {
- type: 'linear',
+ type: "linear",
x: 0, //鍙�
y: 0, //涓�
x2: 1, //宸�
@@ -414,15 +427,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,
@@ -434,19 +447,19 @@
label: {
show: true,
formatter: function (params) {
- return params.value;
+ return params.value
},
},
},
- ];
- var colorArr = ['#4A99FF', '#4BFFFC']; //棰滆壊
+ ]
+ var colorArr = ["#4A99FF", "#4BFFFC"] //棰滆壊
let option3 = {
title: {
- text: '浜哄憳鍙樺姩',
+ text: "浜哄憳鍙樺姩",
padding: [10, 30],
textStyle: {
- color: '#fff',
- fontSize: 15
+ color: "#fff",
+ fontSize: 15,
},
},
color: colorArr,
@@ -454,7 +467,7 @@
// shape: 'circle',
name: {
textStyle: {
- color: '#fff',
+ color: "#fff",
fontSize: 12,
},
},
@@ -469,49 +482,42 @@
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,
},
],
- };
+ }
- let myChart3 = this.$echarts.init(document.getElementById('leftCurrent3'));
- myChart3.setOption(option3);
- window.addEventListener('resize', function () {
- myChart3.resize();
- });
-
+ let myChart3 = this.$echarts.init(document.getElementById("leftCurrent3"))
+ myChart3.setOption(option3)
+ window.addEventListener("resize", function () {
+ myChart3.resize()
+ })
},
-
-
-
-
-
-
},
}
</script>
-<style lang="scss">
+<style lang="less">
.current {
height: 100%;
width: 100%;
@@ -536,7 +542,7 @@
.leftContainer {
height: 100%;
- width: calc(100% - 36px);
+ width: calc(100% - 7px);
display: flex;
flex-direction: column;
@@ -549,6 +555,14 @@
background: url(../../assets/img/Screen/chartbg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
+ overflow: hidden;
+ }
+ .content {
+ width: 100%;
+ background: url(../../assets/img/Screen/contentBg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+
}
}
}
--
Gitblit v1.9.3