数据可视化组件库 jiaminghi(三)

<template>
  <div class="div7" style="height:210px;width:388px;background-color:#000000" >
    <dv-border-box-7 background-color="transparent">
      <div id="container3" class="chart"></div>
    </dv-border-box-7>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import Charts from '@jiaminghi/charts'
export default {
  name: 'Div7',
  components: {
  },
  filters: {

  },
  props: {

  },
  data() {
    return {
      dataTime: ['00:00', '00:00', '00:00', '00:00', '00:00', '00:00', '00:00'],
      dataVlue: [0, 0, 0, 0, 0, 0, 0],
      myChart: undefined,
      option: undefined
    }
  },
  computed: {
    ...mapGetters(['deviceAlarmData', 'controlInit']),
    deviceAlarmData_watch: {
      get() {
        return this.deviceAlarmData
      }
    }
  },
  watch: {
    deviceAlarmData_watch(newVal, oldVal) {
      if (newVal == oldVal) {
        return
      } else {
        var nowDate = new Date()
        var currentTime = this.common.datetimeFormat(nowDate, 'mm:ss')
        this.dataTime.splice(0, 1)
        Vue.set(this.dataTime, 6, currentTime)
        this.dataVlue.splice(0, 1)
        Vue.set(this.dataVlue, 6, this.deviceAlarmData[21])
        this.myChart.setOption(this.option)
      }
    },
    controlInit(newVal, oldVal) {
      if (newVal) {
        this.dataTime = ['00:00', '00:00', '00:00', '00:00', '00:00', '00:00', '00:00']
        this.dataVlue = [0, 0, 0, 0, 0, 0, 0]
        if (this.myChart) {
          this.option = {
            title: {
              text: '储存使用率',
              style: {
                fill: '#cbbeaa'
              }
            },
            xAxis: {
              name: '时间',
              data: this.dataTime,
              nameTextStyle: {
                fill: '#cbbeaa',
                fontSize: 8
              },
              axisLabel: {
                style: {
                  fill: '#cbbeaa'
                }
              }
            },
            yAxis: {
              name: '使用率',
              data: 'value',
              min: 0, // 最小值
              max: 100, // 最大值
              axisLabel: {
                style: {
                  fill: '#cbbeaa'
                }
              },
              nameTextStyle: {
                fill: '#cbbeaa'
              },
              axisLine: {
                style: {
                  stroke: '#cbbeaa'
                }
              }
            },
            series: [
              {
                data: this.dataVlue,
                type: 'line',
                lineArea: {
                  show: true,
                  gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
                }
              }
            ]
          }
          this.myChart.setOption(this.option)
        }
      }
    }
  },
  mounted() {
  },
  created() {
    this.init()
  },
  beforeDestroy() {
    this.dataTime = ['00:00', '00:00', '00:00', '00:00', '00:00', '00:00', '00:00'],
    this.dataVlue = [0, 0, 0, 0, 0, 0, 0],
    this.myChart = undefined,
    this.option = undefined
  },
  methods: {
    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    },
    init() {
      var nowDate = new Date()
      var currentTime = this.common.datetimeFormat(nowDate, 'mm:ss')
      this.dataTime.splice(0, 1)
      Vue.set(this.dataTime, 6, currentTime)
      this.dataVlue.splice(0, 1)
      Vue.set(this.dataVlue, 6, this.deviceAlarmData[21])

      var that = this
      this.$nextTick(() => {
        const container = document.getElementById('container3')
        this.myChart = new Charts(container)
        this.option = {
          title: {
            text: '储存使用率',
            style: {
              fill: '#cbbeaa'
            }
          },
          xAxis: {
            name: '时间',
            data: that.dataTime,
            nameTextStyle: {
              fill: '#cbbeaa',
              fontSize: 8
            },
            axisLabel: {
              style: {
                fill: '#cbbeaa'
              }
            }
          },
          yAxis: {
            name: '使用率',
            data: 'value',
            min: 0, // 最小值
            max: 100, // 最大值
            axisLabel: {
              style: {
                fill: '#cbbeaa'
              }
            },
            nameTextStyle: {
              fill: '#cbbeaa'
            },
            axisLine: {
              style: {
                stroke: '#cbbeaa'
              }
            }
          },
          series: [
            {
              data: that.dataVlue,
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            }
          ]
        }
        this.myChart.setOption(this.option)
        // 图表自适应
        // window.addEventListener('resize', function() {
        //   this.myChart.resize()
        // })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.div7 {
  background-color: #fff;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  padding-bottom: 10px;
   .chart{
    height: 200px;
    margin-left: 15px;
  }

  h2{
    height: 48px;
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
  }
}
</style>

<template>
  <div class="div8" style="height:627px;width:183px;background-color:#000000" >
    <dv-border-box-7 background-color="transparent">
      <div class="card-wrap">
        <div style="padding:10px">
          <el-row >
            <el-col :span="24">
              <dv-decoration-9 style="margin-left:10px;width:100px;height:100px;"><span :style="{color:isonline_color}">{{ typeFilter(deviceBean.status) }}</span></dv-decoration-9>
            </el-col>
          </el-row>
          <el-row style="margin-top:15px">
            <el-col :span="24"><el-button :loading="restart_loading" size="medium" type="primary" icon="el-icon-refresh-right" style="width:125px;margin-right:10px" @click="handleRestartDevice()">{{ $t('deviceManage.restart') }}</el-button>
            </el-col>
          </el-row>

          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button size="medium" type="primary" icon="el-icon-camera" style="width:125px;margin-right:10px" @click="CheckPrintScreen()">{{ $t('deviceManage.printScreen') }}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button :loading="cmd_loading" size="medium" type="primary" icon="el-icon-cpu" style="width:125px;margin-right:10px" @click="handleCommand()"> {{ $t('terminalManage.cmd') }} </el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button :loading="apply_manage_loading" size="medium" type="primary" icon="el-icon-menu" style="width:125px;margin-right:10px" @click="handleApply()">{{ $t('terminalManage.applyManage') }}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button size="medium" type="primary" icon="el-icon-download" style="width:125px;margin-right:10px" @click="pull_files_bydevice()">{{ $t('deviceManage.pullFiles') }}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button size="medium" type="primary" icon="el-icon-setting" style="width:125px;margin-right:10px" @click="setting_alarm()">{{ $t('deviceManage.settingalarm') }}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button size="medium" type="primary" icon="el-icon-setting" style="width:125px;margin-right:10px" @click="setting_device()">{{ $t('deviceManage.settingdevice') }}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button size="medium" type="primary" icon="el-icon-edit" style="width:125px;margin-right:10px" @click="edit_row()">{{ $t('common.edit') }}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button :loading ="refresh_loading" size="medium" icon="el-icon-magic-stick" style="width:125px;margin-right:10px" type="primary" @click="refresh()">{{ $t('tagsView.refresh') }}</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:8px">
            <el-col :span="24">
              <el-button size="medium" style="width:125px;margin-right:10px;margin-bottom:10px" @click="close_bigDialog()">{{ $t('common.close') }}</el-button>
            </el-col>
          </el-row>
          <span style="margin-left:20px;font-size:12px;color:#67C23A;">
            <span v-show="count >0">{{ count }}{{ $t('alarm.afterFresh') }}</span>
          </span>
        </div>
      </div>
    </dv-border-box-7>
    <table-dialog :id="deviceBean.id" :show.sync="showDialog" :from1="1" @refresh_detail="refresh_detail"></table-dialog>
    <print-screen-dialog :id="deviceBean.id" :device-code="deviceBean.deviceCode" :name="deviceBean.name" :show.sync="showPrintScreenDialog"></print-screen-dialog>
    <setting-device-dialog :id="deviceBean.id" :code="deviceBean.deviceCode" :name="deviceBean.name" :show.sync="setting_device_show"></setting-device-dialog>
    <setting-alarm-dialog :id="deviceBean.id" :code="deviceBean.deviceCode" :name="deviceBean.name" :show.sync="setting_alarm_show"></setting-alarm-dialog>
    <file-pull-dialog :id="deviceBean.id" :code="deviceBean.deviceCode" :name="deviceBean.name" :show.sync="fillpull_device_show"></file-pull-dialog>
    <!--命令弹框-->
    <command-dialog :id="deviceBean.id" :name="deviceBean.name" :device-code="deviceBean.deviceCode" :show.sync="showCommandDialog"></command-dialog>
    <!--应用管理-->
    <apply-manage-dialog :id="deviceBean.id" :name="deviceBean.name" :code="deviceBean.deviceCode" :show.sync="showApplyDialog"></apply-manage-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import commandDialog from '@/components/device/command-dialog'
import applyManageDialog from '@/components/device/apply-manage-dialog'
import tableDialog from '@/components/device/table-dialog'
import printScreenDialog from '@/components/device/print-screen-dialog'
import settingDeviceDialog from '@/components/device/setting-device-dialog'
import settingAlarmDialog from '@/components/device/setting-alarm-dialog'
import filePullDialog from '@/components/device/file-pull-dialog'
import bigControlDiv from '@/components/control-div/big-control-div'
export default {
  name: 'Div8',
  components: {
    commandDialog,
    applyManageDialog,
    tableDialog,
    printScreenDialog,
    settingDeviceDialog,
    settingAlarmDialog,
    filePullDialog,
    bigControlDiv
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        true: 'success',
        false: 'danger'
      }
      return statusMap[status]
    },
    string_positionModel(positionModel, te) {
      return positionModel ? te('deviceManage.positionModel1') : te('deviceManage.positionModel0')
    },
    tag_positionModel(positionModel) {
      return positionModel == 1 ? 'success' : 'primary'
    },
    userOrnotUse(enable, te) {
      return enable ? te('userManage.usable') : te('userManage.unusable')
    },
    tag_userOrnotUse(enable) {
      return enable == 1 ? 'success' : 'danger'
    },
    haveFilter(type) {
      return type > 0 ? 'success' : 'danger'
    },
    netFilter(net, t) {
      if (net === 3) {
        return t('deviceManage.mobileNet') // 移动网络
      } else if (net === 2) {
        return t('deviceManage.wifiNet') // wifi
      } else if (net === 1) {
        return t('deviceManage.etherNet') // 以太网
      } else {
        return t('deviceManage.unknown') // 未知
      }
    }
  },
  props: {
  },
  data() {
    return {
      cmd_loading: false,
      apply_manage_loading: false,
      showCommandDialog: false,
      showApplyDialog: false,
      setting_device_show: false,
      setting_alarm_show: false,
      fillpull_device_show: false,
      showPrintScreenDialog: false,
      restart_loading: false,
      showDialog: false,
      printScreen_loading: false,
      refresh_loading: false,
      ruleForm: {
        name: '',
        code: '',
        lotCode: '',
        city: '',
        cityName: '',
        addr: '',
        positionModel: 0,
        enable: true,
        status: false,
        memory: '',
        cpu: '',
        disk: '',
        mainboard: '',
        netModel: 0,
        imServerCode: '',
        dufVersion: '',
        opsVersionName: '',
        opsVersioCode: ''
      }
    }
  },
  computed: {
    ...mapGetters(['allCityOptionsMap', 'deviceBean', 'count']),
    isonline_color: {
      get() {
        return this.deviceBean.status ? '#67C23A' : '#F56C6C'
      }
    }
  },
  created() {
  },
  methods: {
    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    },
    typeFilter(status) {
      const statusMap = {
        true: this.$t('deviceManage.online'),
        false: this.$t('deviceManage.offline')
      }
      return statusMap[status]
    },
    async detail() {
      this.refresh_loading = true
      const para = {
        data: {
          id: this.deviceBean.id
        }
      }
      this.urlmethod(this.url.device.detail, para)
        .then((res) => {
          this.ruleForm = { ...res.data }
          if (this.ruleForm.city) {
            this.ruleForm.cityName = this.allCityOptionsMap[this.ruleForm.city] ? this.allCityOptionsMap[this.ruleForm.city].label : this.ruleForm.city
          }
          this.ruleForm.status = false
          // this.isonline_color = '#F56C6C'
          const para = { data: { dcode: this.ruleForm.deviceCode }}

          //  const { data } = await this.urlmethod(this.url.device.isOnline, para)
          //   if (data.online) {
          //      this.ruleForm.status = true
          //     this.isonline_color = '#67C23A'
          //   }

          this.urlmethod(this.url.device.isOnline, para).then((res) => {
            if (res.data && res.data.online) {
              this.ruleForm.status = true
              // this.isonline_color = '#67C23A'
            }
            this.$store.dispatch('user/setDeviceBean', this.ruleForm) // 跟新vuex中保存的信息
            this.refresh_loading = false
          }).catch(err => {
            this.refresh_loading = false
            console.log('err', err)
          })
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    get_alarmData() {
      this.refresh_loading = true
      const para = {
        data: {
          cmd: this.config.cmd + 'getDatas',
          dcode: this.deviceBean.deviceCode,
          return0: false
        }
      }
      // this.$store.dispatch('user/setDeviceAlarmData', [1, 0, -999, 0, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 56, 82, 52, 56, 55, 85, -999]) // 跟新vuex中保存的信息
      this.urlmethod(this.url.device.cmd_device, para)
        .then(res => {
          this.refresh_loading = false
          res.data[19] = (res.data && res.data[19] != -999 ? res.data[19] : 0)
          res.data[20] = (res.data && res.data[20] != -999 ? res.data[20] : 0)
          res.data[21] = (res.data && res.data[21] != -999 ? res.data[21] : 0)
          this.$store.dispatch('user/setDeviceAlarmData', res.data ? res.data : [-999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, -999, 0, 0, 0, -999]) // 跟新vuex中保存的信息
        })
        .catch(err => {
          this.refresh_loading = false
          console.log('err', err)
        })
    },
    refresh() {
      this.refresh_loading = true
      //  this.$store.dispatch('user/setCount', 10) // 跟新vuex中保存的信息
      this.detail()
      this.get_alarmData()
    },
    refresh_detail() {
      this.refresh_loading = true
      this.detail()
    },
    edit_row() {
      this.showDialog = true
    },
    pull_files_bydevice() {
      this.fillpull_device_show = true
    },

    handleCommand() {
      this.showCommandDialog = true
    },
    handleApply() {
      this.showApplyDialog = true
    },

    setting_device() {
      this.setting_device_show = true
    },
    setting_alarm() {
      this.setting_alarm_show = true
    },
    // 截屏
    handlePrintScreen() {
      this.printScreen_loading = true
      const para = {
        data: {
          dcode: this.deviceBean.deviceCode,
          cmd: this.config.cmd + 'printscreen'
        }
      }
      this.urlmethod(this.url.device.cmd_device, para)
        .then(() => {
          this.printScreen_loading = false
          this.$message({
            message: this.$t('deviceManage.printScreenSuccess'), // 截屏成功
            type: 'success'
          })
        })
        .catch(err => {
          this.printScreen_loading = false
          console.log(err)
        })
    },
    // 查看截屏
    CheckPrintScreen() {
      this.showPrintScreenDialog = true
    },
    close_bigDialog() {
      this.$store.dispatch('user/SETControlVisible', false) // 跟新vuex中保存的信息
    },

    // 重启终端
    handleRestartDevice() {
      this.restart_loading = true
      const para = {
        data: {
          dcode: this.deviceBean.deviceCode,
          cmd: this.config.cmd + 'restart'
        }
      }
      this.urlmethod(this.url.device.cmd_device, para)
        .then(() => {
          this.restart_loading = false
          this.$message({
            message: this.$t('deviceManage.restartSuccess'), // 重启成功
            type: 'success'
          })
        })
        .catch(err => {
          this.restart_loading = false
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.div8 {
  background-color: #fff;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  padding-bottom: 10px;
      .card-wrap {
      text-align: left;
      padding:10px 20px;
      width: 390px;
      height: 10px;
         .title-text {
    color:#99a9bf;
    display:inline-block;
    margin-bottom: 15px;
  }
    }
}
</style>