大屏操作指导

devlincms

已于 2022-05-22 00:53:27 修改

阅读量177

点赞数

文章标签： echarts javascript ecmascript

于 2022-05-19 18:26:35 首次发布

本文链接：https://blog.csdn.net/jiangdefu/article/details/124857285

版权

安装插件

图表插件

在项目目录执行如下命令

npm install @jiaminghi/data-view -save

在项目目录main.js 中添加如下代码

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

地图插件

npm install vue-baidu-map --save

使用

import BaiduMap from "vue-baidu-map";
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: "XLGgwzmDFtTEgXMDwHps6wTTFRsoQoxL"
});

参考文档
http://datav.jiaminghi.com/guide/borderBox.html#dv-border-box-11

页面代码

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="16"
        ><div class="left">
          <div class="left-content">
            <el-row :gutter="10">
              <el-col :span="16"
                ><div class="right-content-left">
                  <span class="title">项目信息</span>
                  <ul class="project">
                    <li
                      class="text"
                      v-for="(item, index) in project"
                      :key="index"
                      :title="item.title"
                    >
                      {{ item.title }}
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="right-content-left">
                  <span class="title">提示信息</span>
                  <ul class="project">
                    <li
                      class="text"
                      v-for="(item, index) in alarmInfo"
                      :key="index"
                      :title="item.title"
                    >
                      {{ item.title }}
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="right">
          <el-row class="device">
            <dv-border-box-8>
              <span class="device-status">设备监控</span>
              <div class="device-info">
                <div>
                  <h1 class="num green">36</h1>
                  <h6>在线设备(台)</h6>
                </div>
                <div>
                  <h1 class="num green">5</h1>
                  <h6>其他设备(台)</h6>
                </div>
                <div>
                  <h1 class="num red">1</h1>
                  <h6>离线设备(台)</h6>
                </div>
              </div>
            </dv-border-box-8>
          </el-row>
          <el-row class="event">
            <span class="event-record">当日时间记录</span>
            <el-row class="event-pad" :gutter="10">
              <el-col :span="8">
                <div class="event-border">
                  <span class="event-title white-font b-green ">电流复位</span>
                  <span class="event-title">32次</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="event-border">
                  <span class="event-title white-font b-red">电压复位</span>
                  <span class="event-title">16次</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="event-border">
                  <span class="event-title white-font b-blue">失败重试</span>
                  <span class="event-title">12次</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <div class="notice">
                <ul :class="{anim:animate==true,tt:true}">
                  <li v-for="(item,index) in noticeInfoList" :title="item.title" :class="anim" :key="index">{{item.title}}</li>
                </ul>
              </div>
            </el-row>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top:0.5vh">
      <el-col :span="16">
        <div class="bott-content b-blue" style="padding:5px">
          <dv-border-box-10 :color="colorChart" id="chart"
            ><div id="chart"></div>
          </dv-border-box-10>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bott-content">
          <div style="width:100%; height:100%">
            <baidu-map
              class="map-wrap"
              id="allmap"
              :center="mapData.center"
              :zoom="mapData.zoom"
            >
            </baidu-map>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.initChart(this.chartData);
    setInterval(this.initNoticeInfo,5000)
  },
  methods: {
    initNoticeInfo(){
         this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
         setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
               this.noticeInfoList.push({time:'2022-05-30 22:35:12',title:`${new Date().getTime()}AT:[2022-06-20 22:43:54]`});  // 将数组的第一个元素添加到数组的
               this.noticeInfoList.shift();               //删除数组的第一个元素
               this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
         },500)
    },
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
    },
    initChart(data) {
      let option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "实时用电能耗分项总览",
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: data.map(ele => ele.title)
        },
        toolbox: {
          feature: {
            saveAsImage: { iconStyle: { borderColor: "#fff" } },
            dataZoom: {
              //数据缩放视图
              show: true,
              iconStyle: { borderColor: "#fff" }
            },
            magicType: {
              //动态类型切换
              type: ["bar", "line"],
              iconStyle: { borderColor: "#fff" }
            }
          }
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: data.map(ele => {
          let d = {
            name: ele.title,
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, ele.color)
            },
            emphasis: {
              focus: "series"
            },
            data: ele.data
          };
          return d;
        })
      };
      let chart = echarts.init(document.getElementById("chart"));
      chart.setOption(option);
    }
  },
  destroyed(){
    if(this.timer){
      clearInterval(this.timer)
    }
    
  },
  data() {
    return {
      timer:null,
      animate:false,
      items:[
          {name:"今天天气怎么样"},
          {name:"今天天气不好"},
          {name:"哇塞多撒打算放"},
          {name:"阿发送方三房"},
          {name:"阿萨发顺丰都是地方"},
      ],
      project: [
        {
          title:
            "网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品网络L3级别自动化驾驶产品"
        },
        {
          title: "网络L3级别自动化驾驶产品"
        },
        {
          title: "网络L3级别自动化驾驶产品"
        }
      ],
      alarmInfo: [
        {
          title: "服务器内存过高-95% 发生时间：2022-05-19 22:22:12"
        },
        {
          title: "服务器内存过高-95% 发生时间：2022-05-19 22:22:12"
        },
        {
          title: "服务器内存过高-95% 发生时间：2022-05-19 22:22:12"
        }
      ],
      colorChart: ["#68f09e", "#22663d"],
      chartData: [
        {
          title: "高压",
          data: [140, 232, 101, 264, 90, 340, 250],
          color: [
            {
              offset: 0,
              color: "rgb(55, 162, 255)"
            },
            {
              offset: 1,
              color: "rgb(116, 21, 219)"
            }
          ]
        },
        {
          title: "低压",
          data: [120, 282, 111, 234, 220, 340, 310],
          color: [
            {
              offset: 0,
              color: "rgb(0, 221, 255)"
            },
            {
              offset: 1,
              color: "rgb(77, 119, 255)"
            }
          ]
        },
        {
          title: "超低压",
          data: [320, 132, 201, 334, 190, 130, 220],
          color: [
            {
              offset: 0,
              color: "rgb(55, 162, 255)"
            },
            {
              offset: 1,
              color: "rgb(116, 21, 219)"
            }
          ]
        }
      ],
      //商家信息(包含坐标信息)
      businessDetail: {},
      //地图数据
      mapData: {
        //中心坐标
        center: { lng: 118.4643, lat: 32.0238 },
        //缩放级别
        zoom: 13
      },
      //BMap类
      BMap: null,
      //地图对象
      map: null,
      noticeInfoList:[
        {time:'2022-05-30 22:35:12',title:'12AT:12AT[2022-06-20 22:43:54]'},
        {time:'2022-05-30 22:35:12',title:'12AT:12AT[2022-06-20 22:43:54]'},
        {time:'2022-05-30 22:35:12',title:'12AT:12AT[2022-06-20 22:43:54]'},
        {time:'2022-05-30 22:35:12',title:'12AT:12AT[2022-06-20 22:43:54]'},
        {time:'2022-05-30 22:35:12',title:'12AT:12AT[2022-06-20 22:43:54]'}
      ]
    };
  }
};
</script>

