5-21 健康管理

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve && webpack-dev-server --open",
+    "server": "vue-cli-service serve && webpack-dev-server --open",
     "dev": "vue-cli-service build --mode development",
     "test": "vue-cli-service build --mode test",
     "build": "vue-cli-service build --mode production"

src/assets/css/healthManagement/curveDeviation.scss

@@ -0,0 +1,46 @@
+.searchBox{
+  width: 100%;
+  padding: 20px 0;
+}
+
+.chartBox{
+  width: 100%;
+  height: 500px;
+  position: relative;
+
+  .chartDom{
+    width: 100%;
+    height: 100%;
+  }
+
+  &>.tips{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+  }
+
+  .cMove{
+    letter-spacing: 5px;
+    text-align: center;
+    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-background-size: 200% 100%;
+    -webkit-animation: colorMove 2s infinite linear;
+  }
+
+  @-webkit-keyframes colorMove {
+      0% {
+        background-position: 0 0;
+      }
+      100% {
+        background-position: -100% 0;
+      }
+  }
+}

src/assets/css/healthManagement/healthManagement.scss

@@ -25,4 +25,41 @@
 }
 .mar {
   margin-left: 6% !important;
-}
+}
+
+.to{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tree{
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+.recommendBox{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .recommendItem{
+    width: 280px;
+    background:#fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    box-shadow: rgb(0 0 0 / 88%) 0px 2px 4px, rgb(0 0 0 / 4%) 0px 0px 6px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    .inline{
+      width: calc(100% - 20px);
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}

src/assets/js/healthManagement/curveDeviation.js

@@ -0,0 +1,375 @@
+import * as echarts from "echarts";
+import { Message } from 'element-ui';
+export default {
+  data () {
+    return {
+      form: {
+        wpId: "",
+        recorddate: this.Moment(new Date()).format('yyyy-MM-DD')
+      },
+      pageNum: 1,
+      pageSize: 10,
+      orderByColumn: "",
+      isAsc: "asc",
+      wpList: [],
+      tableData: [],
+      dialogTitle: "趋势图",
+      chartsLoading: true,
+      chartDialogShow: false,
+      noLineChartsData: false,
+      pickerOptions: {
+        disabledDate (time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick (picker) {
+            picker.$emit('pick', new Date());
+          }
+        }, {
+          text: '昨天',
+          onClick (picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', date);
+          }
+        }, {
+          text: '一周前',
+          onClick (picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', date);
+          }
+        }]
+      }
+    }
+  },
+
+  mounted () {
+    let that = this;
+    that.$nextTick(() => {
+      that.getWpList();
+    });
+  },
+
+  methods: {
+    // 获取风场列表
+    getWpList () {
+      this.API.get("powercompare/windfarmAllAjax").then(res => {
+        if (res.data.length) {
+          this.wpList = res.data;
+          this.form.wpId = res.data[0].id;
+          this.getTableDate(res.data[0].id);
+        }
+      });
+    },
+
+    // 选择风场
+    changeWpId (wpId) {
+      this.getTableDate(wpId);
+    },
+
+    // 获取列表数据
+    getTableDate (wpId) {
+      if (this.form.recorddate) {
+        let params = new URLSearchParams();
+        params.append("wpId", wpId);
+        params.append("recorddate", this.form.recorddate);
+        params.append("pageNum", this.pageNum);
+        params.append("pageSize", this.pageSize);
+        params.append("orderByColumn", this.orderByColumn);
+        params.append("isAsc", this.isAsc);
+        this.API.post("wtcurve/windTurbineCurveList", params).then(res => {
+          this.tableData = res.data || [];
+        });
+      }
+    },
+
+    // 渲染图表
+    renderCharts (chartType, wtId) {
+      this.chartDialogShow = true;
+
+      this.$nextTick(() => {
+        document.getElementById("curveDeviationChart").removeAttribute("_echarts_instance_");
+        let chartDom = document.getElementById('curveDeviationChart');
+        let myChart = echarts.init(chartDom);
+        let option;
+        if (chartType === 'zxt') {
+          // 折线图
+          this.dialogTitle = '曲线趋势图';
+          let params = new URLSearchParams();
+          params.append("wtId", wtId);
+          params.append("recorddate", this.form.recorddate);
+          params.append("type", 'sjbz');
+          this.API.post_L('leaderboard/getCurvechatAjax', params).then(res => {
+            this.chartsLoading = false;
+            if (res.data.datas.length) {
+              let xAxisData = []; // x轴标题
+              let sjLineData = []; // 实际功率数据
+              let bzLineData = []; // 保证功率数据
+
+              res.data.datas.forEach(ele => {
+                xAxisData.push('风速:' + ele.value1);
+                sjLineData.push(ele.value2);
+                bzLineData.push(ele.value3);
+              });
+
+              option = {
+                title: {
+                  show: true,
+                  text: '单机区间曲线偏差率',
+                  x: "center",
+                  y: "top",
+                  textAlign: "center",
+                  padding: [5, 0, 5, 0],
+                  textStyle: {
+                    fontSize: 18,
+                    color: '#333'
+                  }
+                },
+                xAxis: {
+                  type: 'category',
+                  data: xAxisData
+                },
+                yAxis: {
+                  type: 'value'
+                },
+                dataZoom: [{
+                  type: 'slider',
+                  show: true,
+                  xAxisIndex: [0],
+                  start: 0,
+                  end: 100
+                },
+                {
+                  type: 'slider',
+                  show: true,
+                  yAxisIndex: [0],
+                  left: '92%',
+                  start: 0,
+                  end: 100
+                },
+                {
+                  type: 'inside',
+                  xAxisIndex: [0],
+                  start: 0,
+                  end: 100
+                },
+                {
+                  type: 'inside',
+                  yAxisIndex: [0],
+                  start: 0,
+                  end: 100
+                }],
+                series: [{
+                  data: sjLineData,
+                  type: 'line',
+                  smooth: true,
+                  // itemStyle: {
+                  //   normal: {
+                  //     color: '#275F82', //改变折线点的颜色
+                  //     lineStyle: {
+                  //       color: '#1890ff' //改变折线颜色
+                  //     }
+                  //   }
+                  // }
+                }, {
+                  data: bzLineData,
+                  type: 'line',
+                  smooth: true
+                }],
+                tooltip: {
+                  trigger: 'axis',
+                  axisPointer: {
+                    type: 'cross',
+                    label: {
+                      backgroundColor: '#6a7985'
+                    }
+                  }
+                },
+                toolbox: {
+                  show: true,
+                  x: '78%',
+                  y: '0.5%',
+                  feature: {
+                    dataZoom: {
+                      yAxisIndex: 'none'
+                    }, //区域缩放，区域缩放还原
+                    dataView: {
+                      readOnly: false
+                    }, //数据视图
+                    magicType: {
+                      type: ['bar', 'line']
+                    },  //切换为柱状图，切换为折线图
+                    restore: {},  //还原
+                    saveAsImage: {}   //保存为图片
+                  }
+                }
+              };
+
+              option && myChart.setOption(option);
+            } else {
+              this.noLineChartsData = true;
+              Message.warning('所选日期之内暂无数据，请重试')
+            }
+          });
+
+        } else {
+          // 散点图
+          this.dialogTitle = '散点趋势图';
+          let params = new URLSearchParams();
+          params.append("recorddate", this.form.recorddate);
+          params.append("wtId", wtId);
+          this.API.post_L('wtcurve/scatterWtByDayAjax', params).then(res => {
+            this.chartsLoading = false;
+            let seriesDate = res.data.scatter; // 散点图数据
+            let dataLine = res.data.line; // 折线图数据
+            let mean = 0; // 基准线
+
+            res.data.scatter.forEach(pEle => {
+              pEle.forEach((cEle, cIndex) => {
+                if (cIndex) mean += cEle;
+              });
+            });
+
+            mean = (mean / res.data.scatter.length).toFixed(2);
+
+            option = {
+              title: {
+                show: true,
+                text: '风机功率风速排布情况',
+                x: "center",
+                y: "top",
+                textAlign: "center",
+                padding: [5, 0, 5, 0],
+                textStyle: {
+                  fontSize: 18,
+                  color: '#333'
+                }
+              },
+              xAxis: {},
+              yAxis: {},
+              dataZoom: [{
+                type: 'slider',
+                show: true,
+                xAxisIndex: [0],
+                start: 0,
+                end: 100
+              },
+              {
+                type: 'slider',
+                show: true,
+                yAxisIndex: [0],
+                left: '92%',
+                start: 0,
+                end: 100
+              },
+              {
+                type: 'inside',
+                xAxisIndex: [0],
+                start: 0,
+                end: 100
+              },
+              {
+                type: 'inside',
+                yAxisIndex: [0],
+                start: 0,
+                end: 100
+              }],
+              series: [{
+                name: ' ',
+                type: 'line',
+                symbol: 'none',
+                smooth: 0.3,
+                color: ['#87CEFA'],
+                data: dataLine,
+                lineStyle: {
+                  normal: {
+                    width: 5
+                  }
+                }
+              }, {
+                symbolSize: 5,
+                data: seriesDate,
+                type: 'scatter',
+                color: ['#FF7F50'],
+                markLine: {
+                  symbol: "none",
+                  /*symbol:"none",               //去掉警戒线最后面的箭头
+                  label:{
+                      position:"end"   ,       //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  },*/
+                  data: [{
+                    silent: false,             //鼠标悬停事件  true没有，false有
+                    lineStyle: {               //警戒线的样式  ，虚实  颜色
+                      type: "solid",
+                      color: "#3398DB",
+                    },
+                    label: {
+                      position: 'start',
+                      formatter: function (res) {
+                        return '功率平均值:' + res.value;
+                      }
+                    },
+                    yAxis: mean         // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
+                  }]
+                },
+                markPoint: {
+                  label: {
+                    show: true,
+                    position: "inside",
+                    distance: 7,
+                    offset: [1, 1],
+                    formatter: '{b}: {c}'
+                  },
+                  data: [{
+                    name: '最大值',
+                    type: 'max'
+                  }, {
+                    name: '最小值',
+                    type: 'min'
+                  }]
+                }
+              }],
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'cross',
+                  label: {
+                    backgroundColor: '#6a7985'
+                  }
+                }
+              },
+              toolbox: {
+                show: true,
+                x: '83.2%',
+                y: '0.5%',
+                feature: {
+                  dataZoom: {
+                    yAxisIndex: 'none'
+                  }, //区域缩放，区域缩放还原
+                  dataView: {
+                    readOnly: false
+                  }, //数据视图
+                  magicType: {
+                    type: []
+                  },
+                  restore: {},  //还原
+                  saveAsImage: {}   //保存为图片
+                }
+              }
+            };
+
+            option && myChart.setOption(option);
+
+          });
+        }
+      });
+    },
+
+    // index渲染函数
+    indexMethod (index) {
+      return index + 1;
+    },
+  }
+};

