使用@jiaminghi/data-view实现一个数据大屏

<template><div class="content bg"><!-- 全局容器 --><!-- <dv-full-screen-container> --><!-- 第二行 --><div class="module-box" style="align-items: start; margin-top: 10px"><!-- 左 --><div style="flex: 0 1 30%"><dv-decoration-10 style="height: 5px" /></div><div style="flex: 0 1 40%"><div class="d-flex"><dv-decoration-8 style="height: 50px; flex: 1" /><div style="flex: 1" class="tc box-middle"><dv-decoration-11 style="height: 50px">智慧工厂数据中心</dv-decoration-11></div><dv-decoration-8 :reverse="true" style="height: 50px; flex: 1" /></div></div><div style="flex: 0 1 30%"><dv-decoration-10 style="height: 5px; transform: rotateY(180deg)" /></div></div><!-- 第二行 --><div class="module-box"><!-- 左 --><div style="flex: 0 1 25%"><dv-border-box-13 style="width: 100%; height: 200px"><div style="box-sizing: border-box"><div style="height: 30px; padding: 20px 20px 0 20px"><div>设备能耗监测</div><div><dv-decoration-3 style="width: 100px; height: 10px" /></div></div><div style="padding: 10px"><Bar style="width: 100%; height: 130px"></Bar><!-- <dv-capsule-chart :config="config_bar" style="width: 100%; height: 140px" /> --></div></div></dv-border-box-13><dv-border-box-1 style="width: 100%; height: 200px"><div style="box-sizing: border-box"><div style="height: 30px; padding: 20px 20px 0 20px"><div>仓库存储量</div><div><dv-decoration-6 style="width: 100px; height: 10px" /></div></div><div style="padding: 0 10px 10px 10px"><dv-capsule-chart:config="config_capsule"style="width: 100%; height: 140px"/></div></div></dv-border-box-1><dv-border-box-2 style="width: 100%; height: 200px"><div style="padding: 10px 15px 10px 15px"><div style="line-height: 30px">设备运转负荷率</div><div><dv-water-level-pond:config="config_water"style="width: 100%; height: 150px"/></div></div></dv-border-box-2></div><!-- 中 --><div style="flex: 0 1 50%"><dv-border-box-12style="width: 100%; height: 600px; padding: 10px; box-sizing: border-box"><div class="module-box"><div style="flex: 0 1 25%"><dv-border-box-9 style="width: 100%; height: 90px"><div class="tc"><div style="padding-top: 10px">设备管理</div><div style="color: #7ec699; font-size: 16px">100%</div><div style="color: #7ec699; font-size: 16px">100%</div></div></dv-border-box-9></div><div style="flex: 0 1 25%"><dv-border-box-9 style="width: 100%; height: 90px"><div class="tc"><div style="padding-top: 10px">生产管理</div><div style="color: #7ec699; font-size: 16px">100%</div><div style="color: #7ec699; font-size: 16px">100%</div></div></dv-border-box-9></div><div style="flex: 0 1 25%"><dv-border-box-9 style="width: 100%; height: 90px"><div class="tc"><div style="padding-top: 10px">物流管理</div><div style="color: #7ec699; font-size: 16px">100%</div><div style="color: #7ec699; font-size: 16px">100%</div></div></dv-border-box-9></div><div style="flex: 0 1 25%"><dv-border-box-9 style="width: 100%; height: 90px"><div class="tc"><div style="padding-top: 10px">人员管理</div><div style="color: #7ec699; font-size: 16px">100%</div><div style="color: #7ec699; font-size: 16px">100%</div></div></dv-border-box-9></div></div><div><div style="line-height: 50px">设备数据统计</div><dv-flyline-chart:config="config_flyline"style="width: 100%; height: 460px"/></div></dv-border-box-12></div><!-- 右 --><div style="flex: 0 1 25%"><dv-border-box-1 style="width: 100%; height: 300px"><div style="box-sizing: border-box"><div style="height: 30px; padding: 20px 20px 0 20px"><div>销售额时间抽</div></div><div style="padding: 0 10px 10px 10px"><dv-conical-column-chart:config="config_conical"style="width: 100%; height: 240px"/></div></div></dv-border-box-1><dv-border-box-8 style="width: 100%; height: 300px"><div style="box-sizing: border-box; padding: 10px"><div style="height: 30px"><div>车间设备能耗排行</div><div><dv-decoration-3 style="width: 100px; height: 10px" /></div></div><div><dv-scroll-ranking-board:config="config_ranking"style="width: 100%; height: 250px"/></div></div></dv-border-box-8></div></div><!-- 第三行 --><div class="module-box"><div style="flex: 0 1 50%"><dv-border-box-8 style="width: 100%; height: 200px"><div style="box-sizing: border-box; padding: 10px"><div style="height: 30px"><div>车间产线耗电统计</div><div><dv-decoration-3 style="width: 100px; height: 10px" /></div></div><div><LineChart style="width: 100%; height: 170px"></LineChart></div></div></dv-border-box-8></div><div style="flex: 0 1 25%"><dv-border-box-13 style="width: 100%; height: 200px"><div style="box-sizing: border-box"><div style="height: 30px; padding: 20px 20px 0 20px"><div>动态环图</div><div><dv-decoration-3 style="width: 100px; height: 10px" /></div></div><div style="margin-top: -30px"><dv-active-ring-chart:config="config_ring"style="width: 100%; height: 200px"/></div></div></dv-border-box-13></div><div style="flex: 0 1 25%"><dv-border-box-8 style="width: 100%; height: 200px"><div style="box-sizing: border-box"><div style="height: 30px; padding: 15px 15px 0 15px"><div>剩余油量表</div><div><dv-decoration-3 style="width: 100px; height: 10px" /></div></div><div style="margin-top: -30px"><dv-charts :option="config_chart" style="width: 100%; height: 200px" /></div></div></dv-border-box-8></div></div><!-- </dv-full-screen-container> --></div>
</template><script>
import Bar from "@/components/bar.vue";
import LineChart from "@/components/line.vue";
import resize from "@/components/utils/resize";
export default {mixins: ["resize"],components: {Bar,LineChart,},data() {return {config_chart: {series: [{type: "gauge",data: [{ name: "itemA", value: 55 }],center: ["50%", "55%"],axisLabel: {formatter: "{value}%",style: {fill: "#fff",},},axisTick: {style: {stroke: "#fff",},},animationCurve: "easeInOutBack",},],},config_ring: {data: [{name: "周口",value: 55,},{name: "南阳",value: 120,},{name: "西峡",value: 78,},{name: "驻马店",value: 66,},{name: "新乡",value: 80,},],},config_conical: {data: [{name: "周口",value: 55,},{name: "南阳",value: 120,},{name: "西峡",value: 71,},{name: "驻马店",value: 66,},{name: "新乡",value: 80,},{name: "信阳",value: 35,},{name: "漯河",value: 15,},],img: [require("../assets/img/1st.png"),require("../assets/img/2st.png"),require("../assets/img/3st.png"),require("../assets/img/4st.png"),require("../assets/img/5st.png"),require("../assets/img/6st.png"),require("../assets/img/7st.png"),],},config_ranking: {data: [{name: "周口",value: 55,},{name: "南阳",value: 120,},{name: "西峡",value: 78,},{name: "驻马店",value: 66,},{name: "新乡",value: 80,},{name: "信阳",value: 45,},{name: "漯河",value: 29,},],},config_flyline: {centerPoint: [0.48, 0.35],points: [{position: [0.52, 0.235],text: "新乡",},{position: [0.43, 0.29],text: "焦作",},{position: [0.59, 0.35],text: "开封",},{position: [0.53, 0.47],text: "许昌",},{position: [0.45, 0.54],text: "平顶山",},{position: [0.36, 0.38],text: "洛阳",},{position: [0.62, 0.55],text: "周口",},{position: [0.56, 0.56],text: "漯河",},{position: [0.37, 0.66],text: "南阳",},{position: [0.55, 0.81],text: "信阳",},{position: [0.55, 0.67],text: "驻马店",},{position: [0.37, 0.29],text: "济源",},{position: [0.2, 0.36],text: "三门峡",},{position: [0.76, 0.41],text: "商丘",},{position: [0.59, 0.18],text: "鹤壁",},{position: [0.68, 0.17],text: "濮阳",},{position: [0.59, 0.1],text: "安阳",},],bgImgUrl: require("../assets/img/map.jpg"),centerPointImg: {url: require("../assets/img/mapCenterPoint.png"),},pointsImg: {url: require("../assets/img/mapPoint.png"),},},// 水位图config_water: { data: [66, 45], shape: "roundRect" },// 柱状图config_capsule: {data: [{name: "南阳",value: 167,},{name: "周口",value: 67,},{name: "漯河",value: 123,},{name: "郑州",value: 55,},{name: "西峡",value: 98,},],},};},
};
</script>

效果图：

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/223374.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

redis基本用法学习（C#调用CSRedisCore操作redis）

redis基本用法学习（C#调用CSRedisCore操作redis）

除了NRedisStack包&#xff0c;csredis也是常用的redis操作模块&#xff08;从EasyCaching提供的常用redis操作包来看&#xff0c;CSRedis、freeredis、StackExchange.Redis应该都属于常用redis操作模块&#xff09;&#xff0c;本文学习使用C#调用CSRedis包操作redis的基本方式…
阅读更多...
C# WPF上位机开发（从demo编写到项目开发）

C# WPF上位机开发（从demo编写到项目开发）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 C# WPF编程&#xff0c;特别是控件部分&#xff0c;其实学起来特别快。只是后面多了多线程、锁、数据库、网络这部分稍微复杂一点&#xff0c;不过…
阅读更多...
交通流预测 | Matlab基于KNN-BiLSTM的交通流预测（对比SVR、LSTM、GRU、KNN-LSTM）

交通流预测 | Matlab基于KNN-BiLSTM的交通流预测（对比SVR、LSTM、GRU、KNN-LSTM）

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 交通流预测 | Matlab基于KNN-BiLSTM的交通流预测&#xff08;对比SVR、LSTM、GRU、KNN-LSTM&#xff09; 程序设计 完整程序和数据获取方式&#xff1a;私信博主回复Matlab基于KNN-BiLSTM的交通流预测&#xff08;对…
阅读更多...
oracle即时客户端（Instant Client）安装与配置

oracle即时客户端（Instant Client）安装与配置

之前的文章记录了oracle客户端和服务端的下载与安装&#xff0c;内容参见&#xff1a; 在Windows中安装Oracle_windows安装oracle 如果不想安装oracle客户端&#xff08;或者是电脑因为某些原因无法安装oracle客户端&#xff09;&#xff0c;还想能够连接oracle远程服务&#…
阅读更多...
网络安全行业术语

网络安全行业术语

病毒 是在计算机程序中插入的破坏计算机功能或者数据的代码&#xff0c;能影响计算机使用&#xff0c;能自我复制的一组计算机指令或者程序代码。 抓鸡 利用使用大量的程序的漏洞&#xff0c;使用自动化方式获取肉鸡的行为&#xff0c;即设法控制电脑&#xff0c;将其沦为肉…
阅读更多...
【银行测试】银行金融测试+金融项目测试点汇总...

【银行测试】银行金融测试+金融项目测试点汇总...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、银行金融测试是…
阅读更多...
OpenCV | 霍夫变换：以车道线检测为例

OpenCV | 霍夫变换：以车道线检测为例

霍夫变换 霍夫变换只能灰度图&#xff0c;彩色图会报错 lines cv2.HoughLinesP(edge_img,1,np.pi/180,15,minLineLength40,maxLineGap20) 参数1&#xff1a;要检测的图片矩阵参数2&#xff1a;距离r的精度&#xff0c;值越大&#xff0c;考虑越多的线参数3&#xff1a;距离…
阅读更多...
制造行业定制软件解决方案——工业信息采集平台

制造行业定制软件解决方案——工业信息采集平台

摘要&#xff1a;针对目前企业在线检测数据信号种类繁多&#xff0c;缺乏统一监控人员和及时处置措施等问题。蓝鹏测控开发针对企业工业生产的在线数据的集中采集分析平台&#xff0c;通过该工业信息采集平台可将企业日常各种仪表设备能够得到数据进行集中分析处理存储&#xf…
阅读更多...
操作系统 day17（读者-写者问题、哲学家进餐问题）

操作系统 day17（读者-写者问题、哲学家进餐问题）

读者-写者问题 分析 读者优先的代码实现 若不对count采用互斥操作&#xff0c;那么会导致读者进程之间存在&#xff1a;某个读者进程阻塞在P(rw)中&#xff0c;且它需要等到最后一个读者进程解锁V(rw)才能被唤醒&#xff0c;这很影响系统效率&#xff0c;如果我们对count进行…
阅读更多...
STM32软硬件CRC测速对比

STM32软硬件CRC测速对比

硬件CRC配置 以及软硬件CRC速度对比 使用CUBEMX配置默认使用的是CRC32&#xff0c;从库中可以看出这一点 HAL库提供了以下两个计算函数 HAL_CRC_Accumulate(CRC_HandleTypeDef *hcrc, uint32_t pBuffer[], uint32_t BufferLength); 这个函数用于在已有的CRC校验结果的基础上累积…
阅读更多...
案例149:基于微信小程序的家庭财务管理系统的设计与实现

案例149:基于微信小程序的家庭财务管理系统的设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…
阅读更多...
Python自动化办公，又双叒增加功能了！

Python自动化办公，又双叒增加功能了！

大家好，这里是程序员晚枫，今天给大家分享一下Python自动化办公，最近更新的功能。 以下代码，全部都可以免费使用哦~！ 彩色的输出 有没有觉得python自带的无色输出看腻了？增加了彩色输出的功能，可以实现无痛替换。 上面效果的实现代码如下，👇 自动收发邮件 这个12月发…
阅读更多...
Verilog RAM/ROM的数据初始化

Verilog RAM/ROM的数据初始化

文章目录 一、初始化方式二、测试 FPGA设计中RAM和ROM作为存储器用来存储可变或不可变类型的数据。 ROM初始化一般是加载固定数据&#xff0c;RAM声明时默认为不定态数据&#xff0c;初始化时可以让数据为全1或者全0。 一、初始化方式 复位时按地址写入初值always (posedge cl…
阅读更多...
阅读笔记-PRECISE ADJACENT MARGIN LOSS FOR DEEP FACE RECOGNITION

阅读笔记-PRECISE ADJACENT MARGIN LOSS FOR DEEP FACE RECOGNITION

PRECISE ADJACENT MARGIN LOSS FOR DEEP FACE RECOGNITION 深度人脸识别的精确相邻边缘损失 1、这篇论文要解决什么问题&#xff1f;要验证一个什么科学假设&#xff1f; 问题&#xff1a;首先&#xff0c;在以往的损失函数中提到的“边际”是Softmax 决策边界之间的边际&am…
阅读更多...
手写MapReduce实现WordCount

手写MapReduce实现WordCount

水善利万物而不争&#xff0c;处众人之所恶&#xff0c;故几于道&#x1f4a6; 文章目录 需求分析编写MapReduce实现上述功能Mapper类Reducer类Driver类 查看输出结果 需求 假设有一个文本文件word.txt&#xff0c;我们想要统计这个文本文件中每个单词出现的次数。 文件内容如下…
阅读更多...
Python电能质量扰动信号分类(二)基于CNN模型的一维信号分类

Python电能质量扰动信号分类(二)基于CNN模型的一维信号分类

目录 前言 1 电能质量数据集制作与加载 1.1 导入数据 1.2 制作数据集 2 CNN-2D分类模型和训练、评估 2.1 定义CNN-2d分类模型 2.2 定义模型参数 2.3 模型结构 2.4 模型训练 2.5 模型评估 3 CNN-1D分类模型和训练、评估 3.1 定义CNN-1d分类模型 3.2 定义模型参数 …
阅读更多...
部署LNMP动态网站

部署LNMP动态网站

部署LNMP动态网站 安装LNMP平台相关软件1. 安装软件包2. 启动服务&#xff08;nginx、mariadb、php-fpm&#xff09;3. 修改Nginx配置文件&#xff0c;实现动静分离4. 配置数据库 上线wordpress代码 &#xff08;测试搭建的LNMP环境是否可以使用&#xff09;1. 上线php动态网站…
阅读更多...
九、W5100S/W5500+RP2040之MicroPython开发＜HTTPOneNET示例＞

九、W5100S/W5500+RP2040之MicroPython开发＜HTTPOneNET示例＞

文章目录 1. 前言2. 平台操作流程2.1 创建设备2.2 创建数据流模板 3. WIZnet以太网芯片4. 示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 烧录验证 5. 注意事项6. 相关链接 1. 前言 在这个智能硬件和物联网时代&#xff0c;MicroPython和树莓派PICO正…
阅读更多...
AOSP源码下载方法，解决repo sync错误：android-13.0.0_r82

AOSP源码下载方法，解决repo sync错误：android-13.0.0_r82

篇头 最近写文章&#xff0c;反复多次折腾AOSP代码&#xff0c;因通过网络repo sync aosp代码&#xff0c;能一次顺利下载的概率很低&#xff0c;以前就经常遇到&#xff0c;但从未总结&#xff0c;导致自己也要回头检索方法&#xff0c;所以觉得可以总结一下&#xff0c;涉及…
阅读更多...
python实现图像的几何变换——冈萨雷斯数字图像处理

python实现图像的几何变换——冈萨雷斯数字图像处理

1、 实现图像的平移。 原理: 图像的平移是一种基本的图像处理操作&#xff0c;它将图像中的每个像素沿着指定的方向和距离移动&#xff0c;以创建一个新的平移后的图像。平移的原理很简单&#xff0c;通常涉及到以下几个步骤&#xff1a; 确定平移的距离和方向&#xff1a;首先…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023