jg-chemical-client2/src/components/DataModal/common/DeviceAnalysis.vue

<template>
  <div class="device-analysis">
    <div style="height: 55px;display: flex;flex-direction: column;justify-content: flex-end;padding: 0 16px;">
      <el-select size="mini" v-model="collectEntityId" :disabled="!selectOptions || selectOptions.length <= 0" placeholder="请选择">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <div v-if="selectOptions && selectOptions.length > 0" class="charts-outer">
      <div class="charts-inner">
        <jg-chart :_height="chartHeight" :option="optionToday"/>
        <div class="chart-right-text">
          <div>
            <div>运行占比</div>
            <div class="chart-right-text-rate">{{ durations.day.run }}%</div>
          </div>
          <div>
            <div>停机占比</div>
            <div class="chart-right-text-rate">{{ durations.day.stop }}%</div>
          </div>
          <div>
            <div>运行时长</div>
            <div v-if="durations.day.duration" class="chart-right-text-rate">{{ durations.day.duration }}</div>
            <div class="device-not-run-text" v-else>设备未运行</div>
          </div>
        </div>
      </div>
      <div class="charts-inner">
        <jg-chart :_height="chartHeight" :option="optionWeek"/>
        <div class="chart-right-text">
          <div>
            <div>运行占比</div>
            <div class="chart-right-text-rate">{{ durations.week.run }}%</div>
          </div>
          <div>
            <div>停机占比</div>
            <div class="chart-right-text-rate">{{ durations.week.stop }}%</div>
          </div>
          <div>
            <div>总运行时长</div>
            <div v-if="durations.week.duration" class="chart-right-text-rate">{{ durations.week.duration }}</div>
            <div class="device-not-run-text" v-else>设备未运行</div>
          </div>
        </div>
      </div>
      <div class="charts-inner">
        <jg-chart :_height="chartHeight" :option="optionMonth"/>
        <div class="chart-right-text">
          <div>
            <div>运行占比</div>
            <div class="chart-right-text-rate">{{ durations.month.run }}%</div>
          </div>
          <div>
            <div>停机占比</div>
            <div class="chart-right-text-rate">{{ durations.month.stop }}%</div>
          </div>
          <div>
            <div>总运行时长</div>
            <div v-if="durations.month.duration" class="chart-right-text-rate">{{ durations.month.duration }}</div>
            <div class="device-not-run-text" v-else>设备未运行</div>
          </div>
        </div>
      </div>
      <div class="charts-inner">
        <jg-chart :_height="chartHeight" :option="optionThreeMonth"/>
        <div class="chart-right-text">
          <div>
            <div>运行占比</div>
            <div class="chart-right-text-rate">{{ durations.threeMonth.run }}%</div>
          </div>
          <div>
            <div>停机占比</div>
            <div class="chart-right-text-rate">{{ durations.threeMonth.stop }}%</div>
          </div>
          <div>
            <div>总运行时长</div>
            <div v-if="durations.threeMonth.duration" class="chart-right-text-rate">{{ durations.threeMonth.duration }}</div>
            <div class="device-not-run-text" v-else>设备未运行</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="flex: 1" v-loading="true" element-loading-background="inherit"/>
  </div>
</template>

<script>
import { findEntityByAcqId } from '@/api/CollectEntity'
import JgChart from '@/components/JgChart'
import { findDuration } from '@/api/DeviceRunRecord'
import { mapState } from 'vuex'

