开票数量

src/views/command/quality/line.vue

   import {mapGetters} from "vuex";
 
   export default {
-    name: "overBar",
+    name: "quality-line",
     data() {
       return {
-        data: []
+        chart:{}
       };
     },
     props: {
         default() {
           return "";
         }
+      },
+      dataList:{
+        type:Array,
+        default() {
+          return [];
+        }
       }
     },
     computed: {
       ...mapGetters(["fontSize"])
     },
+    watch:{
+      dataList: {
+        deep: true,
+        handler: function (newVal, oldVal) {
+          this.chart.changeData(newVal);
+        }
+      }
+    },
     mounted() {
-
-
       const chart = new G2.Chart({
         container: this.id,
         autoFit: true,
         width: this.width,
         padding: ["auto"]
       });
-      chart.source(this.data);
+      chart.source(this.dataList);
       chart.axis('value', {
         title: null,
         grid: null,
         .color('name', ['#0CFFAA', '#FFFF7B', '#FF3464', '#0073FE', '#05D1FF'])
       chart.render();
       this.chart = chart;
-      let me = this;
-      setTimeout(function () {
-        if (me.id == 'bottomLine') {
-          me.data = [
-            {month: '1月', name: '固城湖', value: 10},
-            {month: '1月', name: '莫愁湖', value: 20},
-            {month: '1月', name: '澧水河', value: 30},
-            {month: '1月', name: '玄武湖', value: 40},
-            {month: '1月', name: '百家湖', value: 50},
-            {month: '2月', name: '固城湖', value: 12},
-            {month: '2月', name: '莫愁湖', value: 14},
-            {month: '2月', name: '澧水河', value: 16},
-            {month: '2月', name: '玄武湖', value: 18},
-            {month: '2月', name: '百家湖', value: 10},
-            {month: '3月', name: '固城湖', value: 22},
-            {month: '3月', name: '莫愁湖', value: 33},
-            {month: '3月', name: '澧水河', value: 44},
-            {month: '3月', name: '玄武湖', value: 55},
-            {month: '3月', name: '百家湖', value: 66},
-            {month: '4月', name: '固城湖', value: 77},
-            {month: '4月', name: '莫愁湖', value: 88},
-            {month: '4月', name: '澧水河', value: 14},
-            {month: '4月', name: '玄武湖', value: 16},
-            {month: '4月', name: '百家湖', value: 54},
-            {month: '5月', name: '固城湖', value: 12},
-            {month: '5月', name: '莫愁湖', value: 43},
-            {month: '5月', name: '澧水河', value: 66},
-            {month: '5月', name: '玄武湖', value: 32},
-            {month: '5月', name: '百家湖', value: 12},
-          ];
-        } else if (me.id == 'topLine') {
-          me.data = [
-            {month: '2016-01', name: '固城湖', value: 10},
-            {month: '2016-01', name: '莫愁湖', value: 20},
-            {month: '2016-01', name: '澧水河', value: 30},
-            {month: '2016-01', name: '玄武湖', value: 40},
-            {month: '2016-01', name: '百家湖', value: 50},
-            {month: '2017-01', name: '固城湖', value: 12},
-            {month: '2017-01', name: '莫愁湖', value: 14},
-            {month: '2017-01', name: '澧水河', value: 16},
-            {month: '2017-01', name: '玄武湖', value: 18},
-            {month: '2017-01', name: '百家湖', value: 10},
-            {month: '2018-01', name: '固城湖', value: 22},
-            {month: '2018-01', name: '莫愁湖', value: 33},
-            {month: '2018-01', name: '澧水河', value: 44},
-            {month: '2018-01', name: '玄武湖', value: 55},
-            {month: '2018-01', name: '百家湖', value: 66},
-            {month: '2019-01', name: '固城湖', value: 77},
-            {month: '2019-01', name: '莫愁湖', value: 88},
-            {month: '2019-01', name: '澧水河', value: 14},
-            {month: '2019-01', name: '玄武湖', value: 16},
-            {month: '2019-01', name: '百家湖', value: 54},
-            {month: '2020-01', name: '固城湖', value: 12},
-            {month: '2020-01', name: '莫愁湖', value: 43},
-            {month: '2020-01', name: '澧水河', value: 66},
-            {month: '2020-01', name: '玄武湖', value: 32},
-            {month: '2020-01', name: '百家湖', value: 12},
-          ];
-        } else {
-          me.data = [
-            {month: '1月', name: '', value: 10},
-            {month: '2月', name: '', value: 20},
-            {month: '3月', name: '', value: 30},
-            {month: '4月', name: '', value: 40},
-            {month: '5月', name: '', value: 50},
-          ]
-        }
-        me.chart.changeData(me.data);
-      }, 1000);
     },
     methods: {}
   };

src/views/command/quality/qualityLeft.vue

       <div @click="activeTypeClick(2)" :class="activeType==2?'check-type':''">多条河流分析</div>
     </div>
     <div>
-      <el-select v-model="searchValue" multiple placeholder="">
+      <el-select v-model="driverId" multiple placeholder="">
         <el-option
           v-for="item in driverList"
           :key="item.value"

src/views/command/quality/qualityRight.vue

         <div>告警信息</div>
       </div>
       <div>
-        <div @click="detail">
+        <div @click="detail" :key="index" v-for="(item,index) in waterAlarmList">
           <div>
             <div>
-              <img src="../../../assets/img/main/red.png"/>
-              <div>澧水河河道发现重度污染</div>
+              <img
+                :src="item.measuredStandard==5?require('../../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../../assets/img/main/orange.png'):require('../../../assets/img/main/yellow.png'))"/>
+              <div>{{item.driverAreaName}}{{item.driverName}}</div>
             </div>
-            <div>2020-04-20</div>
+            <div><span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span></div>
           </div>
-          <div>总氮、总磷数值偏高，达到5级</div>
-        </div>
-        <div @click="detail">
-          <div>
-            <div>
-              <img src="../../../assets/img/main/orange.png"/>
-              <div>莫愁湖发现严重水质问题</div>
-            </div>
-            <div>2020-04-20</div>
-          </div>
-          <div>总氮、总磷数值偏高，达到5级</div>
-        </div>
-        <div @click="detail">
-          <div>
-            <div>
-              <img src="../../../assets/img/main/yellow.png"/>
-              <div>固城河河道发现污染排口</div>
-            </div>
-            <div>2020-04-20</div>
-          </div>
-          <div>总氮、总磷数值偏高，达到5级</div>
+          <div>{{item.alarmInfo}}达到{{item.alarmStandard}}</div>
         </div>
       </div>
     </div>
         <div>河湖水质超标预警</div>
       </div>
       <div>
-        <div @click="detail">
-          <div>
-            <div>莫愁湖</div>
-            <div>04-20 12:20</div>
-          </div>
-          <div>
-            <div>五月份可能爆发大面积蓝藻</div>
-            <div>5级</div>
-          </div>
-        </div>
-        <div @click="detail">
-          <div>
-            <div>莫愁湖</div>
-            <div>04-20 12:20</div>
-          </div>
-          <div>
-            <div>五月份可能爆发大面积蓝藻</div>
-            <div>5级</div>
-          </div>
-        </div>
-        <div @click="detail">
-          <div>
-            <div>莫愁湖</div>
-            <div>04-20 12:20</div>
-          </div>
-          <div>
-            <div>五月份可能爆发大面积蓝藻</div>
-            <div>5级</div>
-          </div>
-        </div>
-        <div @click="detail">
+        <div :key="index" v-for="(item,index) in warnList" @click="detail">
           <div>
-            <div>莫愁湖</div>
-            <div>04-20 12:20</div>
+            <div>{{item.driverName}}</div>
+            <div>{{item.createTime}}</div>
           </div>
           <div>
-            <div>五月份可能爆发大面积蓝藻</div>
-            <div>5级</div>
+            <div>{{item.warnContent}}</div>
+            <div>{{item.warnLevelText}}</div>
           </div>
         </div>
       </div>
     <div>
       <div class="header-title">
         <div>水质数据趋势模拟预测</div>
+        <el-select @change="trendTypeChange" :class="trendType?'check-select':void(0)" style="width: 1rem" v-model="trendType" placeholder="">
+          <el-option
+            v-for="item in trendSelectList"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
       </div>
       <div>
         <div>单位(mg/L）</div>
         <cLine
+          :dataList="filterFrendList"
           id="rightLine"
           :width="4.19,fontSize | filterPx"
           :height="2.215,fontSize | filterPx"
   import cLine from './line'
   import quilityDialog from './qualityDialog'
   import api from '@/api/command/index'
+  import waterAlarmApi from '@/api/water/waterAlarm'
 
   export default {
     name: "qualityRight",
     data() {
-      return {visible:false}
+      return {
+        waterAlarmList:[],
+        trendType:'',
+        visible: false,
+        trendList: [],
+        filterFrendList:[],
+        warnList:[],
+        trendType:'COD',
+        trendSelectList:['COD','NH3N','TP','TN','DO','TUB']
+      }
     },
     computed: {
       ...mapGetters(["fontSize"])
     },
-    components: {cLine,quilityDialog},
+    components: {cLine, quilityDialog},
     watch: {},
     props: {},
     mounted() {
       this.getQuaTrend()
       this.getQuaWarnList()
+      this.getWaterAlarmList()
     },
     methods: {
-      detail(){
-        this.visible=true
+      getWaterAlarmList() {
+        waterAlarmApi.getWaterAlarmList(3).then(res => {
+          this.waterAlarmList = res.data ? res.data : []
+        }).catch(e => {
+          this.waterAlarmList = []
+        })
+      },
+      detail() {
+        this.visible = true
       },
-      getQuaWarnList(){
+      getQuaWarnList() {
         api.getQuaWarnList().then(res => {
-          console.log(res)
+          this.warnList=res.data?res.data:[]
         }).catch(err => {
+          this.warnList=[]
         });
       },
-      getQuaTrend(){
+      trendTypeChange(){
+        let filterFrendList=[]
+        let name = ''
+        'COD','NH3N','TP','TN','DO','TUB'
+        if(this.trendType=='COD'){
+          name='waterCod'
+        }else if(this.trendType=='NH3N'){
+          name='waterNh3n'
+        }else if(this.trendType=='TP'){
+          name='waterTp'
+        }else if(this.trendType=='TN'){
+          name='waterTn'
+        }else if(this.trendType=='DO'){
+          name='waterDo'
+        }else if(this.trendType=='TUB'){
+          name='waterTub'
+        }
+        this.trendList.map(item => {
+          filterFrendList.push({
+            month: item.forecastTime,
+            name: '',
+            value: item[name]?item[name]:0
+          })
+        })
+        this.filterFrendList=filterFrendList
+      },
+      getQuaTrend() {
         api.getQuaTrend().then(res => {
-          console.log(res)
+          this.trendList = res.data?res.data:[]
+          let filterFrendList=[]
+          res.data.map(item => {
+            filterFrendList.push({
+              month: item.forecastTime,
+              name: '',
+              value: item.waterCod?item.waterCod:0
+            })
+          })
+          this.filterFrendList=filterFrendList
         }).catch(err => {
+          this.trendList=[]
+          this.filterFrendList=[]
         });
       }
     },
     padding-left: 0.26rem;
     padding-right: 0.27rem;
 
+    .check-select{
+      .el-input__inner {
+        background: rgba(54,184,179,0.41);
+        border: 0.01rem solid #36B8B3;
+      }
+    }
+
     .header-title {
       margin-top: 0.2rem;
       width: 100%;
       height: 0.35rem;
       line-height: 0.35rem;
       position: relative;
+      display: flex;
+      justify-content: space-between;
 
       > div {
         color: #ffffff;
 
     > div:first-child {
       height: 2.2rem;
+
       > div:last-child {
         padding: 0rem 0rem 0.1rem 0rem;
         position: relative;
 
         > div {
           cursor: pointer;
+
           > div:first-child {
             margin-top: 0.11rem;
             display: flex;
 
     > div:nth-child(2) {
       height: 2.46rem;
+
       > div:last-child {
         padding: 0rem 0rem 0.1rem 0rem;
         position: relative;
             > div:first-child {
               line-height: 0.17rem;
             }
+
             > div:last-child {
               color: #ffffff;
               background: rgba(238, 15, 4, 0.22);
     }
 
 
-    >div:nth-child(3){
-      >div:last-child{
+    > div:nth-child(3) {
+      > div:last-child {
         margin-top: 0.1rem;
         position: relative;
-        >div:first-child{
+
+        > div:first-child {
           position: absolute;
           top: 0rem;
           left: 0.5rem;

src/views/water/warn/index.vue

           clearable
           v-model="searchParam.warnSn"
           size="small"
-          placeholder="请输入任务单号"
+          placeholder="请输入预警编号"
           style="width: 150px"
         />
       </el-form-item>

src/views/water/waterAlarm/index.vue

           clearable
           v-model="searchParam.alarmSn"
           size="small"
-          placeholder="请输入任务单号"
+          placeholder="请输入预警编号"
           style="width: 150px"
         />
       </el-form-item>