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/bottom.vue |   91 ++++++++
 src/components/Screen/top.vue    |   17 +
 src/views/Thematic/index.vue     |    6 
 src/components/Screen/left.vue   |  500 ++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 594 insertions(+), 20 deletions(-)

diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index d237236..53f2033 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -32,12 +32,43 @@
           <el-popover placement="top" width="100" trigger="click">
             <!-- 鍐呭 -->
             <span slot="reference">宸ョ▼灞曠ず</span>
+            <div class="popover-content">
+              <div class="popover-content__header">椤圭洰淇℃伅</div>
+              <div class="popover-content__list">
+                <div
+                  class="popover-content__list__item"
+                  v-for="item in displayProject"
+                  :key="item.id"
+                  :class="currProject == item.name ? 'active' : ''"
+                  :title="item.name"
+                  @click="DisplayCurrentProject(item.name)"
+                >
+                  {{ item.name.length>8?item.name.substring(0,8):item.name }}
+                </div>
+              </div>
+            </div>
           </el-popover>
         </div>
         <div class="bottombtn">
           <el-popover placement="top" width="100" trigger="click">
             <!-- 鍐呭 -->
             <span slot="reference">宸ョ▼宸¤</span>
+            <div class="popover-content">
+              <div class="popover-content__header">椤圭洰淇℃伅</div>
+              <div class="popover-content__list">
+                <div
+                  class="popover-content__list__item"
+                  v-for="item in FlyProject"
+                  :key="item.id"
+                  :class="currProject == item.name ? 'active' : ''"
+                  :title="item.name"
+                  @click="FlyCurrentProject(item.name)"
+                >
+                  {{ item.name.length>8?item.name.substring(0,8):item.name }}
+                </div>
+              </div>
+            </div>
+
           </el-popover>
         </div>
       </div>
@@ -75,6 +106,47 @@
           id: "qqxm",
         },
       ],
+
+      displayProject:[
+        {
+          name:"涓縿涓滅嚎绠¢亾宸ョ▼",
+          id:"zedx"
+        },
+        {
+          name:"瑗挎皵涓滆緭涓夌嚎涓柇绠¢亾宸ョ▼",
+          id:"xqds"
+        },
+        {
+          name:"涓紖澶╃劧姘旂閬撳伐绋�",
+          id:"zmtrq"
+        },
+        {
+          name:"灞变笢瀹樼綉鏂板共绾�",
+          id:"sdxgx"
+        },
+      ],
+      FlyProject:[
+        {
+          name:"涓縿涓滅嚎绠¢亾宸ョ▼",
+          id:"zedx"
+        },
+        {
+          name:"瑗挎皵涓滆緭涓夌嚎涓柇绠¢亾宸ョ▼",
+          id:"xqds"
+        },
+        {
+          name:"涓紖澶╃劧姘旂閬撳伐绋�",
+          id:"zmtrq"
+        },
+        {
+          name:"灞变笢瀹樼綉鏂板共绾�",
+          id:"sdxgx"
+        },
+      ]
+
+
+
+
     }
   },
   methods: {
@@ -96,6 +168,25 @@
     handlePopoverClick(params) {
       this.currProject = params.name
     },
+
+    //椤圭洰灞曠ず
+    DisplayCurrentProject(parm){
+      console.log(parm);
+      //鎵撳紑鎴栬�呭姞杞藉浘灞�
+
+      //椋炲埌鎸囧畾浣嶇疆
+    },
+
+    //宸ョ▼婕父椋炶
+    FlyCurrentProject(parm){
+      console.log(parm);
+      //鎵撳紑鎴栬�呭姞杞藉浘灞�
+
+      //寮�濮嬮琛�
+    }
+
+
+
   },
 }
 </script>
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%;
diff --git a/src/components/Screen/top.vue b/src/components/Screen/top.vue
index afb517a..aa97331 100644
--- a/src/components/Screen/top.vue
+++ b/src/components/Screen/top.vue
@@ -2,14 +2,14 @@
   <div class="top">
     <div class="topleft">
       <div
-        class="topleft1 topleftC"
+        class="topleft1 topleftC"  @click="OpenInitChart"
         :class="{ topleft1: screen == false, topleftC: screen == true }"
       >
         <img src="../../assets/img/Screen/bigST.png" />
         <span>澶у睆瑙嗗浘</span>
       </div>
       <div
-        class="topleft1 topleftC"
+        class="topleft1 topleftC" @click="OpenProjectree"
         :class="{ topleft1: tree == false, topleftC: tree == true }"
       >
         <img src="../../assets/img/Screen/ptree.png" />
@@ -40,6 +40,19 @@
     ReturnLast() {
       this.$router.push("/Synthesis")
     },
+
+    //鎵撳紑澶у睆
+    OpenInitChart(){
+      this.$parent.$refs.mapleft.OpenLeftInit();
+    },
+
+    //鎵撳紑宸ョ▼鏍�
+    OpenProjectree(){
+      this.$parent.$refs.mapleft.OpenLeftProjectTree();
+    }
+
+
+
   },
 }
 </script>
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 01e5cbb..0918c76 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -2,9 +2,9 @@
   <div class="themaic">
     <mapsdk></mapsdk>
     <top class="title" ref="title"></top>
-    <left class="mapleft" :style="{ width: leftWidth }"></left>
-    <right class="mapright" :style="{ width: rightWidth }"></right>
-    <bottom class="mapbottom"></bottom>
+    <left class="mapleft" :style="{ width: leftWidth }" ref="mapleft"></left>
+    <right class="mapright" :style="{ width: rightWidth }"  ref="mapright"></right>
+    <bottom class="mapbottom"  ref="mapbottom"></bottom>
   </div>
 </template>
 

--
Gitblit v1.9.3