admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/realScore.vue

<template>
  <div>
    <!-- 筛选start -->
    <div class="filter-container">
      <div class="left">
        <div>
          <div class="filter-item" style="margin-right: 20px">
            选择设备:
            <el-select
              v-model="deviceCode"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="device in deviceList"
                :key="device"
                :label="device.deviceName"
                :value="device.deviceCode"
              ></el-option>
            </el-select>
          </div>
          数据刷新时间：{{ nowTime }}

          <el-button
            type="primary"
            class="search-button"
            style="margin-left: 30px"
            @click="realScore()"
          >
            刷新
          </el-button>
        </div>
      </div>
      <div class="right descIcon">
        <img src="@/assets/images/descIcon.png" alt="" />
        指标说明
      </div>
    </div>
    <!-- 筛选end -->

    <el-row :gutter="20" class="mt-20">
      <el-col :md="24" :lg="7">
        <!-- 评分 -->
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>评分</span>
          </div>
          <radar-chart :getTableData="getData[0]"></radar-chart>
          <div class="totalScore">
            总评分：{{ getData[0].score }}
            <el-button type="danger">
              {{
                getData[0].score > 80
                  ? '优秀'
                  : getData[0].score >= 60
                  ? '合格'
                  : '不合格'
              }}
            </el-button>
          </div>
        </div>
        <!-- 评分 end -->

        <br />

        <!-- 回路统计 -->
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>回路统计</span>
          </div>
          <div>
            <pie-chart :getTableData="getData[0]"></pie-chart>
          </div>
        </div>
        <!-- 回路统计 end -->
      </el-col>

      <el-col :md="24" :lg="17">
        <!-- 表格start -->
        <el-table
          :data="getData"
          style="width: 100%"
          :header-cell-style="headCellStyle"
        >
          <el-table-column label="回路" width="" align="center">
            <template #default="scope">
              {{ scope.row.loop ? scope.row.loop : '-' }}
            </template>
          </el-table-column>

          <el-table-column label="功率因数" width="" align="center">
            <template #default="scope">
              <div @click="oneClick('cos')">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.cosQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.cos }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="不平衡度">
            <el-table-column label="电流" width="" align="center">
              <template #default="scope">
                <div @click="oneClick('elBalun')">
                  <i
                    class="smallSquare"
                    :style="{
                      background: scope.row.elBalunQ ? 'green' : 'red',
                    }"
                  ></i>
                  {{ scope.row.elBalun }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="电压" align="center">
              <template #default="scope">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.vtBalunQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.vtBalun }}
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="电压">
            <el-table-column prop="name" label="A相" width="" align="center">
              <template #default="scope">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.uaQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.ua }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相" align="center">
              <template #default="scope">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.ubQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.ub }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相" align="center">
              <template #default="scope">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.ucQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.uc }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="电流负载率">
            <el-table-column prop="name" label="A相" width="" align="center">
              <template #default="scope">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.iaLoadQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.iaLoad }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相" align="center">
              <template #default="scope">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.ibLoadQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.ibLoad }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相" align="center">
              <template #default="scope">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.icLoadQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.icLoad }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="评分" width="" align="center">
            <template #default="scope">
              <el-button size="mini" type="warning">
                {{ scope.row.score }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格end -->
      </el-col>
    </el-row>

    <!--视频弹框组件开始-----------------------start-->
    <dialog-com
      :dialogTitle="dialogTitle"
      @closeDialog="closeDialog"
      :flag="showDialog2"
      :echartsAllData="echartsAllData"
    ></dialog-com>
    <!--视频弹框组件结束-----------------------end-->
  </div>
</template>

<script>
import radarChart from './realScoreComponent/radarChart.vue'
import pieChart from './realScoreComponent/pieChart.vue'
import dialogCom from './realScoreComponent/dialogCom'
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref } from 'vue'
import * as api from '@/api/powerQuality/realScore.js'
import { ElMessage } from 'element-plus'
import { parseTime } from '@/utils'

export default defineComponent({
  name: 'RealScore',
  components: {
    radarChart,
    pieChart,
    dialogCom,
  },
  setup() {
    const store = useStore()
    const num = ref(1)
    const nowTime = ref(parseTime(new Date()))
    const value4 = ref('')
    const getData = ref([
      {
        loop: '',
        cos: '0%',
        elBalun: '100%',
        vtBalun: '0%',
        name: '0%',
        city: '0%',
        score: '0',
      },
    ])
    const deviceList = ref([])
    const deviceCode = ref('DA00012784')
    // const deviceCode = ref('')

    const dialogTitle = ref('')
    const showDialog2 = ref(false)

    const echartsAllData=ref([])

    function headCellStyle({ row, column, rowIndex, columnIndex }) {
      row, column
      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
        return `text-align:center`
      } else {
        return ''
      }
    }

    function deviceSelect() {
      api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          deviceList.value = requset.data
          deviceCode.value = requset.data[0] ? requset.data[0].deviceCode : ''
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    function realScore() {
      api.realScore({ deviceCode: deviceCode.value }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          console.log('requset.data')
          console.log(requset.data)
          getData.value[0] = requset.data
          console.log(getData.value)
        } else {
          ElMessage.error(requset.msg)
        }
      })
      nowTime.value = parseTime(new Date())
    }
    function oneClick(params) {
      alert(params)
      dialogTitle.value = deviceCode.value
      showDialog2.value = true

      var start = parseTime(new Date().setHours(0, 0, 0, 0))
      var end = parseTime(new Date())

      api
        .rtRealScore({
          deviceCode: 'DA00021026',
          startTime: start,
          endTime: end,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            console.log('requset.data')
            console.log(requset.data)
            // getData.value[0] = requset.data
            // console.log(getData.value)
            echartsAllData.value=requset.data
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    // 关闭操作
    const closeDialog = () => {
      showDialog2.value = false
    }

    onMounted(() => {
      console.log(parseTime(new Date()))
      deviceSelect()
      realScore()
    })
    return {
      store,
      num,
      oneClick,
      value4,
      getData,
      headCellStyle,
      deviceSelect,
      deviceList,
      realScore,
      nowTime,
      deviceCode,
      closeDialog,
      showDialog2,
      dialogTitle,
      echartsAllData
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  border: 1px solid #99a9bf;
}
.bg-purple {
  border: 1px solid #d3dce6;
}
.bg-purple-light {
  border: 1px solid #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  border: 1px solid #f9fafc;
}
</style>