Переглянути джерело

1.合并yx分支【杨宽提的】;2.海子井svg图已做,待调接口;3.操作记录,状态转换记录【已调试,待后端部署后端代码】

mw_666 3 роки тому
батько
коміт
8f13094a4f

+ 484 - 0
src/components/chart/combination/area-line-chart-2.vue

@@ -0,0 +1,484 @@
+<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: "800px",
+    },
+    lineData: {
+      type: Array,
+      default: () => [
+        {
+          text: "日发电量",
+          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,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          text: "上网电量",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 4,
+            },
+            {
+              text: "6",
+              value: 5,
+            },
+            {
+              text: "7",
+              value: 6,
+            },
+            {
+              text: "8",
+              value: 7,
+            },
+            {
+              text: "9",
+              value: 8,
+            },
+            {
+              text: "10",
+              value: 7,
+            },
+            {
+              text: "11",
+              value: 9,
+            },
+            {
+              text: "12",
+              value: 2,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 5,
+            },
+            {
+              text: "15",
+              value: 12,
+            },
+            {
+              text: "16",
+              value: 11,
+            },
+          ],
+        },
+      ],
+    },
+    areaData: {
+      type: Array,
+      default: () => [
+        {
+          name: "1",
+          start: 0,
+          end: 100,
+          state: "green",
+        },
+        {
+          name: "1",
+          start: 100,
+          end: 200,
+          state: "red",
+        },
+        {
+          name: "1",
+          start: 200,
+          end: 300,
+          state: "yellow",
+        },
+        {
+          name: "2",
+          start: 300,
+          end: 800,
+          state: "green",
+        },
+        {
+          name: "3",
+          start: 800,
+          end: 9000,
+          state: "green",
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["健康趋势", "风机健康状态数量"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    legend() {
+      let data = [];
+      this.lineData.forEach((value, index) => {
+        data.push(value.text);
+      });
+      return data;
+    },
+    xAxisData() {
+      let data = [];
+      if (this.lineData.length > 0)
+        this.lineData[0].value.forEach((value, index) => {
+          data.push(value.text);
+        });
+      return data;
+    },
+    yAxisData() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        let data = {
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value} ",
+            color: partten.getColor("gray"),
+          },
+          axisLine: {
+            type: "dashed",
+            lineStyle: {
+              color: partten.getColor("gray"),
+            },
+            width: 5,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              dashOffset: 10,
+              color: partten.getColor("gray") + 80,
+            },
+          },
+        };
+        result.push(data);
+      });
+
+      result.push({
+        data: [this.areaData[0].name],
+        axisLabel: { show: false },
+      });
+
+      return result;
+    },
+    areaChartData() {
+      let data = [];
+      for (var i = 0; i < this.areaData.length; i++) {
+        let item = this.areaData[i];
+        var color = item.state;
+        data.push({
+          name: item.name,
+          value: [item.start, item.end, item.end - item.start],
+          itemStyle: {
+            normal: {
+              color: color,
+            },
+          },
+          exData: item,
+        });
+      }
+      return data;
+    },
+    areaMax() {
+      let max = 0;
+      this.areaData.forEach((value) => {
+        if (max < value.end) max = value.end;
+      });
+      return max;
+    },
+  },
+  methods: {
+    renderItem(params, api) {
+      var start = api.coord([api.value(0)]);
+      var end = api.coord([api.value(1)]);
+      var height = api.size([0, 1])[1];
+
+      var rectShape = echarts.graphic.clipRectByRect(
+        {
+          x: start[0],
+          y: start[1] - height / 2,
+          width: end[0] - start[0],
+          height: height,
+        },
+        {
+          x: params.coordSys.x,
+          y: params.coordSys.y,
+          width: params.coordSys.width,
+          height: params.coordSys.height,
+        }
+      );
+
+      return (
+        rectShape && {
+          type: "rect",
+          transition: ["shape"],
+          shape: rectShape,
+          style: api.style(),
+        }
+      );
+    },
+    initChart() {
+      let that = this;
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        grid: {
+          left: 40,
+          right: 40,
+          bottom: 40,
+          top: 32,
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+          },
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 120,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.xAxisData,
+          },
+          {
+            show: false,
+            min: 0,
+            max: this.areaMax,
+            axisLabel: {
+              show: false,
+              formatter: function(val) {
+                return Math.max(0, val - 0) + " ms";
+              },
+            },
+          },
+        ],
+        yAxis: this.yAxisData,
+        series: [],
+      };
+
+      // line data
+      if (this.lineData.length > 0) {
+        this.lineData.forEach((value, index) => {
+          option.series.push({
+            name: value.text,
+            type: "line",
+            data: value.value,
+            smooth: true, //平滑展示
+            yAxisIndex: value.yAxisIndex,
+            // lineStyle: {
+            //   color: partten.getColor("green"),
+            // },
+            // itemStyle: {
+            //   color: partten.getColor("green"),
+            // },
+          });
+        });
+      }
+
+      // 区域
+      if (this.areaData && this.areaData.length > 0) {
+        option.series.push({
+          type: "custom",
+          renderItem: this.renderItem,
+          yAxisIndex: this.units.length,
+          xAxisIndex: 1,
+          itemStyle: {
+            opacity: 0.2,
+          },
+          tooltip: {
+            show: false,
+            formatter: function(params) {
+              return params.marker + params.name + ": " + params.value[2] + "s";
+            },
+          },
+          encode: {
+            x: [1, 2],
+            y: 0,
+          },
+          data: this.areaChartData,
+        });
+      }
+
+      chart.setOption(option);
+
+      return chart;
+    },
+  },
+  emits: {
+    areaClick: null,
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      let that = this;
+      let chart = this.initChart();
+      chart.on("click", function(e, p) {
+        if (e.seriesType == "custom") {
+          that.$emit("areaClick", { data: e.data.exData });
+        }
+      });
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

+ 23 - 24
src/components/chart/radar/normal-radar-chart.vue

@@ -24,7 +24,7 @@ export default {
     // 标题
     title: {
       type: Array,
-      default: ["标题","标题"],
+      default: () => ["标题", "标题"],
     },
     // 值
     value: {
@@ -66,26 +66,25 @@ export default {
             borderWidth: 0.5,
           },
         },
-		{
-		  areaStyle: {
-		    color: "rgba(165,228,175, 0.9)",
-		  },
-		  lineStyle: {
-		    color: "rgba(255,255,255, 0.85)",
-		  },
-		  itemStyle: {
-		    color: "rgba(165,228,175, 0.5)",
-		    borderColor: "rgba(255,255,255, 0.5)",
-		    borderWidth: 0.5,
-		  },
-		},
+        {
+          areaStyle: {
+            color: "rgba(165,228,175, 0.9)",
+          },
+          lineStyle: {
+            color: "rgba(255,255,255, 0.85)",
+          },
+          itemStyle: {
+            color: "rgba(165,228,175, 0.5)",
+            borderColor: "rgba(255,255,255, 0.5)",
+            borderWidth: 0.5,
+          },
+        },
       ],
     };
   },
