Merge branch 'wsy' of ssh://61.161.152.110:29418/electronic-map into tjj2

src/components/chart/line/weather-line-chart.vue

@@ -19,6 +19,10 @@ export default {
       type: String,
       default: "270px",
     },
+    list: {
+      type: Array,
+      default: [],
+    },
   },
   data() {
     return {
@@ -28,15 +32,39 @@ export default {
   },
   methods: {
     initChart() {
+      let that = this;
       const chart = echarts.init(this.$el);
+      const xData = [];
+      const fsData = [];
+      this.list.forEach((element) => {
+        xData.push(new Date(element.time).formatDate("hh时"));
+        fsData.push(element.fs + 5);
+      });
       let option = {
         grid: {
-          top: 10,
+          top: 50,
           bottom: 50,
+          left: 20,
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            const data = params[0]["data"];
+            new Date(data.time).formatDate("yyyy-MM-dd hh时");
+            return [
+              new Date(data.time).formatDate("yyyy-MM-dd hh时"),
+              "天气：" + data.tqmc + "",
+              "风速：" + data.fs + " m/s",
+              "风向：" + data.fx + " 度",
+              "气温：" + data.wd + " ℃",
+              "大气压强：" + data.dqyl + " pa",
+              "湿度：" + data.sd + " %",
+            ].join("<br>");
+          },
         },
         xAxis: {
           type: "category",
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          data: xData,
         },
         yAxis: [
           {
@@ -45,57 +73,85 @@ export default {
             axisLabel: { show: false },
             splitLine: { show: false },
           },
+          {
+            type: "value",
+            // max: 25,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false },
+          },
         ],
 
         series: [
           {
             type: "custom",
             renderItem: function (param, api) {
-              return {
-                type: "group",
-                children: [
-                  {
-                    type: "image",
-                    style: {
-                      image:
-                        require("@assets/icon/svg/weather/02.png"),
-                      x: 0,
-                      y: 0,
-                      width: 20,
-                      height: 20,
+              const spiltSize = 2;
+              if (param.dataIndex % spiltSize == 0 && that.list) {
+                const xx = param.coordSys.width / ((that.list.length / spiltSize) | 1);
+                const x = param.coordSys.x + xx * (param.dataIndex / spiltSize) * 1.05;
+                const y = param.coordSys.y - 30;
+                const image = require("@assets/icon/svg/weather/" + that.list[param.dataIndex]["tqtp"] + ".png");
+                return {
+                  type: "group",
+                  children: [
+                    {
+                      type: "image",
+                      style: {
+                        image: image,
+                        x: -5,
+                        y: 0,
+                        width: 30,
+                        height: 30,
+                      },
+                      position: [x, y],
                     },
-                    position: [param.dataIndexInside * 80 +80, 0],
-                  },
-                ],
-              };
+                  ],
+                };
+              }
             },
-            data: [0, 10, 20],
+            data: this.list,
             yAxisIndex: 0,
             z: 11,
-          },{
-            type: 'custom',
-            renderItem: function(param, api){
-                        return {
-            type: 'path',
-            shape: {
-                pathData: 'M31 16l-15-15v9h-26v12h26v9z',
-                      x: 0,
-                      y: 0,
-                      width: 20,
-                      height: 20,
-            },
-            rotation: 0,
-            position: [param.dataIndexInside * 80 +80, 200],
-            style: api.style({
-                stroke: '#555',
-                lineWidth: 1
-            })
-        };
+          },
+          {
+            type: "custom",
+            renderItem: function (param, api) {
+              const spiltSize = 2;
+              if (param.dataIndex % spiltSize == 0 && that.list) {
+                const xx = param.coordSys.width / ((that.list.length / spiltSize) | 1);
+                const x = param.coordSys.x + 8 + xx * (param.dataIndex / spiltSize) * 1.05;
+                const y = param.coordSys.y;
+                return {
+                  type: "path",
+                  shape: {
+                    pathData: "M31 16l-15-15v9h-26v12h26v9z",
+                    x: -15 / 2,
+                    y: -15 / 2,
+                    width: 15,
+                    height: 15,
+                  },
+                  rotation: (Math.PI / 180) * (that.list[param.dataIndex]["fx"] + 90),
+                  // rotation: (Math.PI / 180) * 45,
+                  position: [x, 200],
+                  style: api.style({
+                    stroke: "#555",
+                    lineWidth: 1,
+                  }),
+                };
+              }
             },
 
-            data: [10,20,30],
-            z: 10
-        }
+            data: that.list,
+            z: 10,
+          },
+          {
+            type: "line",
+            lineStyle: { normal: { color: "#303f6e" } },
+            data: fsData,
+            z: 1,
+          },
         ],
       };
 
@@ -117,12 +173,16 @@ export default {
         this.$el.style.width = this.width;
         this.$el.style.height = this.height;
         this.initChart();
-      }, 1000);
+      }, 500);
     });
   },
   updated() {
     this.$nextTick(() => {
-      this.initChart();
+      setTimeout(() => {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.initChart();
+      }, 1000);
     });
   },
   unmounted() {

src/views/HealthControl/Health10.vue

@@ -49,22 +49,17 @@
                         {{ item[1] }}
                       </td>
                       <td style="width: 105px">
-                        <div
-                          :style="
+                        <div :style="
                             'background-color: ' +
                             item[0] +
                             ';width:10px;height:10px;margin:0 auto;'
-                          "
-                        ></div>
+                          "></div>
                       </td>
                       <td style="width: 400px">
                         <div class="percent-item">
                           {{ item[3] }}%
                           <div class="percent-bar" style="margin-right: 4px">
-                            <div
-                              class="percent-value"
-                              :style="'width:' + item[3] + '%'"
-                            ></div>
+                            <div class="percent-value" :style="'width:' + item[3] + '%'"></div>
                           </div>
                           <!-- 剩余9999/建个故障9999 -->
                           {{ item[4] }}
@@ -87,43 +82,28 @@
       <el-col :span="12">
         <div class="chart-title">
           <div class="title-panel" style="">
-            <span style="text-align: left; padding-left: 20px; font-size: 12px"
-              >故障信息
+            <span style="text-align: left; padding-left: 20px; font-size: 12px">故障信息
             </span>
-            <span class="des-title"
-              >预计损失电量<span class="num">73824.0</span
-              ><span class="unit">Kwh</span></span
-            >
-            <span class="des-title"
-              >预计检修时长<span class="num">29.33</span
-              ><span class="unit">H</span></span
-            >
+            <span class="des-title">预计损失电量<span class="num">73824.0</span><span class="unit">Kwh</span></span>
+            <span class="des-title">预计检修时长<span class="num">29.33</span><span class="unit">H</span></span>
           </div>
-          <img-line-chart
+          <!-- <img-line-chart
             height="270px"
-          />
-          <!-- <weather-line-chart/> -->
+          /> -->
+          <weather-line-chart :list="weatherData"/>
         </div>
       </el-col>
     </el-row>
     <div class="fc-info mg-b-16">
       <panel :title="'曲线'" :showLine="false">
-        <zoom-line-chart
-          height="35vh"
-          :list="powerChartData.value"
-          :units="powerChartData.units"
-        />
+        <zoom-line-chart height="35vh" :list="powerChartData.value" :units="powerChartData.units" />
       </panel>
     </div>
-    <HealthReport
-      :show="healthReportShow"
-      :params="{ wtId: this.wtId, recorddate: this.recorddate }"
-      @closed="
+    <HealthReport :show="healthReportShow" :params="{ wtId: this.wtId, recorddate: this.recorddate }" @closed="
         (res) => {
           this.healthReportShow = false;
         }
-      "
-    />
+      " />
   </div>
 </template>
 
@@ -191,7 +171,7 @@ export default {
             template() {
               return "<div style='border: 1px solid #182238;background: #303f6e;width: 70%;margin: 0 auto;color:#FFF;cursor: pointer;'>查看报告</div>";
             },
-            click(e,row) {
+            click(e, row) {
               that.recorddate = row.date;
               that.healthReportShow = true;
             },
@@ -325,144 +305,7 @@ export default {
         ],
       },
       // 月发电量对比
-      weatherChart: {
-        units: ["功率", "风速"],
-        value: [
-          {
-            title: "应发功率",
-            yAxisIndex: 1,
-            value: [
-              {
-                text: "05-02 00:00",
-                value: 11,
-                weather: 'sun',
-                direction: "n",
-                angle: 0,
-              },
-              {
-                text: "05-04 00:00",
-                value: 11,
-                weather: 'rain',
-                direction: "s",
-                angle: 20,
-              },
-              {
-                text: "05-06 00:00",
-                value: 13,
-                weather: 'sun',
-                direction: "w",
-                angle: 30,
-              },
-              {
-                text: "05-08 00:00",
-                value: 12,
-                weather: 'cloud',
-                direction: "e",
-                angle: 40,
-              },
-              {
-                text: "05-10 00:00",
-                value: 13,
-                weather: 'sun',
-                direction: "nw",
-                angle: 90,
-              },
-              {
-                text: "05-12 00:00",
-                value: 12,
-                weather: 'sun',
-                direction: "ne",
-                angle: 120,
-              },
-              {
-                text: "05-14 00:00",
-                value: 11,
-                weather: 'cloud',
-                direction: "sw",
-                angle: 180,
-              },
-              {
-                text: "05-16 00:00",
-                value: 11,
-                weather: 'sun',
-                direction: "se",
-                angle: 10,
-              },
-              {
-                text: "05-18 00:00",
-                value: 13,
-                weather: 'rain',
-                direction: "n",
-                angle: 270,
-              },
-              {
-                text: "05-20 00:00",
-                value: 11,
-                weather: 'cloud',
-                direction: "n",
-                angle: 10,
-              },
-              {
-                text: "05-22 00:00",
-                value: 12,
-                weather: 'sun',
-                direction: "n",
-                angle: 10,
-              },
-            ],
-          },
-          {
-            title: "实际功率",
-            yAxisIndex: 1,
-            value: [
-              {
-                text: "05-02 00:00",
-                value: 1,
-              },
-              {
-                text: "05-04 00:00",
-                value: 3,
-              },
-              {
-                text: "05-06 00:00",
-                value: 4,
-              },
-              {
-                text: "05-08 00:00",
-                value: 1,
-              },
-              {
-                text: "05-10 00:00",
-                value: 3,
-              },
-              {
-                text: "05-12 00:00",
-                value: 5,
-              },
-              {
-                text: "05-14 00:00",
-                value: 1,
-              },
-              {
-                text: "05-16 00:00",
-                value: 5,
-              },
-              {
-                text: "05-18 00:00",
-                value: 4,
-              },
-              {
-                text: "05-20 00:00",
-                value: 1,
-              },
-              {
-                text: "05-22 00:00",
-                value: 3,
-              },
-            ],
-          },
-        ],
-      },
+      weatherData: [],
       powerChartData: {
         units: [""],
         value: [
@@ -482,7 +325,7 @@ export default {
   },
 
   methods: {
-    init(){
+    init() {
       this.wpId = this.$route.params.wpId;
       this.wtId = this.$route.params.wtId;
       this.getTop5();
@@ -492,7 +335,7 @@ export default {
       this.getFindPowerChar();
       this.getWeather();
     },
-    switchWt(data){
+    switchWt(data) {
       this.$router.push(`/health/health10/${data.wpId}/${data.wtId}`);
       this.init();
     },
@@ -654,42 +497,22 @@ export default {
     },
 
     // 获取天气信息
-    getWeather() {
-      let that = this;
-      that.API.requestData({
+    async getWeather() {
+      const { data } = await this.API.requestData({
         method: "POST",
         subUrl: "healthsub/getWeatherRealDay5Info",
-        data: {
-          wpId: that.wpId,
-        },
-        success(res) {
-          console.log(123123, res);
-          let weatherChart = [];
-
-          let chartUnits = ["(m/s)", "(℃)"];
-          let chartData = [
-            {
-              title: "风速",
-              yAxisIndex: 0,
-              value: [],
-            },
-            {
-              title: "温度",
-              yAxisIndex: 1,
-              value: [],
-            },
-          ];
-
-          res.data.ls.forEach((item) => {
-            chartData[0].value.push({
-              text: "05-02 00:00",
-              value: 11,
-              weather: "sun",
-              direction: "n",
-            });
-          });
-        },
+        data: { wpId: this.wpId },
       });
+        // console.log(data);
+      if (data && data.data) {
+        this.weatherData = data.data.ls;
+        // const list = [];
+        // data.data.ls.forEach((element) => {
+          // console.log(element);
+          // console.log(new Date(element.time).formatDate("yyyy-MM-dd hh:mm:ss"));
+          // list.push();
+        // });
+      }
     },
   },
 };