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

最新推荐文章于 2024-05-14 17:29:11 发布

如花菇凉

最新推荐文章于 2024-05-14 17:29:11 发布

阅读量456

点赞数

分类专栏： VUE 前端文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/u012174809/article/details/122058522

版权

前端同时被 2 个专栏收录

179 篇文章 4 订阅

订阅专栏

VUE

146 篇文章 5 订阅

订阅专栏

<template>
  <div class="div3" style="height:627px;width:390px;background-color:#000000" >
    <dv-border-box-7 background-color="transparent">
      <div class="card-wrap">
        <div style="padding:10px;color:#cbbeaa">
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('alarm.deviceName') }}：</span>{{ deviceBean.name }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.deviceCode') }}：</span>{{ deviceBean.deviceCode }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.lotCode') }}：</span>{{ deviceBean.lotCode }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text"> sn：</span>{{ deviceBean.sn }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.deviceStatus') }}：</span>
              <!-- <el-tag :type="deviceBean.status | statusFilter"> -->
              <span :style="{color:deviceBean.status ? '#67C23A' : '#F56C6C' }"> {{ typeFilter(deviceBean.status) }}</span>
              <!-- </el-tag> -->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('userManage.currentStatus') }}：</span>
              <!-- <el-tag :type="deviceBean.enable | tag_userOrnotUse"> -->
              <span :style="{color:deviceBean.enable ? '#67C23A':'#F56C6C' }">{{ deviceBean.enable | userOrnotUse(te) }}</span>
              <!-- </el-tag> -->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.positionModel') }}：</span>
              <!-- <el-tag :type="deviceBean.positionModel | tag_positionModel"> -->
              <span :style="{color:deviceBean.positionModel ? '#409EFF' :'#67C23A' }">{{ deviceBean.positionModel | string_positionModel(te) }}</span>
              <!-- </el-tag> -->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.deviceCity') }}：</span>{{ deviceBean.cityName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('profile.address') }}：</span>{{ deviceBean.addr }}</el-col>
          </el-row>

          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.memory') }}：</span>{{ deviceBean.memory }} MB</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.cpu') }}：</span>{{ deviceBean.cpu }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.disk') }}：</span>{{ deviceBean.disk }} MB</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.mainboard') }}：</span>{{ deviceBean.mainboard }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.netModel') }}：</span>
              <!-- <el-tag :type="deviceBean.netModel | haveFilter"> -->
              <span>{{ deviceBean.netModel | netFilter(te) }}</span>
              <!-- </el-tag> -->
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.imServerCode') }}：</span>{{ deviceBean.imServerCode }}</el-col>
          </el-row> -->
          <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.dufVersion') }}：</span>{{ deviceBean.dufVersion }}</el-col>
          </el-row>

          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('terminalManage.versionInfo') }}：</span>{{ deviceBean.versionInfo }}</el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="24"><span class="title-text">{{ $t('deviceManage.opsVersioCode') }}：</span>{{ deviceBean.opsVersionCode }}</el-col>
          </el-row> -->
        </div>
      </div>
    </dv-border-box-7>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Div3',
  components: {
  },
  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 {
    }
  },
  computed: {
    ...mapGetters(['deviceBean'])
  },
  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]
    }
  }
}
</script>

<style lang="scss" scoped>
.div3 {
  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>

<template>
  <div class="div4" style="height:418px;width:200px;margin-top:0px;background-color:#000000" >
    <dv-border-box-7 background-color="transparent">
      <div class="card-wrap">
        <div style="padding:10px">
          <el-row >
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm004') }}：<span :style="{color:deviceAlarmData[4]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[4] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm005') }}：<span :style="{color:deviceAlarmData[5]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[5] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm006') }}：<span :style="{color:deviceAlarmData[6]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[6] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm007') }}：<span :style="{color:deviceAlarmData[7]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[7] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm008') }}：<span :style="{color:deviceAlarmData[8]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[8] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm009') }}：<span :style="{color:deviceAlarmData[9]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[9] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm010') }}：<span :style="{color:deviceAlarmData[10]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[10] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm011') }}：<span :style="{color:deviceAlarmData[11]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[11] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm012') }}：<span :style="{color:deviceAlarmData[12]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[12] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm013') }}：<span :style="{color:deviceAlarmData[13]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[13]| string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm014') }}：<span :style="{color:deviceAlarmData[14]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[14] | string_Alarm(te) }}</span></span></el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="24"><span class="title-text">{{ $t('alarm.alarm015') }}：<span :style="{color:deviceAlarmData[15]==-999 ? '#F56C6C' : '#67C23A'}">{{ deviceAlarmData[15]| string_Alarm(te) }}</span></span></el-col>
          </el-row>

        </div>
      </div>
    </dv-border-box-7>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Div4',
  components: {
  },
  filters: {
    string_Alarm(type, te) {
      if (type == -999) {
        return te('alarm.type3')
      } else {
        return type
      }
    }
  },
  props: {
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['deviceAlarmData'])
  },
  created() {
  },
  methods: {
    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    }

  }
}
</script>

<style lang="scss" scoped>
.div4 {
  background-color: #fff;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  padding-bottom: 10px;
      .card-wrap {
      text-align: left;
      padding:5px 10px;
      width: 200px;
      height: 10px;
         .title-text {
   font-size: 11px;
        margin-top: 10px;
        color: #939faa;
    margin-bottom: 5px;
  }
    }
}
</style>

<template>
  <div class="div5" style="height:418px;width:300px;margin-top:0px;background-color:#000000" >
    <dv-border-box-7 background-color="transparent">
      <div id="container" 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: 'Div5',
  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', 'setControlVisible', '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[19])
        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: 'cpu使用率',
              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.option = {
      title: {
        text: 'cpu使用率',
        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)
  },
  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[19])

      var that = this
      this.$nextTick(() => {
        const container = document.getElementById('container')
        this.myChart = new Charts(container)
        this.option = {
          title: {
            text: 'cpu使用率',
            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()
        // })
      })
    },
    resetForm() {
      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.setOption(this.option)
    }

  }
}
</script>

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

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

<template>
  <div class="div6" style="height:418px;width:300px;margin-top:0px;background-color:#000000" >
    <dv-border-box-7 background-color="transparent">
      <div id="container2" 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: 'Div6',
  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[20])
        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[20])

      var that = this
      this.$nextTick(() => {
        const container = document.getElementById('container2')
        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>
.div6 {
  background-color: #fff;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  padding-bottom: 10px;
   .chart{
    height: 418px;
    margin-left: 15px;
  }

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

如花菇凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化组件库 jiaminghi(二)

<template> <div class="div3" style="height:627px;width:390px;background-color:#000000" > <dv-border-box-7 background-color="transparent"> <div class="card-wrap"> <div style="padding:10px;color:#cbbeaa"> .
复制链接

扫一扫

专栏目录