-  computed: {
-    series() {
+  methods: {
+    renderValue() {
       let result = [];
-	  console.log(this.title)
       this.value.forEach((value, index) => {
         result.push({
           name: this.title[index],
@@ -93,11 +92,8 @@ export default {
           data: value.data,
         });
       });
-
       return result;
     },
-  },
-  methods: {
     initChart() {
       let chart = echarts.init(this.$el);
 
@@ -110,9 +106,12 @@ export default {
               maxValue = value;
             }
           });
-          item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
-          item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
-          item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
+          item.areaStyle =
+            this.lineStyles[index % this.lineStyles.length].areaStyle;
+          item.lineStyle =
+            this.lineStyles[index % this.lineStyles.length].lineStyle;
+          item.itemStyle =
+            this.lineStyles[index % this.lineStyles.length].itemStyle;
         });
       maxValue *= 1.5;
 
@@ -354,7 +353,7 @@ export default {
             indicator: indicator,
           },
         ],
-        series: this.series,
+        series: this.renderValue(),
       };
 
       chart.setOption(option);

+ 9 - 0
src/components/chart/radar/radar-chart.vue

@@ -122,6 +122,14 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
+          position: function(pos, params, dom, rect, size) {
+            // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
+            var obj = { top: 60 };
+            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
+            return obj;
+          },
+          extraCssText: "position: absolute; margin-top:50%;",
+          // extraCssText: "max-width:140px;position:sticky;top:0;left:0"
         },
         radar: [
           // 最低层 90
@@ -367,5 +375,6 @@ export default {
   height: 100%;
   display: block;
   margin: auto;
+  position: relative;
 }
 </style>

+ 14 - 8
src/components/coms/table/table3.vue

@@ -16,7 +16,7 @@
       :width="col.width"
       :min-width="col.minWidth"
       :sortable="col.sortable"
-	  :sort-orders="sortOrder"
+      :sort-orders="sortOrder"
       :sort-by="col.field + '.count'"
       :show-overflow-tooltip="!col.slot"
       :fixed="col.fixed"
@@ -89,6 +89,12 @@ export default {
         };
       },
     },