src/assets/js/healthManagement/healthManagement.js

@@ -2,6 +2,13 @@ import * as echarts from "echarts";
 export default {
   data() {
     return {
+      treeData:[],
+      tree: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      loading_line:false,
       fj: "",
       fc: "MHS_FDC",
       Date1: "",
@@ -21,6 +28,7 @@ export default {
       dialogTableVisible_2: false,
       dialogTableVisible_3: false,
       dialogTableVisible_sh: false,
+      dialogTableVisible_ls:false,
       jdt: 1,
       jdt_2: 5,
       jdt_3: 1,
@@ -103,6 +111,7 @@ export default {
       if (this.activeName == "serial_1") {
         this.weekfitness();
       } else if (this.activeName == "serial_2") {
+        this.$store.commit("loadingStore",true);
         this.weekfitness();
         this.recommenConfirmedList();
       } else if (this.activeName == "serial_3") {
@@ -132,33 +141,38 @@ export default {
       return this.BASE.getBzDate(date,0);
     },
     async weekfitness() {
+      let _this = this;
+      this.loading_line = true;
       var digital = new URLSearchParams();
       digital.append("wpId", "0");
       digital.append("type", 2);
-      const weekDateList = await this.API.post(
+      const {data} = await this.API.post(
         "/recommen/findAllChartjz",
         digital
       );
       if (this.activeName == "serial_1") {
-        this.draw_fitnessRegulate(weekDateList.data);
+        this.draw_fitnessRegulate(data);
       } else if (this.activeName == "serial_2") {
-        this.draw_fitnessRegulate_2(weekDateList.data);
+        this.draw_fitnessRegulate_2(data);
       }
+      this.loading_line = false;
       this.$store.commit("loadingStore",false);
     },
     async monthfitness() {
+      this.loading_line = true;
       var digital = new URLSearchParams();
       digital.append("wpId", "0");
       digital.append("type", 3);
-      const weekDateList = await this.API.post(
+      const {data} = await this.API.post(
         "/recommen/findAllChartjz",
         digital
       );
       if (this.activeName == "serial_1") {
-        this.draw_fitnessRegulate(weekDateList.data);
+        this.draw_fitnessRegulate(data);
       } else if (this.activeName == "serial_2") {
-        this.draw_fitnessRegulate_2(weekDateList.data);
+        this.draw_fitnessRegulate_2(data);
       }
+      this.loading_line = false;
     },
     affirm_all_check() {
       this.$confirm("此操作将无法撤回, 是否继续?", "提示", {
@@ -177,7 +191,7 @@ export default {
         });
     },
     fj_all_list(){
-      this.$router.push({path:"/healthList"});
+      this.$router.push({path:"/healthList"})
     },
     async affirm_all() {
       var digital = new URLSearchParams();
@@ -188,7 +202,7 @@ export default {
       } else if (this.contraryName == "contrary_3") {
         digital.append("typeid", 3);
       }
-
+      debugger
       const confir = await this.API.post("/recommen/confirpushAll", digital);
       if (confir.data.code == 200 && this.contraryName == "contrary_1") {
         this.Recommend.splice(0);
@@ -330,7 +344,6 @@ export default {
       await this.API.post(
         "/recommen/recommenConfirmedList"
       ).then((res)=>{
-        debugger
         this.Confirmed = res.data;
       });
       
@@ -432,14 +445,36 @@ export default {
       this.draw_shouhuan();
     },
     async Click_lscx_ywc(rname){
-      // this.LocationTree = [];
-      // var digital = new URLSearchParams();
-      // digital.append("wtId", rname.wtid);
-      // const LocationTree = await this.$http.post(
-      //   "/recommen/findLocationTreeByWtId",
-      //   digital
-      // );
-      // this.LocationTree = unfinishedList.data.data;
+      
+      const {wtid} = rname;
+      var digital = new URLSearchParams();
+      digital.append("wtId", wtid);
+      await this.API.post(
+        "/recommen/findLocationTreeByWtId",
+        digital
+      ).then((res)=>{
+        debugger
+        this.tree = res.data;
+        console.log(this.tree+"---")
+      });
+      this.dialogTableVisible_ls = true;
+    },
+    handleNodeClick(data) {
+      this.treeData = [];
+      const {id} = data;
+      var digital1 = new URLSearchParams();
+      digital1.append("pageNum", 1);
+      digital1.append("pageSize", 10);
+      digital1.append("orderByColumn", "");
+      digital1.append("isAsc", "asc");
+      digital1.append("location", id);
+      this.API.post(
+        "/recommen/findLocationTreeByWtId",
+        digital1
+      ).then((res)=>{
+        debugger
+        this.treeData = res.data;
+      });
     },
     ditu(){
       window.location.href = "http://10.155.32.4:8070/gisweb/ditujiankang.html?LAT="+"106.23507"+"&LNG="+"38.48989"+"&userid="+"1500";

src/jsonData/menu.json

@@ -304,7 +304,18 @@
         {
           "name": "健康管理",
           "url": "/",
-          "children": []
+          "children": [
+            {
+              "name": "健康管理",
+              "url": "/healthManagement",
+              "children": []
+            },
+            {
+              "name": "健康区间曲线偏差",
+              "url": "/curveDeviation",
+              "children": []
+            }
+          ]
         }
       ]
     },

src/router/zm.js

@@ -86,5 +86,9 @@ export default [
   { // 健康管理
     path:'/healthList',
     component: r => require.ensure([], () => r(require('@views/healthManagement/healthList')), 'healthManagement')
+  },
+  { // 区间曲线偏差
+    path:'/curveDeviation',
+    component: r => require.ensure([], () => r(require('@views/healthManagement/curveDeviation')), 'healthManagement')
   }
 ]

src/views/healthManagement/curveDeviation.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="pageBox">
+    <div class="searchBox">
+      <el-form ref="form" :model="form" inline label-width="80px">
+        <el-form-item label="风场：">
+          <el-select v-model="form.wpId" placeholder="请选择" @change="changeWpId">
+            <el-option v-for="item in wpList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期：">
+          <el-date-picker v-model="form.recorddate" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期"
+            :picker-options="pickerOptions" @change="res => { this.getTableDate(form.wpId); }"></el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tableBox">
+      <el-table :data="tableData" style="width: 100%;" height="600">
+        <el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
+        <el-table-column prop="wtId" label="风机"></el-table-column>
+        <el-table-column prop="rd" label="日期"></el-table-column>
+        <el-table-column prop="qxpc1" label="3-5米曲线偏差率"></el-table-column>
+        <el-table-column prop="qxpc2" label="5-11米曲线偏差率"></el-table-column>
+        <el-table-column prop="qxpc3" label="11-25米曲线偏差率"></el-table-column>
+        <el-table-column fixed="right" label="操作" width="250">
+          <template slot-scope="scope">
+            <el-button @click="renderCharts('zxt', scope.row.wtId)" type="text" size="small">曲线趋势</el-button>
+            <el-button @click="renderCharts('sdt', scope.row.wtId)" type="text" size="small">散点趋势</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog :title="dialogTitle" top="50px" :visible.sync="chartDialogShow" width="70%" @closed="(res) => { this.chartsLoading=true; this.noLineChartsData=false; }">
+      <div class="chartBox">
+        <div class="chartDom" id="curveDeviationChart"></div>
+        <div class="tips cMove" v-if="chartsLoading">正在加载图表数据中...请稍候...</div>
+        <div class="tips" v-if="noLineChartsData">暂无数据</div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import curveDeviation from "@assets/js/healthManagement/curveDeviation";
+export default curveDeviation;
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/healthManagement/curveDeviation.scss';
+</style>
+<style lang="scss">
+.tableBox {
+  .cell {
+    text-align: center;
+  }
+}
+</style>