zhihuigan/src/views/monitor/index.vue

<template>
  <div class="app-container app-box">

    <div class="app-left">
      <div class="dept-tree">
        <div class="dtree-head">按设备组查看</div>
        <el-tree
          ref="dept-tree"
          :props="defaultProps"
          :data="deviceGroupList"
          class="filter-tree"
          :expand-on-click-node="false"
          highlight-current
          default-expand-all
          @node-click="groupNodeClick"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <i v-if="data.children.length<=0 && node.expanded" class="el-icon-tickets" />
            <i v-else-if="data.children && node.expanded" class="el-icon-folder-opened" />
            <i v-else class="el-icon-folder" />
            <span class="fontSize14" :title="node.label || &quot;-&quot;">{{ node.label }}</span>
          </span>
        </el-tree>
        <div class="dtree-head" style="margin-top:30px;cursor:pointer">按传感器类型查看</div>
        <ul class="sensorlist">
          <li v-for="(item) in sensorData" :key="item.id" @click="sensorNodeClick(item.id)">
            <svg-icon :icon-class="item.icon" class-name="shuiwei" style="font-size:18px" />{{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="app-right">
      <div class="table-top">
        <el-button size="mini" type="info" plain @click="tableExpend">{{ expendName }}</el-button>
        <el-button size="mini" type="warning" plain @click="dispAllDev">显示所有设备</el-button>
        <el-button size="mini" type="success" plain @click="tableExpend">显示所有在线设备</el-button>
        <el-button size="mini" type="danger" plain @click="tableExpend">显示所有离线设备</el-button>

        <div class="devmsg">共 {{ totalNum }} 个智慧杆设备，离线 {{ offlineNum }} 个，在线 {{ onlineNum }} 个，预警 {{ yujinNum }} 个</div>
      </div>
      <div class="app-r-table">
        <el-table
          v-if="refreshtable"
          ref="userLevel"
          :data="tableData"
          style="margin-bottom: 20px;width: 100%;"
          height="calc(100vh - 220px)"
          row-key="id"
          :row-style="{height: '0'}"
          :header-cell-style="{ background: '#f8f8f8', color: '#333', padding: '8px' }"
          :header-row-style="{padding:'0px'}"
          :cell-style="{ padding: '8px' }"
          :show-header="false"
          :default-expand-all="expendAll"
          :tree-props="{children: 'sensors', hasChildren: 'hasChildren'}"
          :row-class-name="tableRowClassName"
          class="tableClass"
        >
          <el-table-column prop="devname" label="设备名">
            <template slot-scope="scope">

              <svg-icon
                v-if="!scope.row.sensors"
                :icon-class="reIcoValue(scope.row.type)"
                class-name="shuiwei"
                :style="connectStyle(scope.row.linkStatus,scope.row.redWarning,scope.row.yellowWarning,scope.row.orangeWarning)"
              />
              <span v-if="!scope.row.sensors" class="devicename" :style="connectStyle(scope.row.linkStatus,scope.row.redWarning,scope.row.yellowWarning,scope.row.orangeWarning)">{{
                scope.row.name }}</span>
              <span v-if="scope.row.sensors" class="devicename">{{ scope.row.name }}<span style="color:cornflowerblue">{{ scope.row.linkStatus == 1 ? '' : '（离线）' }}</span></span>
              <!-- <span v-if="scope.row.imei" class="devicename">，IMEI:{{ scope.row.imei }}</span> -->
              <!-- <span v-if="scope.row.address" class="devicename" style="font-weight:normal;font-size: 14px;">，地址：{{ scope.row.address }}</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="status" label="设备状态">
            <template slot-scope="scope">
              <span v-if="scope.row.imei" class="devicename">IMEI:{{ scope.row.imei }}</span>
              <span v-if="!scope.row.sensors" :style="connectStyle(scope.row.linkStatus,scope.row.redWarning,scope.row.yellowWarning,scope.row.orangeWarning)">
                {{ scope.row.linkStatus == 1 ? '已连接' : '未连接' }}
                <span class="sport">，端口{{ scope.row.devPort }}</span>
                <div class="updatetime">更新：{{ scope.row.lastUpdateTime }}</div>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="currentValue" label="设备值">
            <template slot-scope="scope">
              <span class="valuestyle" :style="connectStyle(scope.row.linkStatus,scope.row.redWarning,scope.row.yellowWarning,scope.row.orangeWarning)">{{ scope.row.currentValue }} {{
                scope.row.unitName }}
                <span v-if="scope.row.type ==3">{{ reFengxiang(scope.row.currentValue ) }}</span>
                <span v-if="!scope.row.sensors" class="warnstyle" title="已达到预警值，请及时处理">
                  <svg-icon

                    icon-class="jinggao"
                    class-name="jinggao"
                    :style="reWarn(scope.row.linkStatus,scope.row.redWarning,scope.row.yellowWarning,scope.row.orangeWarning)"
                  /></span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作项">
            <template slot-scope="scope">

              <span
                v-if="!scope.row.sensors"
                class="historydata"
                :style="connectStyle(scope.row.linkStatus)"
                @click="showlog(scope.row.id,scope.row.name)"
              ><i class="el-icon-s-data" /> 历史数据</span>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page-size.sync="listQuery.PageSize"
        :page-no.sync="listQuery.PageNo"
        @pagination="getList"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="dialogFromTitle"
      :visible.sync="showLogDailog"
      :close-on-click-modal="false"
      width="80%"
    >
      <linechart :chart-data="lineChartData" />
    </el-dialog>
  </div>
</template>

<script>
import { getDeviceList, getDevReport } from '@/api/device'
import { getDeviceGroupList } from '@/api/devgroup'
import { getSensorLog, getSensorTypeList } from '@/api/sensor'
import elDragDialog from '@/directive/el-drag-dialog'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import linechart from './components/LineChart'
const lineChartData = {
  newVisitis: {
    expectedData: [],
    titleData: [],
    actualData: []
  }
}
export default {
  name: 'Monitor',
  components: { Pagination, linechart },
  directives: { elDragDialog },
  data() {
    return {
      refreshtable: true,
      expendAll: true,
      lineChartData: lineChartData.newVisitis,
      activeNames: ['1'],
      deviceGroupList: [],
      defaultProps: { label: 'name', children: 'children' },
      dialogFromTitle: '',
      tableData: [],
      listLoading: true,
      listQuery: {
        PageNo: 1,
        PageSize: 10,
        name: '',
        GroupCode: -1,
        type: ''
      },
      total: 0,
      timer: null, // 定时器名称
      logData: [],
      showLogDailog: false,
      timerLogSensor: {
        id: '',
        name: ''
      },
      sensorList: [],
      sensorData: [],
      currenSensorId: -1,
      expendName: '收起列表',
      onlineNum: '',
      offlineNum: '',
      totalNum: '',
      yujinNum: ''
    }
  },
  mounted() {
    this.getDevReportInfo()
    this.getList()
    this.getSensorList()
    this.get_DeviceGroupList()
    this.timer = setInterval(() => {
      if (this.showLogDailog === true && this.timerLogSensor.id !== '') {
        setTimeout(this.showlog(this.timerLogSensor.id, this.timerLogSensor.name), 0)
      }

      if (this.currenSensorId !== -1) {
        setTimeout(this.getSensorDataList, 0)
      } else {
        setTimeout(this.getList, 0)
      }
    }, 1000 * 10)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    dispAllDev() {
      this.listQuery.GroupCode = -1
      this.listQuery.type = ''
      this.currenSensorId = -1
      this.getSensorList()
      this.get_DeviceGroupList()
      this.getList()
    },
    tableExpend() {
      this.refreshtable = false
      this.expendAll = !this.expendAll
      if (this.expendAll === false) {
        this.expendName = '展开列表'
      } else {
        this.expendName = '收起列表'
      }
      this.$nextTick(() => {
        this.refreshtable = true
      })
    },
    sensorNodeClick(sensorId) {
      this.currenSensorId = sensorId
      this.getSensorDataList(sensorId)
    },
    async getDevReportInfo() {
      await getDevReport().then(response => {
        this.totalNum = response['data']['数量']
        this.onlineNum = response['data']['在线数量']
        this.offlineNum = response['data']['离线数量']
        this.yujinNum = response['data']['预警数量']
      })
    },
    async getSensorDataList() {
      const { PageNo, PageSize } = this.listQuery
      await getDeviceList({ PageNo, PageSize, SensorType: this.currenSensorId }).then(response => {
        this.total = response.data.total
        this.tableData = response.data.items
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    async groupNodeClick(obj, node, self) {
      this.currenSensorId = -1
      this.listQuery.GroupCode = obj.id === '0' || obj.id === 0 ? -1 : obj.id
      this.listLoading = true
      const { PageNo, PageSize, GroupCode } = this.listQuery
      await getDeviceList({ PageNo, PageSize, GroupCode }).then(response => {
        this.total = response.data.total
        this.tableData = response.data.items
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    async get_DeviceGroupList() {
      this.listLoading = true
      await getDeviceGroupList({ PageNo: 1, PageSize: 10000 }).then(response => {
        const list1 = []
        const list2 = []
        const rData = response.data.items
        console.log('rData', rData.length)
        for (let index = 0; index < rData.length; index++) {
          const childrens = rData[index].children

          for (let n = 0; n < childrens.length; n++) {
            childrens[n].name = childrens[n].name + '(' + childrens[n].count + ')'
          }

          list2[index] = { id: rData[index].id, name: rData[index].name + '(' + rData[index].count + ')', children: childrens }
        }
        list1[0] = { id: '0', name: '所有分组', children: list2 }
        this.deviceGroupList = list1
      }).catch(() => {
        this.listLoading = false
      })
    },
    refresh() {
      this.timer = setTimeout(async() => {
        await this.getList()
      }, 5000) // 设置五秒后刷新
    },
    getList() {
      this.listLoading = true
      getDeviceList(this.listQuery).then(response => {
        this.tableData = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    tableRowClassName(row, rowIndex) {
      if (row.row.sensors) {
        return 'warning-row'
      }
    },
    handleChange(val) {
      console.log(val)
    },
    reWarn(cn, red = false, yellow = false, orange = false) {
      if (cn !== 1) return { display: 'none' }
      if (red === true && cn === 1) {
        return {
          color: 'red',
          fontWeight: 'bold'
        }
      }
      if (yellow === true && cn === 1) {
        return {
          color: 'yellow',
          fontWeight: 'bold'
        }
      }
      if (orange === true && cn === 1) {
        return {
          color: 'orange',
          fontWeight: 'bold'
        }
      }
      return { display: 'none' }
    },
    connectStyle(cn, red = false, yellow = false, orange = false) {
      if (cn !== 1) {
        return {
          color: 'rgb(187 186 186)',
          fontWeight: 'bold'
        }
      } else {
        if (red === true) {
          return {
            color: 'red',
            fontWeight: 'bold'
          }
        } else if (yellow === true) {
          return {
            color: 'yellow',
            fontWeight: 'bold'
          }
        } else if (orange === true) {
          return {
            color: 'orange',
            fontWeight: 'bold'
          }
        } else {
          return ''
        }
      }
    },
    showlog(id, name) {
      const logQuery = { id: id }
      this.timerLogSensor.id = id
      this.timerLogSensor.name = name
      getSensorLog(logQuery).then(response => {
        this.logData = response.data.items
        const rData = response.data.items
        const tData = []
        const vData = []

        for (let index = 0; index < rData.length; index++) {
          const cIndex = rData.length - 1 - index
          tData[index] = rData[cIndex]['recTime']
          vData[index] = rData[cIndex]['currentValue']
        }
        this.lineChartData.titleData = tData
        this.lineChartData.expectedData = vData
        this.dialogFromTitle = name + '的历史数据'
        this.showLogDailog = true
      })
    },
    getSensorList() {
      getSensorTypeList().then(response => {
        const rData = response.data
        this.sensorData = rData
        const tempData = {}
        rData.forEach(element => {
          tempData[element['id']] = element.icon
        })
        this.sensorList = tempData
      })
    },
    reIcoValue(itype) {
      const icon = this.sensorList[itype]
      return icon || ''
    },
    reFengxiang(du) {
      const aDu = parseInt(du)
      let x = ''
      switch (true) {
        case aDu >= 0 && aDu <= 22:

          x = '北风'
          break
        case aDu >= 338 && aDu <= 360:
          x = '北风'
          break
        case aDu >= 23 && aDu <= 67:
          x = '东北风'
          break
        case aDu >= 68 && aDu <= 111:
          x = '东风'
          break
        case aDu >= 112 && aDu <= 157:
          x = '东南风'
          break
        case aDu >= 158 && aDu <= 201:
          x = '南风'
          break
        case aDu >= 202 && aDu <= 247:
          x = '西南风'
          break
        case aDu >= 248 && aDu <= 290:
          x = '西风'
          break
        case aDu >= 291 && aDu <= 337:
          x = '西北风'
          break
        default:
          x = ''
      }
      return x
    }
  }
}
</script>

<style lang="scss" >
.warnstyle{
  font-size: 18px;
  color:#666;
  font-weight: normal;
  margin-left: 5px;
}
.app-box {
  display: flex;
}

.app-left {
  width: 300px;
  padding: 10px;
  background: #fff;
  height: calc(100vh - 100px);
}

.app-right {
  width: calc(100vw - 415px);
  margin-left: 15px;
  padding: 15px;
  background: #fff;
  height: calc(100vh - 100px);
}

.dept-tree {
  width: 100%;
}

.valuestyle {
  font-size: 20px;
  color: rgb(12, 184, 12);
  font-weight: bold;
}

.el-table .warning-row {
  background: rgb(246, 249, 252) !important;
  font-weight: bold;
}

.dtree-head {
  background: #409EFF;
  color: #fff;
  font-size: 14px;
  padding: 8px 0px 8px 0px;
  text-align: center;
  margin-bottom: 12px;
  cursor: pointer;
}

.dtree-head:hover {
  background: #0881fa
}

.shuiwei {
  color: #8e7eff;
  font-size: 22px;
  margin-right: 10px;
}

.devicename {
  font-weight: bold;
}

.valuemaxstyle {
  color: red;
}

.queryhistory {
  cursor: pointer;
  color: #087df3
}

.noconnect {
  color: #ccc
}

.historydata {
  color: #b10606;
  cursor: pointer;
}

.sensorlist,
.sensorlist li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.sensorlist {
  width: 90%;
  padding-left: 10%
}

.sensorlist li {
  padding: 8px 0px 0px 0px;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
}

.sensorlist li:hover {
  color: #087df3;
}

.sensorlist li svg-icon {
  font-size: 12px;
}

.fontSize14 {
  font-size: 14px;
}

.sport {
  font-size: 12px;
  font-weight: normal;
}

.updatetime {
  font-size: 12px;
  font-weight: normal;
}
.table-top{padding: 0px 0px 5px 0px; width: 100%; display: flex;}
.devmsg{line-height: 30px;margin-left:20px;color:#076ace;font-size:14px}
</style>>