派生自 wuyushui/SewerAndRainNetwork

chenyabin
2021-04-27 4f35a8b56c12315c82fd5bd136f32da2dcadc5e2
src/components/BaseNav/WasteGas/HourData.vue
@@ -19,26 +19,25 @@
          </div>
        </div>
        <div class="detailbtn">查询</div>
        <div class="detailbtn">明细表</div>
        <div class="detailbtn" @click="ScheduleShow">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div>
    </div>
    <!-- 明细弹框 -->
    <!--        <el-dialog :visible.sync="dialogVisible"-->
    <!--                   :append-to-body="true"-->
    <!--                   width="68%"-->
    <!--                   center-->
    <!--                   v-dialogDrag-->
    <!--        >-->
    <!--            <div class="el-dialog-div" style="height: 500px">-->
    <!--                <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
    <!--            </div>-->
    <!--        </el-dialog>-->
    <!--    明细弹框-->
    <el-dialog :visible.sync="showSchedule"
               :modal="false"
               v-dialogDrag
    >
      <div class="el-dialog-div" style="height: 200px">
        <Scheduleof></Scheduleof>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof'
import PublicDataStandard from '../PublicDataStandard'
import dayjs from 'dayjs'
@@ -48,7 +47,8 @@
  name: 'HourData',
  components: {
    // PublicDetailedList
    PublicDataStandard
    PublicDataStandard,
    Scheduleof
  },
  data () {
    return {
@@ -98,6 +98,7 @@
        timeStart: null,
        timeEnd: null
      },
      showSchedule: false,
      dataType: 2,
      myChart: null,
      exhbzz: null,
@@ -111,6 +112,9 @@
    })
  },
  methods: {
    ScheduleShow () {
      this.showSchedule = !this.showSchedule
    },
    async initnData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
@@ -123,7 +127,7 @@
        dataType: this.dataType
      }
      const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo
      console.log(result)
      // console.log(result)
      this.get24HourDate(result)
    },
    get24HourDate (res) {
@@ -272,7 +276,7 @@
            iconurl = 'image://../assets/imgs/legend/grn.png'
          } else if (nameList[l] === '温度') {
            iconurl = 'image://../assets/imgs/legend/WenDu.png'
          } else {
          } else if (nameList[l] === '废气流量') {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
          }
@@ -316,12 +320,9 @@
          } else if (nameList[j] === '烟尘') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '温度') {
          } else if (nameList[j] === '废气流量') {
            zdcbcolor = 'red'
            zxcolor = '#F206FF'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
            zxcolor = '#8fdc6e'
          }
          const ydata = {
            name: nameList[j],
@@ -354,6 +355,8 @@
        dataUnit = '气量(m³/h)'
      }
      const bzzList = this.exhbzzList
      const serLists = []
      for (let j = 0; j < ydatas.length; j++) {
        const len = ydatas[j].data.length
@@ -365,7 +368,7 @@
      }
      for (let i = 0; i < ydatas.length; i++) {
        // const zdcbcolor = ydatas[i].zdcbcolor
        const zdcbcolor = ydatas[i].zdcbcolor
        const bzz = ydatas[i].bzz
        let obj
        if (bzz == null) {
@@ -375,31 +378,33 @@
            symbolSize: 10, // 大小
            smooth: false, // 直线 ,true 为曲线
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: function (c) { // 根据value 显示不同的折点颜色
            //       let biaozhuiz
            //       for (let i = 0; i < exhbzzList.length; i++) {
            //         if (exhbzzList[i].name === c.seriesName) {
            //           biaozhuiz = exhbzzList[i].bzhui
            //         }
            //       }
            //       if (c.value > 999999999999) {
            //         return zdcbcolor
            //       } else {
            //         return '#33c95f'
            //       }
            //     },
            //     lineStyle: { // 折线的颜色
            //       color: ydatas[i].zxcolor,
            //       width: 5
            //     },
            //     borderColor: ydatas[i].zxcolor, // 折点边框的颜色
            //     label: { // 显示值
            //       show: false
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
@@ -411,21 +416,21 @@
            smooth: false, // 直线 ,true 为曲线
            itemStyle: {
              normal: {
                // color: function (c) { // 根据value 显示不同的折点颜色
                //   let biaozhuiz
                //   for (let i = 0; i < exhbzzList.length; i++) {
                //     if (exhbzzList[i].name == c.seriesName) {
                //       biaozhuiz = exhbzzList[i].bzhui
                //     }
                //   }
                //   if (c.value > biaozhuiz) {
                //     return zdcbcolor
                //   } else if (c.value > biaozhuiz * 0.9) {
                //     return '#FFA500'
                //   } else {
                //     return '#33c95f'
                //   }
                // },
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value[1] > biaozhuiz) {
                    return zdcbcolor
                  } else if (c.value[1] > biaozhuiz * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
@@ -509,7 +514,7 @@
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
              } else if (seriesName === '温度') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>'
              } else {
              } else if (seriesName === '废气流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
@@ -619,7 +624,7 @@
          type: 'value',
          name: dataUnit,
          max: function (value) {
            const ma = value.max > 120 ? value.max : 120
            const ma = value.max > 12 ? value.max : 12
            return parseInt(ma)
          },
          axisLabel: {