<style scoped>
.left {
  position: relative;
  background-image: url("../../assets/img/15.jpg");
  width: 100%;
  height: 60vh;
  background-size: cover;
  translate: 80%;
  border-radius: 5px;
}

.left-content {
  position: absolute;
  height: 20vh;
  width: 100%;
  padding: 10px;
  bottom: 20px;
  box-sizing: border-box;
}
.right-content-left {
  height: 20vh;
  width: 100%;
  background: #fff;
  border-radius: 5px;
  opacity: 0.7;
  overflow: auto;
  padding: 0px 10px;
  box-sizing: border-box;
}
.project {
  margin: 0px;
  list-style: none;
  line-height: 4vh;
  font-size: 14px;
  font-weight: 650;
  padding-left: 10px;
  padding-top: 5px;
}
.title {
  display: flex;
  height: 20px;
  padding: 10px 10px;
  font-size: 16px;
  font-weight: 650;
  border-bottom: #ccc solid 1px;
}
.text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.device {
  max-height: 29vh;
  width: 100%;
  background: #2c7f44;
  padding: 5px 10px;
  box-sizing: border-box;
}
.device-status {
  color: #fff;
  font-weight: 600;
  display: flex;
  font-size: 16px;
  padding: 2vh 3vh
}
.device-info {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  padding: 1vh 2vh;
}
.num {
  line-height: 2vh;
  font-size: 30px;
}
.green {
  color: #3fe122;
}
.red {
  color: red;
}
.event {
  margin-top: 1vh;
  max-height: 37vh;
  width: 100%;
  background: #fff;
  padding: 6px 1px;
  box-sizing: border-box;
  overflow: hidden;
}
.event-record {
  display: flex;
  background: #2c7f44;
  color: #fff;
  padding: 10px;
}
.event-title {
  display: flex;
  width: 100%;
  line-height: 4vh;
  align-items: center;
  justify-content: center;
}
.event-pad {
  padding: 5px 0px;
}
.event-border {
  border: #ccc 1px solid;
}
.white-font {
  color: #fff;
}
.b-green {
  background: #3fe122;
}
.b-d-green {
  background: #2c7f44;
}
.b-red {
  background: red;
}
.b-blue {
  background: blue;
}
.tt {
  line-height: 4vh;
  text-decoration: none;
  list-style: none;
  padding: 0px;
  margin: 0px;
  font-size: 15px;
  padding-left: 10px;
  background: #fff;
 
}
.anim{
   transition: all .5s;
   transform:translateY(-20%) ;
}
.bott-content {
  height: 26vh;
  width: 100%;
}
#allmap {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
.notice{
  background: #fff;
  box-shadow: 0px 0px 2px 2px rgb(230, 230, 230);
  padding: 5px; 
  width:100%;
  overflow: hidden;
}
</style>