Merge branch 'master' of http://124.70.43.205:3000/yangxiao/sis_zhfx

public/static/config/modeConfig.js

@@ -1,5 +1,5 @@
 // 本地联调开关
-const localTest = true;
+const localTest = false;
 
 // 服务器地址
 let baseURL = null;

src/App.vue

@@ -400,17 +400,16 @@ export default {
       this.menuIndex = menuIndex;
     },
     clearBackground() {
-      return;
-      let body = $("body.light");
-      if (!body) body = $("body.dark");
-      body.css({
-        // background: "transparent",
-        background: "#fff",
-      });
-      body.find("#app").css({
-        // background: "transparent",
-        background: "#fff",
-      });
+      // let body = $("body.light");
+      // if (!body) body = $("body.dark");
+      // body.css({
+      //   // background: "transparent",
+      //   background: "#fff",
+      // });
+      // body.find("#app").css({
+      //   // background: "transparent",
+      //   background: "#fff",
+      // });
     },
   },
 

src/views/alarmCenter/chart.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 1,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 1,
+            },
+            {
+              text: "5日",
+              value: 1,
+            },
+            {
+              text: "6日",
+              value: 1,
+            },
+            {
+              text: "7日",
+              value: 1,
+            },
+            {
+              text: "8日",
+              value: 1,
+            },
+            {
+              text: "9日",
+              value: 1,
+            },
+            {
+              text: "10日",
+              value: 1,
+            },
+            {
+              text: "11日",
+              value: 1,
+            },
+            {
+              text: "12日",
+              value: 1,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(万KWh)", "(风速)"],
+    },
+    // 自定义tooltip 显示内容
+    customerTooltip: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => [
+        "#05bb4c",
+        "#4b55ae",
+        "#fa8c16",
+        "#f8de5b",
+        "#1a93cf",
+        "#c531c7",
+        "#bd3338",
+      ],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    xdata() {
+      let result = [];
+      if (this.list && this.list.length > 0 && this.list[0].value.length > 0) {
+        result = this.list[0].value.map((t) => {
+          return t.text;
+        });
+      }
+      return result;
+    },
+    ydata() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        let data = null;
+        if (index == 0) {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value} ",
+              fontSize: 14,
+            },
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "#5a6162",
+                type: "dashed",
+              },
+            },
+          };
+        } else {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 14,
+            },
+
+            //分格线
+            splitLine: {
+              show: false,
+            },
+          };
+        }
+
+        result.push(data);
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      if (this.list && this.list.length > 0) {
+        this.list.forEach((value, index) => {
+          result.push({
+            name: value.title,
+            type: "bar",
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return t.value;
+            }),
+            itemStyle: {
+              color: partten.getColor("gray") + 50,
+            },
+            emphasis: {
+              itemStyle: {
+                color: this.color[index],
+              },
+            },
+          });
+        });
+      }
+      return result;
+    },
+  },
+  emits: {
+    tooltip: function (param, callback) {
+      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
+      var result = param[0].axisValue;
+      param.forEach((value, index) => {
+        result +=
+          "<br />" +
+          `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
+          value.seriesName +
+          "：" +
+          value.value;
+      });
+      callback(result);
+      return true;
+    },
+  },
+  methods: {
+    initChart() {
+      let that = this;
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        grid: {
+          top: util.vh(32),
+          left: util.vh(40),
+          right: this.ydata.length > 1 ? util.vh(40) : util.vh(16),
+          bottom: util.vh(24),
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xdata,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: this.ydata,
+        series: this.series,
+      };
+
+      if (that.customerTooltip) {
+        option.tooltip.formatter = function (param) {
+          let result = "";
+          let callback = function (value) {
+            result = value;
+          };
+          that.$emit("tooltip", param, callback);
+          return result;
+        };
+      }
+
+      chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/alarmCenter/customStatistics.vue

@@ -10,7 +10,11 @@
               clearable
               placeholder="请选择"
               popper-class="select"
-              @change="(stationId) => { Windturbines() }"
+              @change="
+                (stationId) => {
+                  Windturbines();
+                }
+              "
             >
               <el-option
                 v-for="item in ChangZhan"
@@ -53,9 +57,14 @@
     <div class="table-box">
       <div class="title">自定义报警统计</div>
       <div class="custom-report-items">
-        <div class="title" v-for="item in tableData" :key="item" @click="alertDetail(item)">
-          <div class="alarmName">{{item.alarmtext}}</div>
-          <div class="alarmCount">{{item.sum}}</div>
+        <div
+          class="title"
+          v-for="item in tableData"
+          :key="item"
+          @click="alertDetail(item)"
+        >
+          <div class="alarmName">{{ item.alarmtext }}</div>
+          <div class="alarmCount">{{ item.sum }}</div>
         </div>
       </div>
     </div>
@@ -78,8 +87,8 @@
           <el-scrollbar>
             <tbody>
               <tr v-for="item in dGridData" :key="item">
-                <td>{{item.name}}</td>
-                <td>{{item.sum}}</td>
+                <td>{{ item.name }}</td>
+                <td>{{ item.sum }}</td>
               </tr>
             </tbody>
           </el-scrollbar>
@@ -87,16 +96,25 @@
       </div>
       <div class="dChart" height="100%" id="dChart">
         <div class="title">报警统计柱状图</div>
-        <!-- <multiple-hover-bar-chart height="80%" width="90%"></multiple-hover-bar-chart> -->
-        <!-- <multiple-hover-bar-chart height="100%" :list="dChartData"></multiple-hover-bar-chart> -->
+        <div id="chartDom" style="style: 100%; height: 90%"></div>
+        <!-- <multiple-hover-bar-chart
+          height="90%"
+          widht="100%"
+          :list="dChartData"
+          :units="['次数']"
+          :showLegend="false"
+        /> -->
+        <!-- <Te /> -->
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
 // import ComTable from "@/components/coms/table/table.vue";
-import MultipleHoverBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import MultipleHoverBarChart from "./chart.vue";
 import * as echarts from "echarts";
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
 export default {
   name: "customStatistics",
   components: { MultipleHoverBarChart },
@@ -110,7 +128,7 @@ export default {
       tableData: [],
       dialogShow: false,
       dGridData: [],
-      dChartData: []
+      dChartData: [],
       // tableLoading: true
     };
   },
@@ -133,7 +151,7 @@ export default {
         success(res) {
           that.ChangZhan = res.data;
           that.stationId = res.data[0].id;
-        }
+        },
       });
     },
     getTable() {
@@ -147,7 +165,7 @@ export default {
         data: {
           stationid: this.stationId,
           datebegin: this.startDate,
-          dateend: this.endDate
+          dateend: this.endDate,
         },
         success(res) {
           let tmpArr = [];
@@ -156,11 +174,11 @@ export default {
             item["key"] = key;
             tmpArr.push(item);
           }
-          tmpArr.sort(function(a, b) {
+          tmpArr.sort(function (a, b) {
             return b["sum"] - a["sum"];
           });
           that.tableData = tmpArr;
-        }
+        },
       });
     },
     async alertDetail(item) {
@@ -174,22 +192,22 @@ export default {
           stationid: this.stationId,
           datebegin: this.startDate,
           dateend: this.endDate,
-          snapid: item["key"]
-        }
+          snapid: item["key"],
+        },
       });
       let keyValue = resData.data.data;
       const dGridData = [];
       for (let key in keyValue) {
         dGridData.push({ sum: keyValue[key], name: key });
       }
-      dGridData.sort(function(a, b) {
+      dGridData.sort(function (a, b) {
         return b.sum - a.sum;
       });
       this.dGridData = dGridData;
       this.alertDetailChart(item);
     },
     async alertDetailChart(item) {
-      let resData = await this.API.requestData({
+      let { data } = await this.API.requestData({
         timeout: 30000,
         method: "GET",
         baseURL: "http://192.168.1.14:8075/",
@@ -198,68 +216,96 @@ export default {
           stationid: this.stationId,
           datebegin: this.startDate,
           dateend: this.endDate,
-          snapid: item["key"]
-        }
+          snapid: item["key"],
+        },
       });
-      let dataX = [],
-        data1 = [],
-        data2 = [];
-      for (let item of resData.data.data) {
-        dataX.push(item["linenum"]);
-        data1.push(item["happendsum"]);
-        data2.push(item["sum"]);
-      }
 
-      let option = {
-        color: ["#05bb4c", "#4b55ae", "#fa8c16"],
-        title: {
-          text: "报警统计柱状图",
-          left: "5%"
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        },
-        legend: {
-          data: ["总数", "发生数量"],
-          textStyle: {
-            color: "#fff"
-          }
+      let chartDom = document.getElementById("chartDom");
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      let xAxisData = [];
+      let seriesData = [];
+      let legendData = [];
+      const color = [
+        "#05bb4c",
+        "#4b55ae",
+        "#fa8c16",
+        "#f8de5b",
+        "#1a93cf",
+        "#c531c7",
+        "#bd3338",
+      ];
+
+      data.forEach((ele, index) => {
+        xAxisData.push(ele.linenum);
+        seriesData.push({
+          name: ele.linenum,
+          value: ele.sum,
+          itemStyle: {
+            color: color[index],
+          },
+        });
+        legendData.push(ele.linenum);
+      });
+
+      option = {
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true, //隐藏y轴
+          },
         },
-        grid: {
-          left: "5%",
-          right: "6%",
-          bottom: "3%",
-          containLabel: true
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dotted",
+              color: "#ccc",
+            },
+          },
+          axisLine: {
+            show: true, //隐藏y轴
+          },
         },
-        xAxis: { name: "线路", type: "category", data: dataX },
-        yAxis: { name: "数量", type: "value" },
+
         series: [
           {
-            name: "总数",
+            data: seriesData,
             type: "bar",
-            barWidth: 40,
-            barGap: "-100%",
-            label: { normal: { show: true, position: "top" } },
-            data: data2
+            barMaxWidth: 80,
+            barGap: 3,
           },
-          {
-            name: "发生数量",
-            type: "bar",
-            barGap: "-100%",
-            barWidth: 40,
-            label: { normal: { show: true, position: "inside" } },
-            data: data1
-          }
-        ]
+        ],
+        grid: {
+          top: 32,
+          left: 8,
+          right: 8,
+          bottom: 0,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor:
+            this.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor:
+            this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
+          textStyle: {
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+            fontSize: 12,
+          },
+        },
       };
-      let chart = echarts.init(document.getElementById("dChart"));
-      chart.clear();
-      chart.setOption(option);
-    }
-  }
+
+      option && myChart.setOption(option);
+    },
+  },
 };
 </script>
 <style lang="less">
@@ -292,7 +338,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   height: 80vh;
-  overflow-y:auto;
+  overflow-y: auto;
   .title {
     height: 80px;
     width: 18.8vw;

vue.config.js

@@ -185,7 +185,18 @@ module.exports = {
         pathRewrite: {  // 路径重写，eg:把api接口替换为''
           '^/cbk': ''
         }
-      }
+      },
+      '/weather': {
+        target: 'http://t.weather.sojson.com/', // 请求地址
+
+        changeOrigin: true, // 在vue-cli3中，默认changeOrigin的值是true,意味着服务器host设置成target，这与vue-cli2不一致，vue-cli2这个默认值是false
+        // changeOrigin的值是true,target是host, request URL是http://baidu.com
+        // 如果设置changeOrigin: false，host就是浏览器发送过来的host，也就是localhost:8082。
+
+        pathRewrite: {  // 路径重写，eg:把api接口替换为''
+          '^/weather': ''
+        }
+      },
     },
     open: false, // 是否打开浏览器
   }