tremdAnalysis

package.json

@@ -4,7 +4,7 @@
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build && node deploy/index.js                                                              ",
+    "build": "vue-cli-service build                                                              ",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",

src/components/orgTree.vue

@@ -133,7 +133,7 @@ export default {
     renderContent(h, { node, data, store }) {
       return (
         <div>
-          <span style="padding-right:10px;">
+          <span class="text_hide">
             <span style={{ marginRight: "5px", fontSize: "16px" }}>
               <svg-icon icon-class={data.iconName} />
             </span>
@@ -149,7 +149,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/styles/variables";
+@import '@/styles/variables';
 
 .el-select-tree {
   width: 300px;
@@ -172,4 +172,12 @@ export default {
 .el-tree-node.is-current > .el-tree-node__content {
   background-color: #deeaff !important;
 }
+
+.text_hide {
+  padding-right:10px;
+  display: inline-block;
+  width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
\ No newline at end of file

src/views/dashboard/api.js

@@ -8,6 +8,8 @@ const path = {
   monitorEquipOpen: '/monitorEquip/updateMonitorEquip',
   leakyCableOpen: '/leakyCable/updateLeakyCable',
 
+  getYear: '/sysStandingWaveRatio/getYear',
+  getMonth: '/sysStandingWaveRatio/getMonth',
 }
 
 export function treeBaseInfo() {
@@ -25,6 +27,13 @@ export function fsuOpen() {
 export function monitorEquipOpen() {
   return request.post(path.monitorEquipOpen, ...arguments)
 }
- export function leakyCableOpen() {
+export function leakyCableOpen() {
   return request.post(path.leakyCableOpen, ...arguments)
 }
+
+export function getYear() {
+  return request.post(path.getYear, ...arguments)
+}
+export function getMonth() {
+  return request.post(path.getMonth, ...arguments)
+}

src/views/dashboard/components/index.vue

@@ -3,6 +3,8 @@
     :is="useEditComponent"
     :type="type"
     :curInfo="curInfo"
+    :selectId="selectId"
+    :curId="curId"
     @toUpdate="toUpdate"
     @cancel="cancel"
   ></component>
@@ -29,6 +31,14 @@ export default {
       type: Object,
       default: () => {},
     },
+    curId: {
+      type: [Number, String],
+      defualt: null,
+    },
+    selectId: {
+      type: [Number, String],
+      defualt: null,
+    }
   },
   computed: {
     useEditComponent() {

src/views/dashboard/components/mixins.js

@@ -43,6 +43,14 @@ export const DetailMixins = {
       type: Number,
       defualt: null,
     },
+    curId: {
+      type: [Number, String],
+      defualt: null,
+    },
+    selectId: {
+      type: [Number, String],
+      defualt: null,
+    }
   },
   computed: {
     statusList() {

src/views/dashboard/components/trendAnalysis.vue

+<template>
+
+  <el-dialog
+    :title="finalyText"
+    :visible.sync="visible"
+    width="1060px"
+    @close="cancel"
+  >
+    <div class="chartLineAll">
+      <el-radio-group class="radio_box" v-model="date" size="mini">
+        <el-radio-button :label="1">年</el-radio-button>
+        <el-radio-button :label="2">月</el-radio-button>
+      </el-radio-group>
+      <div v-if="date == 1" class="date_show">
+        <span class="calendar" @click="lastYear()"><i class="el-icon-arrow-left" /></span>
+        {{year}}年
+        <span class="calendar" @click="nextYear()"><i class="el-icon-arrow-right" /></span>
+      </div>
+      <div v-else class="date_show">
+        <span class="calendar" @click="lastMonth()"><i class="el-icon-arrow-left" /></span>
+        {{year}}年{{month}}月
+        <span class="calendar" @click="getNextMonth()"><i class="el-icon-arrow-right" /></span>
+      </div>
+      <div ref="chartLine" :key="componentKeys" class="chartLine"></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancel">关 闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import { getYear, getMonth } from '../api'
+
+export default {
+  props: {
+    flag: {
+      type: Number,
+      default: 0
+    },
+    selectId: {
+      type: [Number, String],
+      defualt: null,
+    },
+    type: {
+      type: Number,
+      defualt: null,
+    },
+    curInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    var now = new Date()
+    return {
+      myChartLine: null,
+      date: 1,
+      visible: false,
+      year: now.getFullYear(),
+      month: now.getMonth() + 1,
+      preMonth: now.getMonth(),
+      nextMonth: now.getMonth() + 1 + 1,
+      componentKeys: 0,
+      title: ''
+    }
+  },
+  computed:{
+    finalyText() {
+      return '趋势分析图形(' + this.curInfo.baseInfo.leakyCableDescribe + ')'
+    }
+  },
+  watch: {
+    flag: {
+      immediate: true,
+      handler(newV) {
+        this.visible = !!newV
+      }
+    },
+    date(newV) {
+      this.init(newV)
+    },
+    visible(newV) {
+      if(newV) {
+        this.componentKeys++
+        this.$nextTick(() => {
+          this.init(1)
+        })
+      }
+    }
+  },
+  mounted() {
+    this.setNewDate()
+  },
+  methods: {
+    // 获取时间
+    setNewDate(){//设置日期的方法
+      let now = new Date();
+	    if(this.month == 1){ //当前月为1月时，上一个月显示为12月
+        this.preMonth = 12;
+	    }
+	    if(this.month == 12){ //当前月为12月时，下一个月显示为1月
+        this.nextMonth = 1;
+	    }
+	    now.setFullYear(this.year, this.month, 0);
+	    now.setFullYear(this.year, this.month - 1, 0);
+     },
+    lastMonth() {
+      this.month = this.preMonth;
+      this.preMonth = this.month - 1;
+      this.nextMonth = this.month + 1;
+      if(this.month == 12){ //边界值判断
+        this.year--;
+      }
+      this.setNewDate()
+      this.init(2)
+    },
+    getNextMonth() {
+      this.month = this.nextMonth;
+      this.preMonth = this.month - 1;
+      this.nextMonth = this.month + 1;
+      if(this.month == 1){ //边界值判断
+        this.year++;
+      }
+      this.setNewDate()
+      this.init(2)
+    },
+    lastYear() {
+      this.year--
+      this.init(1)
+    },
+    nextYear() {
+      this.year++
+      this.init(1)
+    },
+    init(type) {
+      let params = {
+        type: this.type,
+        applyId: this.selectId,
+        creationTime: this.date == 1 ? this.year+'-00-00 00:00:00' : this.year+'-'+this.month
+      }
+      if(type == 1) {
+        getYear(params).then(res => {
+          let list = res || []
+          this.getLine(list)
+        })
+      } else {
+        params.creationTime = this.year+'-'+ (this.month < 10 ? '0'+(this.month) : this.month)
+        getMonth(params).then(res => {
+          let list = res || []
+          this.getLine(list)
+        })
+      }
+      window.addEventListener("resize", () => {
+        this.myChartLine.resize()
+      })
+    },
+    getLine(data) {
+      this.myChartLine = echarts.init(this.$refs.chartLine)
+        // 图例
+        let X = Object.keys(data)
+        let dataList = Object.values(data)
+        let list = []
+        let dataObj = {
+          dataArr0: [],
+          dataArr1: [],
+          dataArr2: [],
+        }
+        // let dataArr0 = []
+        // let dataArr1 = []
+        // let dataArr2 = []
+        dataList.map(item => {
+          dataObj.dataArr0.push(item[0].value)
+          dataObj.dataArr1.push(item[1].value)
+          dataObj.dataArr2.push(item[2].value)
+        })
+        for(var i = 0; i < 3; i++) {
+          let obj = {}
+          obj = {
+            name: `驻波比${i+1}`,
+            type: 'line',
+            data: dataObj[`dataArr${i}`],
+            smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+          }
+          list.push(obj)
+        }
+        let option = {
+          title: {
+            text: '趋势分析图形',
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['驻波比1','驻波比2','驻波比3']
+          },
+          animation: true,
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '8%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: true,
+            data: X,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#9D9FD6'
+              }
+            }
+          },
+          yAxis: {
+            name: '驻波比',
+            type: 'value',
+            axisLine: { show: true },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#9D9FD6',
+                opacity: 0.2
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#9D9FD6'
+              }
+            }
+          },
+          series: list
+        }
+        this.myChartLine.setOption(option)
+    },
+    cancel() {
+      this.visible = false
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chart {
+  height: 344px;
+  margin-top: 20px;
+  .chartLineAll {
+    position: relative;
+    margin: 0 20px;
+    width: 44%;
+    // flex: 900;
+    .chartLine {
+      height: 100%;
+    }
+  }
+}
+.radio_box {
+  position: absolute;
+  left: 20px;
+  z-index: 99;
+}
+.date_show {
+  text-align: center;
+}
+</style>
\ No newline at end of file

src/views/dashboard/components/type5.vue

@@ -23,6 +23,7 @@
                   class="picbtn"
                   type="success"
                   size="mini"
+                  @click="trendAnalysis"
                 >趋势分析图形</el-button>
               </el-col>
             </el-row>
@@ -289,6 +290,7 @@
                   class="picbtn"
                   type="success"
                   size="mini"
+                  @click="generateChart"
                 >生成图形</el-button>
               </el-col>
             </el-row>
@@ -296,12 +298,18 @@
         </el-card>
       </el-col>
     </el-row>
+
+    <picAnalysis :flag="curflag" :curInfo="curObj" @cancel="cancel" />
+    <trendAnalysis :flag="trendflag" :selectId="selectId" :curInfo="curInfo" :type="type==5 ? 0 : 1" @cancel="cancel" />
   </div>
 </template>
 
 <script>
 import { DetailMixins } from './mixins'
 import { leakyCableOpen } from '../api'
+import picAnalysis from '@/views/history/leakyCableStatus/components/picAnalysis.vue'
+import trendAnalysis from './trendAnalysis.vue'
+
 export default {
   mixins: [DetailMixins],
 
@@ -315,9 +323,13 @@ export default {
       timeStatus: {},
       zhubobi: [],
       long: [],
-      statusl: []
+      statusl: [],
+      curflag: 0,
+      trendflag: 0,
+      curObj: []
     }
   },
+  components: {picAnalysis, trendAnalysis},
   computed: {
     statusAlarmfun() {
       return this.form.status || []
@@ -338,6 +350,18 @@ export default {
     deep: true
   },
   methods: {
+    trendAnalysis() {
+      this.trendflag = 1
+    },
+    generateChart() {
+      this.curObj = []
+      this.curflag = 1
+      this.curObj.push(this.curId)
+    },
+    cancel() {
+      this.curflag = 0
+      this.trendflag = 0
+    },
     savebtn() {
       this.flag = true
       const params = {

src/views/dashboard/components/type6.vue

@@ -23,6 +23,7 @@
                   class="picbtn"
                   type="success"
                   size="mini"
+                  @click="trendAnalysis"
                 >趋势分析图形</el-button>
               </el-col>
             </el-row>
@@ -279,6 +280,7 @@
                   class="picbtn"
                   type="success"
                   size="mini"
+                  @click="generateChart"
                 >生成图形</el-button>
               </el-col>
             </el-row>
@@ -286,15 +288,20 @@
         </el-card>
       </el-col>
     </el-row>
+
+    <picAnalysis :flag="curflag" :curInfo="curObj" @cancel="cancel" />
+    <trendAnalysis :flag="trendflag" :selectId="selectId" :type="type==5 ? 0 : 1" @cancel="cancel" />
   </div>
 </template>
 
 <script>
 import { DetailMixins } from './mixins'
 import { leakyCableOpen } from '../api'
+import picAnalysis from '@/views/history/leakyCableStatus/components/picAnalysis.vue'
+import trendAnalysis from './trendAnalysis.vue'
+
 export default {
   mixins: [DetailMixins],
-
   data() {
     return {
       colspan: 14,
@@ -305,9 +312,13 @@ export default {
       timeStatus: {},
       zhubobi: [],
       long: [],
-      statusl: []
+      statusl: [],
+      curflag: 0,
+      trendflag: 0,
+      curObj: []
     }
   },
+  components: {picAnalysis, trendAnalysis},
   computed: {
     statusAlarmfun() {
       return this.form.status || []
@@ -328,6 +339,18 @@ export default {
     deep: true
   },
   methods: {
+    trendAnalysis() {
+      this.trendflag = 1
+    },
+    generateChart() {
+      this.curObj = []
+      this.curflag = 1
+      this.curObj.push(this.curId)
+    },
+    cancel() {
+      this.curflag = 0
+      this.trendflag = 0
+    },
     savebtn() {
       this.flag = true
       const params = {

src/views/dashboard/index.vue

@@ -4,7 +4,7 @@
     <div>
       <orgTree ref="tree" style="float:left" @selectItem="selectItem" @defaultSite="defaultSite" @dblClick="dblClick"/>
       <div class="ml300">
-        <type v-loading="loading" :type="type" :curInfo="curInfo" />
+        <type v-loading="loading" :type="type" :curInfo="curInfo" :selectId="selectId" :curId="curId" />
       </div>
     </div>
 
@@ -22,7 +22,9 @@ export default {
     return {
       type: 1,
       curInfo: {},
-      loading: false
+      loading: false,
+      curId: null,
+      selectId: null
     }
   },
   components: {
@@ -34,6 +36,8 @@ export default {
       this.getDetailNode(data)
     },
     selectItem(data) {
+      this.selectId = data.id
+      this.curId = data.code
       this.type = data.type
       this.getDetailNode(data.id)
     }, 

src/views/history/leakyCableStatus/components/picAnalysis.vue

 <template>
   <el-dialog
-    title="驻波比图形分析"
+    :title="finalyText"
     :visible.sync="visible"
     width="1060px"
     @close="cancel"
@@ -31,7 +31,8 @@ export default {
     return {
       visible: false,
       componentKeys: 0,
-      listData: []
+      listData: [],
+      title: ''
     }
   },
   watch: {
@@ -48,18 +49,25 @@ export default {
       }
     }
   },
+  computed:{
+    finalyText() {
+      return '驻波比图形分析(' + this.title + ')'
+    }
+  },
   methods: {
     init() {
       pictorialStatement(this.curInfo).then((res) => {
+        if(JSON.stringify(res.collect) !== '{}') {
           let keyList = Object.keys(res.collect)
           let valueList = Object.values(res.collect)
           let finallyList = []
+          this.title = keyList.length > 1 ? '' : keyList[0]
           for (var i = 0; i < keyList.length; i++) {
             let obj = {}
             let source = []
             valueList[i].map(item => {
               let arr = []
-            arr.push(parseInt(item.distance), parseInt(item.value))
+              arr.push(parseFloat(item.distance), parseFloat(item.value))
               source.push(arr)
             })
             obj.dimensions = [`${keyList[i]}`]
@@ -68,6 +76,9 @@ export default {
           }
           this.listData = finallyList
           finallyList.length ? this.getLine(finallyList) : ''
+        } else {
+          this.title = ''
+        }
       })
     },
     getLine(data) {