From 998bcc72127c975ec0ffbfd4fd6cdb055f49fbe4 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 16 二月 2023 15:22:58 +0800
Subject: [PATCH] Merge branch 'master' of http://103.85.165.99:8989/r/LFWEB_NEW
---
src/components/Screen/left.vue | 500 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 485 insertions(+), 15 deletions(-)
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index fa664e9..11b7732 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -3,16 +3,13 @@
<div class="leftarrow">
<img :src="leftImg" @click="ChangeLeft" />
</div>
- <div class="leftContainer" v-if="!ChartDisplay">
- <div class="current1"></div>
- <div class="current1"></div>
- <div class="current1"></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>
- <div class="leftContainer" v-if="ChartDisplay">
+ <div class="leftContainer" v-show="ProjectreeDisplay">
<project-tree></project-tree>
- <!-- <div class="current1"></div>
- <div class="current1"></div>
- <div class="current1"></div> -->
</div>
</div>
</template>
@@ -24,21 +21,490 @@
},
data() {
return {
+ leftMessage: "init",
ChartDisplay: true,
+ ProjectreeDisplay: false,
leftImg: require("../../assets/img/Screen/rightArrow.png"),
}
},
- mounted() {},
+ mounted() {
+ this.OpenLeftInit();
+ this.OpenLeftInitChart();
+ },
methods: {
ChangeLeft() {
- if (this.ChartDisplay) {
- this.leftImg = require("../../assets/img/Screen/leftArrow.png")
- } else {
- this.leftImg = require("../../assets/img/Screen/rightArrow.png")
+ if (this.leftMessage == "init") {
+ if (this.ChartDisplay) {
+ this.leftImg = require("../../assets/img/Screen/leftArrow.png")
+ } else {
+ this.leftImg = require("../../assets/img/Screen/rightArrow.png")
+ }
+ this.ChartDisplay = !this.ChartDisplay;
}
- this.ChartDisplay = !this.ChartDisplay
- this.$parent.ChangeWidth("left")
+
+ if (this.leftMessage == "projectree") {
+ if (this.ProjectreeDisplay) {
+ this.leftImg = require("../../assets/img/Screen/leftArrow.png")
+ } else {
+ this.leftImg = require("../../assets/img/Screen/rightArrow.png")
+ }
+ this.ProjectreeDisplay = !this.ProjectreeDisplay;
+ }
+
+
+ this.$parent.ChangeWidth("left");
},
+ //鎵撳紑澶у睆宸︿晶鐣岄潰
+ OpenLeftInit() {
+ this.ChartDisplay = true;
+ this.ProjectreeDisplay = false;
+ this.leftMessage = "init";
+ this.OpenLeftInitChart();
+ },
+ //鎵撳紑宸ョ▼鏍�
+ OpenLeftProjectTree() {
+ this.ChartDisplay = false;
+ this.ProjectreeDisplay = true;
+ this.leftMessage = "projectree";
+ },
+ //澶у睆鐣岄潰鍥捐〃
+ OpenLeftInitChart() {
+ //宸︿竴鍥�
+ let option1 = {
+ title: {
+ text: '椤圭洰鍒嗙被',
+ padding: [10, 30],
+ textStyle: {
+ color: '#fff',
+ fontSize: 15
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '0%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ axisLine: {
+ lineStyle: {
+ color: '#ccc',
+ },
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ },
+ yAxis: {
+ type: 'category',
+ data: [
+ '绠￠亾绫�',
+ '绠＄綉绫�',
+ '鍩哄缓绫�',
+ '鑸┖娴嬮噺',
+ '椋庨櫓鎺掓煡',
+ '宸ョ▼鍩硅',
+ ],
+ axisLine: {
+ lineStyle: {
+ color: '#ccc',
+ },
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ },
+ series: [
+ {
+ name: '椤圭洰鍒嗙被',
+ type: 'bar',
+ barWidth: 20,
+ data: [36, 45, 25, 15, 49, 33],
+ itemStyle: {
+ normal: {
+ // 鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius: [0, 90, 90, 0],
+ color: (params) => {
+ var colorList = [
+ ['#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,
+ 0,
+ 0,
+ [
+ {
+ offset: 0,
+ color: colorItem[0],
+ },
+ {
+ offset: 1,
+ color: colorItem[1],
+ },
+ ],
+ false
+ );
+ },
+ },
+ },
+ },
+ ],
+ };
+ let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"));
+ myChart1.setOption(option1);
+ window.addEventListener("resize", function () {
+ myChart1.resize();
+ });
+
+ //宸︿簩鍥�
+ let dataAxis = [
+ '涓縿涓滅嚎绠￠亾宸ョ▼鍗楁',
+ '涓縿涓滅嚎绠￠亾宸ョ▼涓',
+ '骞垮窞绔�',
+ '鍞愬北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);
+ }
+ let option2 = {
+ title: {
+ text: '椤圭洰瀹屾垚搴�',
+ padding: [10, 30],
+ textStyle: {
+ color: '#fff',
+ fontSize: 15
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '0%',
+ bottom: '0%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ data: dataAxis,
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ formatter: function (params) {
+ var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+ var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
+ var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
+ var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
+ /**
+ * 鍒ゆ柇鏍囩鐨勪釜鏁版槸鍚﹀ぇ浜庤瀹氱殑涓暟锛� 濡傛灉澶т簬锛屽垯杩涜鎹㈣澶勭悊 濡傛灉涓嶅ぇ浜庯紝鍗崇瓑浜庢垨灏忎簬锛屽氨杩斿洖鍘熸爣绛�
+ */
+ // 鏉′欢绛夊悓浜巖owNumber>1
+ if (paramsNameNumber > provideNumber) {
+ /** 寰幆姣忎竴琛�,p琛ㄧず琛� */
+ for (var p = 0; p < rowNumber; p++) {
+ var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+ var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
+ // 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
+ if (p == rowNumber - 1) {
+ // 鏈�鍚庝竴娆′笉鎹㈣
+ tempStr = params.substring(start, paramsNameNumber);
+ } else {
+ // 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
+ tempStr = params.substring(start, end) + '\n';
+ }
+ newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
+ }
+ } else {
+ // 灏嗘棫鏍囩鐨勫�艰祴缁欐柊鏍囩
+ newParamsName = params;
+ }
+ //灏嗘渶缁堢殑瀛楃涓茶繑鍥�
+ return newParamsName;
+ },
+ },
+ },
+ yAxis: {
+ axisLine: {
+ show: true,
+ },
+
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false,
+ },
+
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ },
+ ],
+ series: [
+ {
+ 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' },
+ ]),
+ },
+ 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' },
+ ]),
+ },
+ },
+ data: data,
+ },
+ ],
+ };
+ const zoomSize = 6;
+ let myChart2 = this.$echarts.init(document.getElementById('leftCurrent2'));
+ myChart2.on('click', function (params) {
+ myChart2.dispatchAction({
+ type: 'dataZoom',
+ startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
+ endValue:
+ dataAxis[
+ Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
+ ],
+ });
+ });
+
+ myChart2.setOption(option2);
+ window.addEventListener('resize', function () {
+ myChart2.resize();
+ });
+
+
+ //宸︿笁鍥�
+ var legendData = ['浜哄憳', '鍙樻洿鍚庝汉鍛�']; //鍥句緥
+
+ var indicator = [
+ { 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],
+ name: legendData[0],
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ color: '#4A99FF',
+ // shadowColor: '#4A99FF',
+ // shadowBlur: 10,
+ },
+ shadowColor: '#4A99FF',
+ shadowBlur: 10,
+ },
+ },
+ areaStyle: {
+ normal: {
+ // 鍗曢」鍖哄煙濉厖鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0, //鍙�
+ y: 0, //涓�
+ x2: 1, //宸�
+ y2: 1, //涓�
+ colorStops: [
+ {
+ offset: 0,
+ color: '#4A99FF',
+ },
+ {
+ offset: 0.5,
+ color: 'rgba(0,0,0,0)',
+ },
+ {
+ offset: 1,
+ color: '#4A99FF',
+ },
+ ],
+ globalCoord: false,
+ },
+ opacity: 1, // 鍖哄煙閫忔槑搴�
+ },
+ },
+ //鍦ㄦ嫄鐐瑰鏄剧ず鏁板��
+ label: {
+ show: true,
+ formatter: function (params) {
+ return params.value;
+ },
+ },
+ },
+ {
+ value: [40, 25, 110, 60, 18, 12],
+ name: legendData[1],
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ color: '#4BFFFC',
+ // shadowColor: '#4BFFFC',
+ // shadowBlur: 10,
+ },
+ shadowColor: '#4BFFFC',
+ shadowBlur: 10,
+ },
+ },
+ areaStyle: {
+ normal: {
+ // 鍗曢」鍖哄煙濉厖鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0, //鍙�
+ y: 0, //涓�
+ x2: 1, //宸�
+ y2: 1, //涓�
+ colorStops: [
+ {
+ offset: 0,
+ color: '#4BFFFC',
+ },
+ {
+ offset: 0.5,
+ color: 'rgba(0,0,0,0)',
+ },
+ {
+ offset: 1,
+ color: '#4BFFFC',
+ },
+ ],
+ globalCoord: false,
+ },
+ opacity: 1, // 鍖哄煙閫忔槑搴�
+ },
+ },
+ //鍦ㄦ嫄鐐瑰鏄剧ず鏁板��
+ label: {
+ show: true,
+ formatter: function (params) {
+ return params.value;
+ },
+ },
+ },
+ ];
+ var colorArr = ['#4A99FF', '#4BFFFC']; //棰滆壊
+ let option3 = {
+ title: {
+ text: '浜哄憳鍙樺姩',
+ padding: [10, 30],
+ textStyle: {
+ color: '#fff',
+ fontSize: 15
+ },
+ },
+ color: colorArr,
+ radar: {
+ // shape: 'circle',
+ name: {
+ textStyle: {
+ color: '#fff',
+ fontSize: 12,
+ },
+ },
+ radius: 75,
+ nameGap: 2, // 鍥句腑宸ヨ壓绛夊瓧璺濈鍥剧殑璺濈
+ splitNumber: 4, // 缃戞牸绾跨殑涓暟
+ center: ["50%", "63%"], // 鍥剧殑浣嶇疆
+
+ indicator: indicator,
+ splitArea: {
+ // 鍧愭爣杞村湪 grid 鍖哄煙涓殑鍒嗛殧鍖哄煙锛岄粯璁や笉鏄剧ず銆�
+ show: true,
+ areaStyle: {
+ // 鍒嗛殧鍖哄煙鐨勬牱寮忚缃��
+ color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
+ },
+ },
+ axisLine: {
+ //鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡
+ lineStyle: {
+ color: '#153269',
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#113865', // 鍒嗛殧绾块鑹�
+ width: 1, // 鍒嗛殧绾跨嚎瀹�
+ },
+ },
+ },
+ series: [
+ {
+ 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();
+ });
+
+ },
+
+
+
+
+
+
},
}
</script>
@@ -50,18 +516,21 @@
flex-direction: row;
align-items: center;
justify-content: center;
+
.leftarrow {
width: 36px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
+
img {
width: 30px;
height: 120px;
cursor: pointer;
}
}
+
.leftContainer {
height: 100%;
width: calc(100% - 36px);
@@ -70,6 +539,7 @@
flex-direction: column;
align-items: center;
justify-content: space-around;
+
.current1 {
height: 30%;
width: 100%;
--
Gitblit v1.9.3