+    sortOrder: {
+      type: Array,
+      default: () => {
+        return ["descending", "ascending", null];
+      },
+    },
   },
   // 自定义事件
   emits: {
@@ -136,12 +142,12 @@ export default {
       if (this.pageable) return this.currentPage * this.pageSize;
       else return this.data.data.length;
     },
-	sortOrder:{
-	  type:Array,
-	  default:()  =>{
-		return ['descending', 'ascending', null]
-	  }
-	}
+    // sortOrder: {
+    //   type: Array,
+    //   default: () => {
+    //     return ["descending", "ascending", null];
+    //   },
+    // },
   },
   // 函数
   methods: {
@@ -164,7 +170,7 @@ export default {
   },
   created() {
     // 创建后
-	this.selfPageSize = this.pageSize
+    this.selfPageSize = this.pageSize;
   },
   beforeMount() {
     // 渲染前

+ 15 - 15
src/components/other/cesium/index.vue

@@ -50,22 +50,22 @@
 </template>
  
 <script>
-// import addCircleWave from "./static/CiecleScan";
-// import Windy from "./static/wind/Windy";
-// import response from "./static/2017121300";
-// import wtTree from "./static/fj";
+import addCircleWave from "./static/CiecleScan";
+import Windy from "./static/wind/Windy";
+import response from "./static/2017121300";
+import wtTree from "./static/fj";
 
-// import h337 from "./static/heatmap";
+import h337 from "./static/heatmap";
 
-// import $ from "jquery";
+import $ from "jquery";
 
-// import {
-//   createSnowStage,
-//   createRainStage,
-// } from "./static/postProcessController";
+import {
+  createSnowStage,
+  createRainStage,
+} from "./static/postProcessController";
 
-// const Cesium = require("cesium/Cesium");
-// const widgets = require("cesium/Widgets/widgets.css");
+const Cesium = require("cesium/Cesium");
+const widgets = require("cesium/Widgets/widgets.css");
 
 export default {
   data() {
@@ -106,9 +106,9 @@ export default {
   created() {},
 
   mounted() {
-    // this.initMap();
-    // this.handleCommand("b");
-    // this.flyto(1600000);
+    this.initMap();
+    this.handleCommand("b");
+    this.flyto(1600000);
   },
 
   computed: {},

+ 1 - 1
src/views/Decision/Decision2Cndb.vue

@@ -111,7 +111,7 @@
     >
       <dayinfo
         :radarValue="radarValue"
-		:title="[windNum,windNum2]"
+        :title="[windNum, windNum2]"
         :windNum="windNum"
         :windNum2="windNum2"
         :tabs="tabs"

+ 255 - 205
src/views/Decision/dayinfo.vue

@@ -1,221 +1,271 @@
 <template>
-	<div class="health-day-info">
-		<div class="body">
-			<div class="left">
-				<div class="header">
-					<span class="herder-info">
-						对标排名分析
-					</span>
-				</div>
-				<div class="chart-body">
-					<normal-radar-chart :height="'500px'" :value="radarValue" :tltle="['windNum','windNum2']"/>
-				</div>
-			</div>
-			<div class="left">
-				<div class="header">
-					<span class="herder-info">
-						基础指标
-					</span>
-				</div>
-				<table class="table-form">
-					<tr>
-						<td class="white">指标</td>
-						<td class="white">{{windNum}}</td>
-						<td class="white">{{windNum2}}</td>
-					</tr>
-					<tr v-for="item in tabs">
-						<td class="white">{{item.name}}</td>
-						<td class="white">{{item.windData1}}</td>
-						<td class="white">{{item.windData2}}</td>
-					</tr>
-				</table>
-			</div>
-
-		</div>
-		<div class="body">
-			<div style="width: 100%;">
-				<div class="header">
-					<span class="herder-info">
-						损失电量分析
-					</span>
-				</div>
-				<div class="chart-body">
-					<multiple-bar-chart height="240px" :list="analyisDialog" :customerTooltip="true" @tooltip="tooltip"
-						:units='["(万KWh)"]' />
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="health-day-info">
+    <div class="body">
+      <div class="left">
+        <div class="header">
+          <span class="herder-info"> 对标排名分析 </span>
+        </div>
+        <div class="chart-body">
+          <normal-radar-chart
+            :title="['这是title1', '这是title2']"
+            :height="'500px'"
+            :value="chartData"
+          />
+        </div>
+      </div>
+      <div class="left">
+        <div class="header">
+          <span class="herder-info"> 基础指标 </span>
+        </div>
+        <table class="table-form">
+          <tr>
+            <td class="white">指标</td>
+            <td class="white">{{ windNum }}</td>
+            <td class="white">{{ windNum2 }}</td>
+          </tr>
+          <tr v-for="(item,index) in tabs" :key="index">
+            <td class="white">{{ item.name }}</td>
+            <td class="white">{{ item.windData1 }}</td>
+            <td class="white">{{ item.windData2 }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="body">
+      <div style="width: 100%">
+        <div class="header">
+          <span class="herder-info"> 损失电量分析 </span>
+        </div>
+        <div class="chart-body">
+          <multiple-bar-chart
+            height="240px"
+            :list="analyisDialog"
+            :customerTooltip="true"
+            @tooltip="tooltip"
+            :units="['(万KWh)']"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
-	import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
-	export default {
-		components: {
-			NormalRadarChart,
-			MultipleBarChart
-		},
-		props: {
-			windNum: {
-				type: String,
-				default: '麻黄山24号风机',
-			},
-			windNum2: {
-				type: String,
-				default: '麻黄山2号风机',
-			},
-			radarValue: {
-				type: Array,
-				default: () => [{
-					indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率", "复位及时率", "消缺及时率", "状态转换率"],
-					data: [{
-						value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000]
-					}],
-				}],
-			},
-			tabs: {
-				type: Array,
-				default: () => [{
-					name: "发电量",
-					windData1: 1,
-					windData2: 14
-				}, {
-					name: "故障损失电量",
-					windData1: 2,
-					windData2: 13
-				}, {
-					name: "检修损失电量",
-					windData1: 3,
-					windData2: 12
-				}, {
-					name: "性能未达标损失电量",
-					windData1: 4,
-					windData2: 11
-				}, {
-					name: "受累损失电量",
-					windData1: 5,
-					windData2: 10
-				}, {
-					name: "风能利用率",
-					windData1: 6,
-					windData2: 9
-				}, {
-					name: "故障损失率",
-					windData1: 7,
-					windData2: 8
-				}, {
-					name: "检修损失率",
-					windData1: 8,
-					windData2: 7
-				}, {
-					name: "弃风率",
-					windData1: 9,
-					windData2: 6
-				}, {
-					name: "性能损失率",
-					windData1: 10,
-					windData2: 5
-				}, {
-					name: "受累损失率",
-					windData1: 11,
-					windData2: 4
-				}, {
-					name: "复位及时率",
-					windData1: 12,
-					windData2: 3
-				}, {
-					name: "消缺及时率",
-					windData1: 13,
-					windData2: 2
-				}, {
-					name: "状态转换率",
-					windData1: 14,
-					windData2: 1
-				}],
-			},
-			analyisDialog: {
-				type: Array,
-				default: () => [{
-					title: "故障损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "检修损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "性能损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "限电损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "受累损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}]
-			},
-		},
-		methods: {
-			tooltip(param, callback) {
-				var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
+import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
+import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+export default {
+  components: {
+    NormalRadarChart,
+    MultipleBarChart,
+  },
+  props: {
+    windNum: {
+      type: String,
+      default: "麻黄山24号风机",
+    },
+    windNum2: {
+      type: String,
+      default: "麻黄山2号风机",
+    },
+    radarValue: {
+      type: Array,
+      default: () => [
+        {
+          indicator: [
+            "风能利用率",
+            "故障损失率",
+            "检修损失率",
+            "弃风率",
+            "性能损失率",
+            "受累损失率",
+            "复位及时率",
+            "消缺及时率",
+            "状态转换率",
+          ],
+          data: [
+            {
+              value: [
+                44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    tabs: {
+      type: Array,
+      default: () => [
+        {
+          name: "发电量",
+          windData1: 1,
+          windData2: 14,
+        },
+        {
+          name: "故障损失电量",
+          windData1: 2,
+          windData2: 13,
+        },
+        {
+          name: "检修损失电量",
+          windData1: 3,
+          windData2: 12,
+        },
+        {
+          name: "性能未达标损失电量",
+          windData1: 4,
+          windData2: 11,
+        },
+        {
+          name: "受累损失电量",
+          windData1: 5,
+          windData2: 10,
+        },
+        {
+          name: "风能利用率",
+          windData1: 6,
+          windData2: 9,
+        },
+        {
+          name: "故障损失率",
+          windData1: 7,
+          windData2: 8,
+        },
+        {
+          name: "检修损失率",
+          windData1: 8,
+          windData2: 7,
+        },
+        {
+          name: "弃风率",
+          windData1: 9,
+          windData2: 6,
+        },
+        {
+          name: "性能损失率",
+          windData1: 10,
+          windData2: 5,
+        },
+        {
+          name: "受累损失率",
+          windData1: 11,
+          windData2: 4,
+        },
+        {
+          name: "复位及时率",
+          windData1: 12,
+          windData2: 3,
+        },
+        {
+          name: "消缺及时率",
+          windData1: 13,
+          windData2: 2,
+        },
+        {
+          name: "状态转换率",
+          windData1: 14,
+          windData2: 1,
+        },
+      ],
+    },
+    analyisDialog: {
+      type: Array,
+      default: () => [
+        {
+          title: "故障损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "检修损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "性能损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "限电损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "受累损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+      ],
+    },
+  },
+  methods: {
+    tooltip(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;
-			},
-		}
-	};
+      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;
+    },
+  },
+  mounted() {
+    this.chartData = this.radarValue;
+  },
+  watch: {
+    radarValue(res) {
+      this.chartData = res;
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.health-day-info {
-		.header {
-			display: flex;
-			width: 100%;
-			height: 40px;
-			line-height: 40px;
-			background: fade(@gray, 60);
-			color: @white;
+.health-day-info {
+  .header {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background: fade(@gray, 60);
+    color: @white;
 
-			.herder-info {
-				flex: 1 0 25%;
-				text-align: center;
-				font-size: @fontsize-s;
+    .herder-info {
+      flex: 1 0 25%;
+      text-align: center;
+      font-size: @fontsize-s;
 
-				&:last-child {
-					flex: 1 0 50%;
-				}
-			}
-		}
+      &:last-child {
+        flex: 1 0 50%;
+      }
+    }
+  }
 
-		.body {
-			display: flex;
+  .body {
+    display: flex;
 
-			.left {
-				flex: 0 0 50%;
+    .left {
+      flex: 0 0 50%;
 
-				display: flex;
-				flex-direction: column;
+      display: flex;
+      flex-direction: column;
 
-				.chart-body {
-					flex-grow: 1;
-					display: flex;
-					align-items: center;
-				}
-			}
+      .chart-body {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
 
-			.right {
-				flex: 0 0 50%;
-			}
-		}
-	}
+    .right {
+      flex: 0 0 50%;
+    }
+  }
+}
 </style>

+ 107 - 81
src/views/NewPages/alarm-center-1.vue

@@ -54,9 +54,9 @@
               popper-class="search-select"
               :options="cascaderOptions"
               :props="cascaderProps"
-              v-model="cascaderSel"
+              @change="getCascaderChange"
               collapse-tags
-              :clearable="true"
+              clearable
             ></el-cascader>
           </div>
         </div>
@@ -112,35 +112,27 @@
       custom-class="modal"
       :close-on-click-modal="false"
     >
-    <div class="searchForm">
-       <el-select
-        @change="searchTime(selectValue)"
-        class="inputs"
-        v-model="selectValue"
-        placeholder="请选择"
-      >
-        <el-option
-          v-for="item in timeoptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
+      <div class="searchForm">
+        <el-select
+          @change="searchTime(selectValue)"
+          class="inputs"
+          v-model="selectValue"
+          placeholder="请选择"
         >
-        </el-option>
-      </el-select>
-      <div class="choose">
-        <button class="btn"
-          @click="switchChange(60)"
-        >
-          等间隔
-        </button>
-        <button class="btn"
-          @click="switchChange(0)"
-        >
-          原始数据
-        </button>
+          <el-option
+            v-for="item in timeoptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <div class="choose">
+          <button class="btn" @click="switchChange(60)">等间隔</button>
+          <button class="btn" @click="switchChange(0)">原始数据</button>
+        </div>
       </div>
-    </div>
-     
+
       <multiple-y-line-chart-normal
         height="500px"
         :list="Analysis"
@@ -165,8 +157,8 @@ export default {
       chooseTime: [],
       wpvalue: "",
       wpid: "",
-      wtId:"",
-      descName:"",
+      wtId: "",
+      descName: "",
       AnalysisName: "",
       AnalysisUnit: "",
       Analysis: [
@@ -283,7 +275,19 @@ export default {
         new Date(new Date().setDate(new Date().getDate() - 1))
       ).formatDate("yyyy-MM-dd"),
       enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
-      tableData: {column: [{name: "风机编号",field: "name",},{name: "主轴温度温差大于8度",field: "v1",align: "left",slot: true,},{name: "浆叶角过小",field: "v2",align: "left",slot: true,},],data: [{name: "MG01_01",v1: {count: 12,time: 0,},},],},
+      tableData: {
+        column: [
+          { name: "风机编号", field: "name" },
+          {
+            name: "主轴温度温差大于8度",
+            field: "v1",
+            align: "left",
+            slot: true,
+          },
+          { name: "浆叶角过小", field: "v2", align: "left", slot: true },
+        ],
+        data: [{ name: "MG01_01", v1: { count: 12, time: 0 } }],
+      },
     };
   },
   created() {
@@ -359,16 +363,16 @@ export default {
                 value: [],
               },
             ];
-                      aKey1.forEach((keyEle,keyIndex)=>{
-            // console.log('keyindex:',res.data[keyIndex]);
-            aList1[keyIndex].title = res.data[keyIndex].name;
-            res.data[keyIndex].data.forEach((rEle)=>{
-              aList1[keyIndex].value.push({
-                text:new Date(rEle.ts).formatDate("hh:mm"),
-                value:rEle.doubleValue
-              })
-            })
-          })
+            aKey1.forEach((keyEle, keyIndex) => {
+              // console.log('keyindex:',res.data[keyIndex]);
+              aList1[keyIndex].title = res.data[keyIndex].name;
+              res.data[keyIndex].data.forEach((rEle) => {
+                aList1[keyIndex].value.push({
+                  text: new Date(rEle.ts).formatDate("hh:mm"),
+                  value: rEle.doubleValue,
+                });
+              });
+            });
             // aKey1.forEach((keyEle, keyIndex) => {
             //   res.data.forEach((rEle) => {
             //     rEle.data.forEach((tEle) => {
@@ -387,8 +391,8 @@ export default {
             let aKey2 = ["doubleValue", "doubleValue"];
             let aList2 = [
               {
-               title: "", 
-              //  yAxisIndex:"",
+                title: "",
+                //  yAxisIndex:"",
                 smooth: true,
                 value: [],
               },
@@ -425,16 +429,16 @@ export default {
             });
             that.AnalysisYAxises = yaxises1;
             console.log("AnalysisYAxises:", that.AnalysisYAxises);
-                    aKey2.forEach((keyEle,keyIndex)=>{
-            // console.log('keyindex:',res.data[keyIndex]);
-            aList2[keyIndex].title = res.data[keyIndex].name;
-            res.data[keyIndex].data.forEach((rEle)=>{
-              aList2[keyIndex].value.push({
-                text:new Date(rEle.ts).formatDate("hh:mm"),
-                value:rEle.doubleValue
-              })
-            })
-          })
+            aKey2.forEach((keyEle, keyIndex) => {
+              // console.log('keyindex:',res.data[keyIndex]);
+              aList2[keyIndex].title = res.data[keyIndex].name;
+              res.data[keyIndex].data.forEach((rEle) => {
+                aList2[keyIndex].value.push({
+                  text: new Date(rEle.ts).formatDate("hh:mm"),
+                  value: rEle.doubleValue,
+                });
+              });
+            });
             // res.data.forEach((rEle,rIndex)=>{
             //   console.log('rele:',rEle)
             // })
@@ -448,7 +452,7 @@ export default {
             //         text: new Date(tEle.ts).formatDate("hh:mm"),
             //         // value: tEle[keyEle],
             //         // value:res.data[keyIndex].data[tIndex].doubleValue
-                  
+
             //       });
             //     });
             //   });
@@ -515,16 +519,16 @@ export default {
             });
             that.AnalysisYAxises = yaxises2;
             console.log("AnalysisYAxises:", that.AnalysisYAxises);
-          aKey4.forEach((keyEle,keyIndex)=>{
-            // console.log('keyindex:',res.data[keyIndex]);
-            aList4[keyIndex].title = res.data[keyIndex].name;
-            res.data[keyIndex].data.forEach((rEle)=>{
-              aList4[keyIndex].value.push({
-                text:new Date(rEle.ts).formatDate("hh:mm"),
-                value:rEle.doubleValue
-              })
-            })
-          })
+            aKey4.forEach((keyEle, keyIndex) => {
+              // console.log('keyindex:',res.data[keyIndex]);
+              aList4[keyIndex].title = res.data[keyIndex].name;
+              res.data[keyIndex].data.forEach((rEle) => {
+                aList4[keyIndex].value.push({
+                  text: new Date(rEle.ts).formatDate("hh:mm"),
+                  value: rEle.doubleValue,
+                });
+              });
+            });
             // aKey4.forEach((keyEle, keyIndex) => {
             //   res.data.forEach((rEle) => {
             //     // aList4[keyIndex].yAxisIndex = keyIndex;
@@ -541,24 +545,39 @@ export default {
             // });
             that.Analysis = aList4;
             console.log("that.Analysis4:", that.Analysis);
-          }else if (res.data.length == 0) {
-             that.dialogVisible = false;
-                that.BASE.showMsg({
-          type: "warning",
-          msg: "暂无数据",
-        });
+          } else if (res.data.length == 0) {
+            that.dialogVisible = false;
+            that.BASE.showMsg({
+              type: "warning",
+              msg: "暂无数据",
+            });
           }
-
         },
       });
     },
+    getCascaderChange(res) {
+      this.cascaderSel=res || [];
+    },
     //切换数据类型
     switchChange(interval) {
-      if(interval == 0){
-        this.requestDetailData(this.wpvalue,this.startdate,this.enddate,0,this.wtId,this.descName)
-      }
-      else if(interval == 60){
-        this.requestDetailData(this.wpvalue,this.startdate,this.enddate,60,this.wtId,this.descName)
+      if (interval == 0) {
+        this.requestDetailData(
+          this.wpvalue,
+          this.startdate,
+          this.enddate,
+          0,
+          this.wtId,
+          this.descName
+        );
+      } else if (interval == 60) {
+        this.requestDetailData(
+          this.wpvalue,
+          this.startdate,
+          this.enddate,
+          60,
+          this.wtId,
+          this.descName
+        );
       }
       // this.switchFlag = !this.switchFlag;
       // this.selectValue = "60";
@@ -575,7 +594,14 @@ export default {
     },
     searchTime(values) {
       console.log("values:", values);
-      this.requestDetailData(this.wpvalue,this.startdate,this.enddate,values,this.wtId,this.descName)
+      this.requestDetailData(
+        this.wpvalue,
+        this.startdate,
+        this.enddate,
+        values,
+        this.wtId,
+        this.descName
+      );
       // let times = [];
       // this.chooseTime.forEach((item) => {
       //   times.push(dayjs(item).valueOf());
@@ -773,12 +799,12 @@ export default {
       }
     }
   }
-  .searchForm{
+  .searchForm {
     display: flex;
     margin-left: 36px;
-    .inputs{
+    .inputs {
       width: 15%;
-    margin-right: 18px;
+      margin-right: 18px;
     }
   }
 }

+ 33 - 23
src/views/NewPages/area-line-chart.vue

@@ -201,7 +201,7 @@ export default {
     units: {
       type: Array,
       // default: () => ["健康趋势", "风机健康状态数量"],
-       default: () => ["(实时功率)", "(风速)"],
+      default: () => ["(实时功率)", "(风速)"],
     },
     // 显示 legend
     showLegend: {
@@ -211,24 +211,31 @@ export default {
     // 颜色
     color: {
       type: Array,
-      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+      default: () => [
+        "#323E6F",
+        "#1DA0D7",
+        "#02BB4C",
+        "#DB5520",
+        "#EDB32F",
+        "#EDEB2F",
+      ],
     },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
     };
   },
   computed: {
-    legend () {
+    legend() {
       let data = [];
       this.lineData.forEach((value, index) => {
         data.push(value.text);
       });
       return data;
     },
-    xAxisData () {
+    xAxisData() {
       let data = [];
       if (this.lineData.length > 0)
         this.lineData[0].value.forEach((value, index) => {
@@ -236,7 +243,7 @@ export default {
         });
       return data;
     },
-    areaChartData () {
+    areaChartData() {
       let data = [];
       for (var i = 0; i < this.areaData.length; i++) {
         let item = this.areaData[i];
@@ -254,7 +261,7 @@ export default {
       }
       return data;
     },
-    areaMax () {
+    areaMax() {
       let max = 0;
       this.areaData.forEach((value) => {
         if (max < value.end) max = value.end;
@@ -263,7 +270,7 @@ export default {
     },
   },
   methods: {
-    renderItem (params, api) {
+    renderItem(params, api) {
       var start = api.coord([api.value(0)]);
       var end = api.coord([api.value(1)]);
       var height = api.size([0, 1])[1];
@@ -292,9 +299,7 @@ export default {
         }
       );
     },
-    initChart () {
-      console.log("units:",this.units)
-      console.log("areaData:",this.areaData)
+    initChart() {
       let that = this;
       let chart = echarts.init(this.$el);
 
@@ -336,15 +341,14 @@ export default {
         xAxis: [
           {
             type: "category",
-             name: this.units[2],
+            name: this.units[2],
             axisLabel: {
-              
               color: partten.getColor("gray"),
             },
             // axisLine: {
             //   show: false,
             // },
-               axisLine: {
+            axisLine: {
               type: "dashed",
               lineStyle: {
                 color: partten.getColor("gray"),
@@ -368,9 +372,10 @@ export default {
             },
           },
         ],
-        yAxis: [{
-           type: "value",
-        },
+        yAxis: [
+          {
+            type: "value",
+          },
           {
             type: "value",
             name: this.units[0],
@@ -400,6 +405,12 @@ export default {
             data: [this.areaData[0].name],
             axisLabel: { show: false },
           },
+          {
+            name: "风速",
+            type: "value",
+            min: 0,
+            max: 30,
+          },
         ],
         series: [],
       };
@@ -407,13 +418,12 @@ export default {
       // line data
       if (this.lineData.length > 0) {
         this.lineData.forEach((value, index) => {
-          console.log('valueTEXT:',value)
           option.series.push({
             name: value.text,
             type: "line",
             data: value.value,
             smooth: true, //平滑展示
-            yAxisIndex: 0,
+            yAxisIndex: value.yAxisIndex,
             // lineStyle: {
             //   color: partten.getColor("green"),
             // },
@@ -456,23 +466,23 @@ export default {
   emits: {
     areaClick: null,
   },
-  created () {
+  created() {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
       let that = this;
       let chart = this.initChart();
-      chart.on("click", function(e, p) {
+      chart.on("click", function (e, p) {
         if (e.seriesType == "custom") {
           that.$emit("areaClick", { data: e.data.exData });
         }
       });
     });
   },
-  updated () {
+  updated() {
     this.$nextTick(() => {
       this.initChart();
     });

+ 25 - 9
src/views/NewPages/dj1.vue

@@ -726,6 +726,7 @@
 
 <script>
 import AreaLineChart from "./area-line-chart.vue";
+// import AreaLineChart from "../../components/chart/line/multiple-y-line-chart-normal.vue";
 // import AreaLineChart from "../../components/chart/combination/area-line-chart.vue";
 // import MultipleBarLineChart1 from "./multiple-bar-line-chart.vue";
 import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
@@ -1070,23 +1071,21 @@ export default {
           let lostChartData = [
             {
               text: "实发功率",
-              value: [
-                {
-                  text: "1",
-                  value: 1,
-                },
-              ],
+              yAxisIndex: 0,
+              value: [],
             },
             {
               text: "保证功率",
+              yAxisIndex: 0,
               value: [],
             },
             {
               text: "风速",
+              yAxisIndex: 3,
               value: [],
             },
           ];
-          const lostChartUnit = ["实发功率", "保证功率", "风速", "状态"];
+          const lostChartUnit = ["实发功率", "保证功率", "风速"];
 
           keyArray.forEach((key, keyIndex) => {
             res.data.forEach((ele) => {
@@ -1416,13 +1415,30 @@ export default {
           };
 
           if (res.data.data) {
-			  mgtData.indicator = ["北", "北北西", "北西", "西北西", "西", "西南西", "南西", "南南西", "南", "南南东", "东南", "东南东","东", "东北东", "北东", "北北东"]
+            mgtData.indicator = [
+              "北",
+              "北北西",
+              "北西",
+              "西北西",
+              "西",
+              "西南西",
+              "南西",
+              "南南西",
+              "南",
+              "南南东",
+              "东南",
+              "东南东",
+              "东",
+              "东北东",
+              "北东",
+              "北北东",
+            ];
             res.data.data.forEach((ele) => {
               // mgtData.indicator.push(ele.name);
               mgtData.data[0].value.push(ele.data1);
             });
           }
-			mgtData.data[0].value.reverse();
+          mgtData.data[0].value.reverse();
           that[dataKey] = mgtData;
         },
       });

Різницю між файлами не показано, бо вона завелика
+ 5268 - 0
src/views/WindSite/components/generalappearance/hzj.vue


BIN
src/views/WindSite/components/generalappearance/zm_mw.png


+ 4 - 1
src/views/WindSite/pages/GeneralAppearance.vue

@@ -57,6 +57,7 @@
 			<PL1 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL01_GC'" />
 			<PL2 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL02_GC'" />
 			<MCH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MCH_GDC'" />
+			<HZJ class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'HZJ_GDC'" />
 		</div>
 	</div>
 </template>
@@ -73,6 +74,7 @@
 	import PL1 from "../components/generalappearance/pl1.vue";
 	import PL2 from "../components/generalappearance/pl2.vue";
 	import MCH from "../components/generalappearance/mch.vue";
+	import HZJ from "../components/generalappearance/hzj.vue";
 	export default {
 		// 名称
 		name: "GeneralAppearance",
@@ -88,7 +90,8 @@
 			DWK,
 			PL1,
 			PL2,
-			MCH
+			MCH,
+			HZJ
 		},
 		// 数据
 		data() {

+ 223 - 270
src/views/warn/czjl.vue

@@ -1,279 +1,232 @@
 <template>
-  <div class="knowledge-2">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站:</div>
-          <div class="search-input">
-            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getWt(wpId, true); }">
-              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">风机:</div>
-          <div class="search-input">
-            <el-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
-              <el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">类型:</div>
-          <div class="search-input">
-            <el-select v-model="type" clearable placeholder="请选择" popper-class="select">
-              <el-option v-for="item in typeArray" :key="item.id" :value="item.id" :label="item.name" />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="query-item">
-            <div class="lable">开始日期:</div>
-            <div class="search-input">
-              <el-date-picker v-model="value1" @change="BeginChange(value1)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-            </div>
-          </div>
-          <div class="query-item">
-            <div class="lable">结束日期:</div>
-            <div class="search-input">
-              <el-date-picker v-model="value2" @change="EndChange(value2)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-              <div class="unit svg-icon svg-icon-gray">
-                <svg-icon :svgid="''" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="query-actions" style="margin-right: 1500px">
-        <button class="btn green" @click="onClickSearch">查询的</button>
-      </div>
-    </div>
-    <div>
-      <ComTable :data="tableData" height="85vh"></ComTable>
-    </div>
-  </div>
+	<div class="knowledge-2">
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">场站:</div>
+					<div class="search-input">
+						<el-select v-model="wpId" clearable placeholder="请选择" popper-class="select"
+							@change="(wpId) => { getWt(wpId, true); }">
+							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">风机:</div>
+					<div class="search-input">
+						<el-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
+							<el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="query-item">
+						<div class="lable">开始日期:</div>
+						<div class="search-input">
+							<el-date-picker v-model="value1" type="datetimerange" range-separator="至"
+								start-placeholder="开始日期" end-placeholder="结束日期">
+							</el-date-picker>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="query-actions" style="margin-right: 1500px">
+				<button class="btn green" @click="requestSafeList">查询</button>
+				<button class="btn green" @click="exportCsv">导出</button>
+			</div>
+		</div>
+		<el-row :type="'flex'" class="content">
+			<el-col :span="24">
+				<ComTable :data="tableData" height="85vh"></ComTable>
+			</el-col>
+		</el-row>
+	</div>
 </template>
 
 <script>
-import ComTable from "@com/coms/table/table.vue";
+	import ComTable from "@com/coms/table/table.vue";
+	import Papa from 'papaparse';
+	export default {
+		components: {
+			ComTable,
+			Papa
+		},
+		data() {
+			return {
+				value1: [],
+				wpId: "",
+				wpArray: [],
+				wpName: "",
+				wtId: "",
+				wtIdWait:1,
+				tableData: {
+					column: [{
+							name: "编号",
+							field: "index",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "转换时间",
+							field: "zhsj",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "操作类型",
+							field: "ConversionName",
+							is_num: false,
+							is_light: false,
+						}
+					],
+					data: [],
+				},
+			};
+		},
+		created() {
+			this.getWp();
+			this.value1 = [new Date((new Date() - 3600 * 1000 * 24 * 30)).formatDate("yyyy-MM-dd"),new Date().formatDate("yyyy-MM-dd")];
+		},
+		methods: {
+			exportCsv() {
+				let data = this.tableData;
+				let arrName = [];
+				let dataArr = [];
+				data.column.forEach(item =>{
+					arrName.push(item.name)
+				})
+				data.data.forEach(ele=>{
+					let i = 0;
+					let obj = {};
+					for(var j in ele){
+						obj[arrName[i++]] = ele[j]
+					}
+					dataArr.push(obj)
+				})
+				var csv = Papa.unparse(dataArr);
+				//定义文件内容,类型必须为Blob 否则createObjectURL会报错
+				let content = new Blob([csv]);
+				//生成url对象
+				let urlObject = window.URL || window.webkitURL || window;
+				let url = urlObject.createObjectURL(content);
+				//生成<a></a>DOM元素
+				let el = document.createElement("a");
+				//链接赋值
+				el.href = url;
+				el.download = "操作类型.cvs";
+				//必须点击否则不会下载
+				el.click();
+				//移除链接释放资源
+				urlObject.revokeObjectURL(url);
+			},
+			formatDate(date) {
+			  var date = new Date(date);
+			  var YY = date.getFullYear() + '-';
+			  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+			  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
+			  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+			  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+			  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+			  return YY + MM + DD +" "+hh + mm + ss;
+			},
+			// 获取风场
+			getWp() {
+				let that = this;
+				that.API.requestData({
+					baseURL: "http://10.155.32.4:9001",
+					subUrl: "benchmarking/wplist",
+					success(res) {
+						that.wpArray = res.data;
+						that.wpId = res.data[0].id;
+						that.wpName = res.data[0].wpName;
+						that.getWt(that.wpId);
+					}
+				});
+			},
+			// 获取风机
+			getWt(wpid) {
+				let that = this;
+				if (that.wpId) {
+					that.API.requestData({
+						method: "GET",
+						baseURL: "http://10.155.32.4:9001",
+						subUrl: "benchmarking/wtList",
+						data: {
+							wpid
+						},
+						success(res) {
+							that.wtArray = res.data;
+							that.wtId = res.data[0].id;
+						}
+					});
+				}
+			},
+			// 获取停机事件
+			requestSafeList(wpId,wtid) {
+				let that = this;
+				if(wpId && wtid){
+					that.wpId = wpId;
+					that.wtid = wtid;
+				}
+				if(typeof that.value1[0].valueOf() != 'string'){
+					that.value1[0] = that.formatDate(that.value1[0].valueOf())
+				}
+				if(typeof that.value1[1].valueOf() != 'string'){
+					that.value1[1] = that.formatDate(that.value1[1].valueOf())
+				}
+				let data = {
+					WindPowerStation: that.wpId,
+					wtid:that.wtid,
+					beginDate: that.value1[0].valueOf(),
+					endDate: that.value1[1].valueOf(),
+				};
+				that.API.requestData({
+					showLoading:true,
+					subUrl: "/operationrecord/czlb",
+					data,
+					success(res) {
+						if (res.code == 200) {
+							that.tableData.data = [];
+							if (res.data.length) {
+								let data = res.data;
+								for (var i = 0; i < data.length; i++) {
+									let obj = {
+										index: i+1,
+										zhsj: data[i].zhsj,
+										ConversionName: data[i].ConversionName,
+									};
+									that.tableData.data.push(obj);
+								}
+							}
 
-export default {
-  components: { ComTable },
-  data () {
-    return {
-      value1: "",
-      value2: "",
-      wpId: "",
-      wpArray: [],
-      wpName: "",
-      wtId: "",
-      type: "",
-      typeArray: [
-
-        {
-          id: 4,
-          name: '维护'
-        },
-        {
-          id: 2,
-          name: '故障'
-        }],
-      tableData: {
-        column: [
-          {
-            name: "场站",
-            field: "wpName",
-            is_num: true,
-            is_light: false,
-          },
-          {
-            name: "机组",
-            field: "wtName",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "开始时刻",
-            field: "stopTime",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "结束时刻",
-            field: "startTime",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "停机小时数(h)",
-            field: "stopHours",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "状态",
-            field: "statusName",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "停机类型",
-            field: "warnDesc",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "损失电量(kWh)",
-            field: "lossPower",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "报警信息",
-            field: "handleWay",
-            is_num: false,
-            is_light: false,
-          },
-        ],
-        data: [],
-      },
-    };
-  },
-  created () {
-    // this.requestSafeList();
-    this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
-    this.value2 = this.getTime(2);
-    this.getWp();
-    this.requestSafeList();
-  },
-  methods: {
-    getTime (val) { //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
-      var date = new Date();
-      var year = date.getFullYear(),
-        month = date.getMonth() + 1,
-        day = date.getDate();
-      month >= 1 && month <= 9 ? (month = '0' + month) : '';
-      day >= 0 && day <= 9 ? (day = '0' + day) : '';
-      var begin = year + '-' + month + '-01';
-      var end = year + '-' + month + '-' + day;
-      if (val == 1) {
-        return begin;
-      } else if (val == 2) {
-        return end;
-      }
-    },
-    // 获取风场
-    getWp (reGetWp) {
-      let that = this;
-      that.API.requestData({
-        baseURL: "http://10.155.32.4:9001",
-        subUrl: "benchmarking/wplist",
-        success (res) {
-          that.wpArray = res.data;
-          that.wpId = res.data[0].id;
-          that.wpName = res.data[0].wpName;
-          that.getWt(that.wpId, reGetWp);
-        }
-      });
-    },
-
-    // 获取风机
-    getWt (wpid, reGetWp) {
-      let that = this;
-      if (that.wpId) {
-        that.API.requestData({
-          method: "GET",
-          baseURL: "http://10.155.32.4:9001",
-          subUrl: "benchmarking/wtList",
-          data: {
-            wpid
-          },
-          success (res) {
-            that.wtArray = res.data;
-            // that.wtId = res.data[0].id;
-          }
-        });
-      }
-    },
-    BeginChange (vl) {
-      this.value1 = vl;
-    },
-    EndChange (vl) {
-      this.value2 = vl;
-    },
-    typeChange (vl) {
-      this.type = vl;
-    },
-    // 搜索按钮
-    onClickSearch () {
-      this.requestSafeList();
-    },
-    // 获取停机事件
-    requestSafeList () {
-      let that = this;
-
-      let data = {
-        tablepar: {
-          pageNum: 1,
-          pageSize: 1000,
-        },
-        beginDate: that.value1,
-        endDate: that.value2,
-        wpId: that.wpId,
-      };
-
-      if (that.wtId != '') data.wtId = that.wtId;
-      if (that.type != '') data.type = that.type;
-
-      this.API.requestData({
-        method: "POST",
-        subUrl: "/event/getShutdownevent",
-        data,
-        success (res) {
-          if (res.code == 200) {
-            that.tableData.data = [];
-            if (res.data.list.length) {
-              let data = res.data.list;
-              for (var i = 0; i < data.length; i++) {
-                let obj = {
-                  wpName: data[i].wpName,
-                  wtName: data[i].wtName,
-                  stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-
-                  stopHours: data[i].stopHours,
-                  statusName: data[i].statusName,
-                  warnDesc: data[i].warnDesc,
-                  lossPower: data[i].lossPower,
-                  handleWay: data[i].handleWay,
-
-                };
-                if (data[i].startTime) obj.startTime = new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss");
-                that.tableData.data.push(obj);
-              }
-            }
-
-          }
-        },
-      });
-    },
-  },
-};
+						}
+					},
+				});
+			},
+		},
+		watch:{
+			wtId(e){
+				if(this.wtIdWait == 1){//这里只让执行一次
+					this.requestSafeList(this.wpId,e);
+					this.wtIdWait = 2;
+				}
+			}
+		}
+	};
 </script>
 
 <style lang="less" scope>
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.knowledge-2 {
-  .el-select {
-    width: 200px;
-  }
-  .el-input {
-    width: 200px;
-  }
-}
+	@titleGray: #9ca5a8;
+	@rowGray: #606769;
+	@darkBack: #536268;
+
+	.knowledge-2 {
+		.el-select {
+			width: 200px;
+		}
+
+		.el-input {
+			width: 200px;
+		}
+	}
 </style>

+ 59 - 107
src/views/warn/ztzhjl.vue

@@ -20,47 +20,25 @@
 					</div>
 				</div>
 				<div class="query-item">
-					<div class="lable">类型:</div>
-					<div class="search-input">
-						<el-select v-model="type" clearable placeholder="请选择" popper-class="select">
-							<el-option v-for="item in typeArray" :key="item.id" :value="item.id" :label="item.name" />
-						</el-select>
-					</div>
-				</div>
-				<div class="query-item">
 					<div class="query-item">
 						<div class="lable">开始日期:</div>
 						<div class="search-input">
-							<el-date-picker v-model="value1" @change="BeginChange(value1)" type="date"
-								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-							</el-date-picker>
-						</div>
-					</div>
-					<div class="query-item">
-						<div class="lable">结束日期:</div>
-						<div class="search-input">
-							<el-date-picker v-model="value2" @change="EndChange(value2)" type="date"
-								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+							<el-date-picker v-model="value1" type="datetimerange" range-separator="至"
+								start-placeholder="开始日期" end-placeholder="结束日期">
 							</el-date-picker>
-							<div class="unit svg-icon svg-icon-gray">
-								<svg-icon :svgid="''" />
-							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 			<div class="query-actions" style="margin-right: 1500px">
-				<button class="btn green" @click="onClickSearch">查询</button>
+				<button class="btn green" @click="requestSafeList">查询</button>
 				<button class="btn green" @click="exportCsv">导出</button>
 			</div>
 		</div>
 		<el-row :type="'flex'" class="content">
-			<el-col :span="12">
+			<el-col :span="24">
 				<ComTable :data="tableData" height="85vh"></ComTable>
 			</el-col>
-			<el-col :span="12">
-
-			</el-col>
 		</el-row>
 	</div>
 </template>
@@ -75,24 +53,12 @@
 		},
 		data() {
 			return {
-				value1: "",
-				value2: "",
+				value1: [],
 				wpId: "",
 				wpArray: [],
 				wpName: "",
 				wtId: "",
-				type: "",
-				typeArray: [
-
-					{
-						id: 4,
-						name: '维护'
-					},
-					{
-						id: 2,
-						name: '故障'
-					}
-				],
+				wtIdWait:1,
 				tableData: {
 					column: [{
 							name: "编号",
@@ -129,11 +95,8 @@
 			};
 		},
 		created() {
-			// this.requestSafeList();
-			this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
-			this.value2 = this.getTime(2);
 			this.getWp();
-			this.requestSafeList();
+			this.value1 = [new Date((new Date() - 3600 * 1000 * 24 * 30)).formatDate("yyyy-MM-dd"),new Date().formatDate("yyyy-MM-dd")];
 		},
 		methods: {
 			exportCsv() {
@@ -161,29 +124,24 @@
 				let el = document.createElement("a");
 				//链接赋值
 				el.href = url;
-				el.download = "文件导出.cvs";
+				el.download = "状态转换记录.cvs";
 				//必须点击否则不会下载
 				el.click();
 				//移除链接释放资源
 				urlObject.revokeObjectURL(url);
 			},
-			getTime(val) { //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
-				var date = new Date();
-				var year = date.getFullYear(),
-					month = date.getMonth() + 1,
-					day = date.getDate();
-				month >= 1 && month <= 9 ? (month = '0' + month) : '';
-				day >= 0 && day <= 9 ? (day = '0' + day) : '';
-				var begin = year + '-' + month + '-01';
-				var end = year + '-' + month + '-' + day;
-				if (val == 1) {
-					return begin;
-				} else if (val == 2) {
-					return end;
-				}
+			formatDate(date) {
+			  var date = new Date(date);
+			  var YY = date.getFullYear() + '-';
+			  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+			  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
+			  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+			  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+			  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+			  return YY + MM + DD +" "+hh + mm + ss;
 			},
 			// 获取风场
-			getWp(reGetWp) {
+			getWp() {
 				let that = this;
 				that.API.requestData({
 					baseURL: "http://10.155.32.4:9001",
@@ -192,13 +150,12 @@
 						that.wpArray = res.data;
 						that.wpId = res.data[0].id;
 						that.wpName = res.data[0].wpName;
-						that.getWt(that.wpId, reGetWp);
+						that.getWt(that.wpId);
 					}
 				});
 			},
-
 			// 获取风机
-			getWt(wpid, reGetWp) {
+			getWt(wpid) {
 				let that = this;
 				if (that.wpId) {
 					that.API.requestData({
@@ -210,62 +167,49 @@
 						},
 						success(res) {
 							that.wtArray = res.data;
-							// that.wtId = res.data[0].id;
+							that.wtId = res.data[0].id;
 						}
 					});
 				}
 			},
-			BeginChange(vl) {
-				this.value1 = vl;
-			},
-			EndChange(vl) {
-				this.value2 = vl;
-			},
-			typeChange(vl) {
-				this.type = vl;
-			},
-			// 搜索按钮
-			onClickSearch() {
-				this.requestSafeList();
-			},
 			// 获取停机事件
-			requestSafeList() {
+			requestSafeList(wpId,wtid) {
 				let that = this;
-
+				if(wpId && wtid){
+					that.wpId = wpId;
+					that.wtid = wtid;
+				}
+				if(typeof that.value1[0].valueOf() != 'string'){
+					that.value1[0] = that.formatDate(that.value1[0].valueOf())
+				}
+				if(typeof that.value1[1].valueOf() != 'string'){
+					that.value1[1] = that.formatDate(that.value1[1].valueOf())
+				}
 				let data = {
-					tablepar: {
-						pageNum: 1,
-						pageSize: 1000,
-					},
-					beginDate: that.value1,
-					endDate: that.value2,
-					wpId: that.wpId,
+					WindPowerStation: that.wpId,
+					wtid:that.wtid,
+					beginDate: that.value1[0].valueOf(),
+					endDate: that.value1[1].valueOf(),
 				};
-
-				if (that.wtId != '') data.wtId = that.wtId;
-				if (that.type != '') data.type = that.type;
-
-				this.API.requestData({
-					method: "POST",
-					subUrl: "/event/getShutdownevent",
+				that.API.requestData({
+					showLoading:true,
+					subUrl: "/operationrecord/zhlb",
 					data,
 					success(res) {
 						if (res.code == 200) {
 							that.tableData.data = [];
-							if (res.data.list.length) {
-								let data = res.data.list;
-								// for (var i = 0; i < data.length; i++) {
-								// 	let obj = {
-								// 		index: i,
-								// 		time: data[i].,
-								// 		qType: data[i].,
-								// 		hType: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-								// 		glfj: data[i].,
-								// 	};
-								// 	if (data[i].startTime) obj.startTime = new Date(data[i].startTime).formatDate(
-								// 		"yyyy-MM-dd hh:mm:ss");
-								// 	that.tableData.data.push(obj);
-								// }
+							if (res.data.length) {
+								let data = res.data;
+								for (var i = 0; i < data.length; i++) {
+									let obj = {
+										index: i+1,
+										time: data[i].zhsj,
+										qType: data[i].beforeConversionName,
+										hType: data[i].AfterConversionName,
+										glfj: data[i].wtid,
+									};
+									that.tableData.data.push(obj);
+								}
 							}
 
 						}
@@ -273,6 +217,14 @@
 				});
 			},
 		},
+		watch:{
+			wtId(e){
+				if(this.wtIdWait == 1){//这里只让执行一次
+					this.requestSafeList(this.wpId,e);
+					this.wtIdWait = 2;
+				}
+			}
+		}
 	};
 </script>