tba-waves/src/views/IntellOper.vue

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {useRoute} from 'vue-router'
import RightFrame from '@/components/RightFrame.vue'
import Card01 from '@/components/card/Card01.vue'
import StripeTable from '@/components/StripeTable.vue'
import ColorTag from '@/components/tag/ColorTag.vue'
import {getDeviceInfo, getOperationsPersonnelData} from '@/api/device'
import Chart from '@/components/Chart.vue'
import {getPie3DSimple} from "@/utils/chart";
import {View} from "@/utils/tdInstruction";
import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
import {getDeviceByName} from "@/utils/device";
import {getAlarmInfo} from '@/api/alarm'

const route = useRoute()

const color = ['#005aff', '#f8b551']
const equipmentStatusData = reactive({
  total: 10,
  onlineTotal: 8,
  '缺数': 0,
  '上下限异常': 1,
  '数据中断': 0,
  '其他': 1
})
const operationsPersonnelColumns = [
  {label: '姓名', prop: 'name'},
  {label: '已处理', prop: 'processed', width: '100'},
  {label: '未处理', prop: 'untreated', width: '100'}
]
const operationsPersonnelData = reactive([])
const deviceColumns = [
  {label: '设备类型', prop: 'deviceType', width: '110'},
  {label: '设备名称', prop: 'deviceName'},
  {label: '运行状态', prop: 'state', width: '90'}
]
const deviceData = reactive([])


const alarmColumns = [
  {
    label: '报警类型', prop: 'deviceName', width: '100', convertFn: (data) => {
      return data ? data.trim() : ''
    }
  },
  {
    label: '时间', prop: 'tm', convertFn: (data) => {
      return data ? data.substring(5, 16) : ''
    }
  },
  {
    label: '告警内容', prop: 'content', width: '180', convertFn: (data) => {
      return data ? data.trim() : ''
    }
  },
]
const alarmData = reactive([])

function getAlarmList() {
  getAlarmInfo().then(res => {
    alarmData.push(...res)
    // initPoints()
  })
}

const right3Ref = ref(null)

function reloadRight3() {
  const optionData = [
    {
      name: '故障',
      value: 1,
      itemStyle: {
        color: '#f3914b'
      }
    },
    {
      name: '提醒',
      value: 4,
      itemStyle: {
        color: '#f5bf53'
      }
    },
    {
      name: '巡检',
      value: 6,
      itemStyle: {
        color: '#92d1f4'
      }
    },
    {
      name: '定时巡检',
      value: 3,
      itemStyle: {
        color: '#0e2d5b'
      }
    }
  ]
  const option = getPie3DSimple(optionData, 0.8)
  //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  option.series.push({
    name: 'pie2d',
    type: 'pie',
    label: {
      opacity: 1,
      position: 'outside',
      fontSize: 12,
      lineHeight: 20,
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    labelLine: {
      length: 30,
      length2: 30
    },
    minAngle: 10,
    startAngle: -50, // 起始角度，支持范围[0, 360]。
    clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ['40%', '60%'],
    center: ['50%', '50%'],
    data: optionData.map(item => {
      item.itemStyle.opacity = 0
      return item
    })
  })
  right3Ref.value.loadChart(option, 'bindListen')
}

function getDeviceInfoList() {
  getDeviceInfo().then(res => {
    deviceData.push(...res)
  })
}

function getDeviceDetailInfoList() {
  getOperationsPersonnelData().then(res => {
    operationsPersonnelData.push(...res)
  })
}

const imgSrc = ref(new URL('@/assets/images/szpj.png', import.meta.url).href)

onMounted(() => {
  getDeviceInfoList()
  getDeviceDetailInfoList()
  getAlarmList()
  reloadRight3()
})

function handleDeviceClick(row) {
  const device = getDeviceByName(row.deviceName);
  if (device) {
    if (device["deviceType"] === "水质测验设备") {
      View.changeDeviceView('打开模型', route.params.stcd, device.ueDeviceName)
    } else {
      View.changeView(`${route.params.stcd}_${device.ueDeviceName}`)
    }
  }
}
</script>

<template>
  <right-frame>
    <template #leftModule>
      <card01 style="height: 33%" title="运行实态">
        <el-row style="height: 66%;">
          <el-col :span="7">
            <div class="device_num">
              <span class="background-image">设备管理</span>
              <span style="font-size: 26px;font-weight: bold;">{{ equipmentStatusData.total }}</span>
            </div>
          </el-col>
          <el-col :span="10">
            <div style="display: flex;justify-content: center;">
              <!--              <div style="position: absolute;bottom:40%;font-size:16px;">设备清单</div>-->
              <img :src="imgSrc" style="height: 120px;"/>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="device_num">
              <span class="background-image">在线设备</span>
              <span style="font-size: 26px;font-weight: bold;">{{ equipmentStatusData.onlineTotal }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="height: 33%;">
          <el-col :span="6" style="height: 100%;">
            <!--       #adcbe0     -->
            <color-tag :value="equipmentStatusData['缺数']" backgroundColor="#bb232f" label="缺数"></color-tag>
          </el-col>
          <el-col :span="6" style="height: 100%;">
            <!--       #adcbe0     -->
            <color-tag :value="equipmentStatusData['上下限异常']" backgroundColor="#b38b30"
                       label="上下限异常"></color-tag>
          </el-col>
          <el-col :span="6" style="height: 100%;">
            <!--       #adcbe0     -->
            <color-tag :value="equipmentStatusData['数据中断']" background-color="#97759c" label="数据中断"></color-tag>
          </el-col>
          <el-col :span="6" style="height: 100%;">
            <color-tag :value="equipmentStatusData['其他']" backgroundColor="#adcbe0" label="其他"></color-tag>
          </el-col>
        </el-row>
      </card01>
      <card01 style="height: 65%" title="设备清单">
        <stripe-table :columns="deviceColumns" :data="deviceData" @row-click="handleDeviceClick"></stripe-table>
      </card01>
      <!--      <card01 style="height: 33%" title="运维人员统计">-->
      <!--        <stripe-table :columns="operationsPersonnelColumns" :data="operationsPersonnelData"></stripe-table>-->
      <!--      </card01>-->
    </template>
    <template #rightModule>

      <card01 style="height: 33%" title="维护情况">
        <chart ref="right3Ref"></chart>
      </card01>
      <card01 style="height: 65%" title="故障报警列表">
        <stripe-table :columns="alarmColumns" :data="alarmData"></stripe-table>
      </card01>
    </template>
    <template #btnGroup>
      <station-right-button-group></station-right-button-group>
    </template>
  </right-frame>
</template>
<style lang="scss" scoped>
.background-image {
  background-image: url(/src/assets/images/layout/menu-right.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 40px;
}

.device_num {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.right-btn-container {
  display: flex;
  flex-direction: column;

  .right-btn-item {
    cursor: pointer;
    position: relative;

    &:hover, &.active {

      img {
        background-color: rgba(16, 136, 215, 0.6);
        border-radius: 8px;
      }

      > .right-btn-option-list {
        display: block;
      }

    }

    .right-btn-option-list {
      display: none;
      position: absolute;
      top: 0;
      right: 1.8rem;
      width: 160px;
      padding: 0 20px;
    }

    .right-btn-option {
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 4px;
      background-color: #394139;
      text-align: center;
      color: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1rem;

      svg {
        width: 1rem;
        height: 1rem;
        margin-left: .5rem;
      }

    }

  }
}

</style>