export default {
  name: 'DeviceAnalysis',
  components: { JgChart },
  props: {
    chartHeight: {
      type: String,
      default: '160px'
    },
  },
  data() {
    // 暗蓝色#4962FC，亮蓝色#4B7CF3，紫色#dd3ee5，绿色#12e78c，橙色#fe8104，青色#01C2F9，亮黄色#F4CB29，暗黄色 #FD9E06
    const colors = [
      '#4962FC', '#4B7CF3', '#dd3ee5', '#12e78c',
      '#fe8104', '#01C2F9', '#F4CB29', '#FD9E06',
      '#a171fa'
    ]
    return {
      selectOptions: [],
      collectEntityId: '',
      optionToday: {
        title: {
          text: '今日运行统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 16,
            color: '#FFF'
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '停机时长',
                itemStyle: {
                  color: '#999999'
                }
              },
              {
                value: 75,
                name: '运行时长',
                itemStyle: {
                  color: colors[0],
                }
              },
            ]
          }
        ]
      },
      optionWeek: {
        title: {
          text: '本周运行统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 16,
            color: '#FFF'
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '停机时长',
                itemStyle: {
                  color: '#999999',
                  fontSize: '16px'
                }
              },
              {
                value: 75,
                name: '运行时长',
                itemStyle: {
                  color: colors[3],
                }
              },
            ]
          }
        ]
      },
      optionMonth: {
        title: {
          text: '本月运行统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 16,
            color: '#FFF'
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '停机时长',
                itemStyle: {
                  color: '#999999'
                }
              },
              {
                value: 75,
                name: '运行时长',
                itemStyle: {
                  color: colors[8],
                }
              },
            ]
          }
        ]
      },
      optionThreeMonth: {
        title: {
          text: '三个月内运行统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 16,
            color: '#FFF'
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '停机时长',
                itemStyle: {
                  color: '#999999'
                }
              },
              {
                value: 76,
                name: '运行时长',
                itemStyle: {
                  color: '#f18c27',
                }
              },
            ]
          }
        ]
      },
      durations: {
        day: {
          run: 0,
          stop: 0,
          duration: ''
        },
        week: {
          run: 0,
          stop: 0,
          duration: ''
        },
        month: {
          run: 0,
          stop: 0,
          duration: ''
        },
        threeMonth: {
          run: 0,
          stop: 0,
          duration: ''
        },
      },
    }
  },
  computed: {
    ...mapState({
      acquisitionStationId: state => state.company.acquisitionStationId,
    }),
  },
  watch: {
    collectEntityId: {
      handler() {
        this.fetchDuration()
      },
    },
  },
  methods: {
    getCollectEntity() {
      const params = {
        acquisitionStationId: this.acquisitionStationId
      }
      findEntityByAcqId(params).then(res => {
        if (res && res.code === '200') {
          const selectOptions = []
          for (const item of res.data) {
            if (item.isShow) {
              selectOptions.push({
                value: item.id,
                label: item.entityName
              })
            }
          }
          this.selectOptions = selectOptions
          this.collectEntityId = res.data[0].id
        } else {
          this.$message.error(res.message)
        }
      }).catch(reason => {
        console.error(reason)
      })
    },
    fetchDuration() {
      findDuration({ collectEntityId: this.collectEntityId }).then(res => {
        if (res && res.code === '200') {
          const today = this.optionToday.series
          today[0].data[0].value = res.data.day.stopDuration
          today[0].data[1].value = res.data.day.runDuration
          this.optionToday.series = today
          this.durations.day.run = Math.round(res.data.day.runDurationRate * 100)
          this.durations.day.stop = Math.round(res.data.day.stopDurationRate * 100)
          this.durations.day.duration = res.data.day.duration

          const week = this.optionWeek.series
          week[0].data[0].value = res.data.week.stopDuration
          week[0].data[1].value = res.data.week.runDuration
          this.optionWeek.series = week
          this.durations.week.run = Math.round(res.data.week.runDurationRate * 100)
          this.durations.week.stop = Math.round(res.data.week.stopDurationRate * 100)
          this.durations.week.duration = res.data.week.duration

          const month = this.optionMonth.series
          month[0].data[0].value = res.data.month.stopDuration
          month[0].data[1].value = res.data.month.runDuration
          this.optionMonth.series = month
          this.durations.month.run = Math.round(res.data.month.runDurationRate * 100)
          this.durations.month.stop = Math.round(res.data.month.stopDurationRate * 100)
          this.durations.month.duration = res.data.month.duration

          const threeMonth = this.optionThreeMonth.series
          threeMonth[0].data[0].value = res.data.threeMonth.stopDuration
          threeMonth[0].data[1].value = res.data.threeMonth.runDuration
          this.optionThreeMonth.series = threeMonth
          this.durations.threeMonth.run = Math.round(res.data.threeMonth.runDurationRate * 100)
          this.durations.threeMonth.stop = Math.round(res.data.threeMonth.stopDurationRate * 100)
          this.durations.threeMonth.duration = res.data.threeMonth.duration
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .device-analysis {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .charts-outer {
      flex: 1;
      display: flex;
      padding: 0 16px;
      flex-direction: column;
      margin-top: 10px;

      .charts-inner {
        width: calc(100% - 16px);
        height: 100%;
        border-radius: 10px;
        box-shadow: inset 0.2rem 0.2rem 0.2rem #aaa7a7, inset -0.1rem -0.1rem 0.2rem #FFFFFF;
        padding: 8px;
        display: flex;
        margin: 35px 16px 0 0;
      }

      .charts-inner:first-child {
        margin-top: 0;
      }

      .chart-right-text {
        width: 100%;
        font-size: 16px;
        color: #FFF;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        margin-left: 32px;

        .chart-right-text-rate {
          margin-top: 8px;
          font-size: 20px;
          font-weight: bolder;
        }
        .device-not-run-text {
          margin-top: 8px;
          font-size: 16px;
          color: #999999;
        }
      }
    }

    /deep/ .el-input--mini {
      font-size: 16px;
    }
  }
</style>