vue3大屏展示炫酷效果

资源文件列表(大概)

文件名

大小

1/dp/

1/dp/left/

1/dp/left/001.png

1.35KB

1/dp/left/1(98).png

23.15KB

1/dp/left/111.png

1.09MB

1/dp/left/222.png

1.09MB

1/dp/left/di.png

8.63KB

1/dp/left/dian.png

1.04KB

1/dp/left/fang (2).png

3.21KB

1/dp/left/fang.png

2.22KB

1/dp/left/guangdi.png

4.06KB

1/dp/left/i.png

11.51KB

1/dp/left/XX街道供水站.png

13.49KB

1/dp/left/zz.png

8.27KB

1/dp/left/表格.png

278B

1/dp/left/底板光.png

7.61KB

1/dp/left/供水规模.png

10.12KB

1/dp/left/矩形782.png

1.17KB

1/dp/left/球3.png

13.41KB

1/dp/left/Ȧ2.png

11.4KB

1/dp/left/设备巡检.png

10KB

1/dp/left/数据线.png

1.1KB

1/dp/left/ˮ (2).png

2.62KB

1/dp/left/ˮ.png

1.98KB

1/dp/left/水厂 (2).png

1.36KB

1/dp/left/水厂 (3).png

1.42KB

1/dp/left/水厂.png

4KB

1/dp/left/图层2.png

6.03KB

1/dp/left/图层4.png

21.24KB

1/dp/left/图层5.png

604B

1/dp/left/ͼƬ3.png

15.3KB

1/dp/left/小标题.png

1.68KB

1/dp/left/小框.png

4.26KB

1/dp/left/形状3拷贝.png

6.46KB

1/dp/left/形状4.png

192B

1/dp/left/仪表盘.png

40.24KB

1/dp/left/指针.png

481B

1/dp/left/总数.png

3.3KB

1/dp/left/组10.png

11.27KB

1/dp/left/组11.png

17.75KB

1/dp/left/组12.png

19.11KB

1/dp/left/组13.png

3.12KB

1/dp/left/组14.png

3.46KB

1/dp/left/组15 (2).png

3.2KB

1/dp/left/组15.png

30.25KB

1/dp/left/组16 (2).png

3.02KB

1/dp/left/组16.png

3.98KB

1/dp/left/组17 (2).png

3.08KB

1/dp/left/组17.png

4.97KB

1/dp/left/组3.png

31.5KB

1/dp/left/组4.png

3.5KB

1/dp/left/组5.png

3.65KB

1/dp/left/组6.png

3.86KB

1/dp/left/组7.png

11.78KB

1/dp/left/组8.png

24.22KB

1/dp/left/组8s.png

4.54KB

1/dp/left/组9.png

12.63KB

1/dp/middle/

1/dp/middle/data2.png

1.77KB

1/dp/middle/di.png

245.01KB

1/dp/middle/dikuang.png

2.57KB

1/dp/middle/dis.png

23.1KB

1/dp/middle/ll.png

1.37KB

1/dp/middle/map.png

367.79KB

1/dp/middle/quandian (2).png

4.24KB

1/dp/middle/quandian.png

3.72KB

1/dp/middle/quandian拷贝.png

3.66KB

1/dp/middle/sch.png

4.33KB

1/dp/middle/scl.png

4.8KB

1/dp/middle/sz.png

1.27KB

1/dp/middle/tips_bac.png

18.43KB

1/dp/middle/xiushi.png

2.61KB

1/dp/middle/xiushi2.png

2.5KB

1/dp/middle/xiushi3.png

2.54KB

1/dp/middle/xx区域城乡供水调度中心运营总览.png

35.81KB

1/dp/middle/yl.png

1.07KB

1/dp/middle/背景.png

898.5KB

1/dp/middle/标题底.png

281.85KB

1/dp/middle/表格.png

19.26KB

1/dp/middle/官网.png

3.06KB

1/dp/middle/官网1.png

1.37KB

1/dp/middle/矩形783.png

7.41KB

1/dp/middle/框.png

7.37KB

1/dp/middle/人数.png

2.11KB

1/dp/middle/数据.png

2.12KB

1/dp/middle/数据2.png

4.06KB

1/dp/middle/水厂-红.png

4.53KB

1/dp/middle/水厂-灰.png

3.88KB

1/dp/middle/水分.png

3.02KB

1/dp/middle/水流量.png

1.15KB

1/dp/middle/ˮԴ (2).png

1.27KB

1/dp/middle/ˮԴ.png

2.89KB

1/dp/middle/水质.png

2.46KB

1/dp/middle/水质小.png

1.02KB

1/dp/middle/椭圆1.png

581B

1/dp/middle/椭圆2.png

550B

1/dp/middle/椭圆3.png

532B

1/dp/middle/形状1.png

1.91KB

1/dp/middle/压力.png

2.76KB

1/dp/middle/压力拷贝.png

1.07KB

1/dp/middle/组10.png

20.7KB

1/dp/right/

1/dp/right/138.png

16.19KB

1/dp/right/di.png

10.2KB

1/dp/right/di9.png

11.32KB

1/dp/right/dian.png

1.05KB

1/dp/right/fang.png

3.12KB

1/dp/right/guangdi.png

2.46KB

1/dp/right/kuang.png

8.57KB

1/dp/right/san.png

4.29KB

1/dp/right/xuanzhong.png

10.49KB

1/dp/right/xuanzhong拷贝2.png

9.73KB

1/dp/right/表.png

2.77KB

1/dp/right/表格拷贝.png

351B

1/dp/right/饼-圈.png

10.79KB

1/dp/right/饼图.png

9.53KB

1/dp/right/定位.png

2.11KB

1/dp/right/官网运行.png

9.06KB

1/dp/right/管网.png

2.43KB

1/dp/right/计.png

3.13KB

1/dp/right/矩形782.png

2.22KB

1/dp/right/漏水检查.png

1.26KB

1/dp/right/漏损管控.png

8.61KB

1/dp/right/数据线.png

1.54KB

1/dp/right/ˮ.png

2.62KB

1/dp/right/水厂.png

1.41KB

1/dp/right/水厂拷贝.png

1.97KB

1/dp/right/水质.png

1.93KB

1/dp/right/小标题-you.png

1.54KB

1/dp/right/小框-you.png

4.89KB

1/dp/right/形状3.png

181B

1/dp/right/形状3拷贝2.png

6.7KB

1/dp/right/圆角矩形1.png

1.67KB

1/dp/right/组10.png

11.27KB

1/dp/right/组2.png

13.7KB

1/dp/right/组3.png

30.07KB

1/dp/right/组4.png

6.02KB

1/dp/right/组5.png

5.83KB

1/dp/right/组6.png

4.37KB

1/dp/right/组9.png

12.63KB

1/test.vue

69.79KB

1/xn.json

61.13KB

资源内容介绍

里面包含图片，图标完整代码等

<template> <div class="da_body"> <div class="top_title">某某市城乡供水调度中心运营总览</div> <div class="left_data"> <div class="left_title"><span>供水规模</span></div> <div class="left_info"> <div class="left_info1"> <div class="sc_count"> <div class="sc_name"> 规模水厂 </div> <div class="sc_value">9<span>  个</span></div> </div> <div class="bz_count"> <div class="sc_name"> 供水泵站 </div> <div class="sc_value">255<span>个</span></div> </div> </div> <div class="left_info2"> <div class="left_zz"> <img src="@/assets/imgs/dp/left/指针.png" alt=""> </div> <div class="zz_value">88.8</div> </div> <div class="left_info3"> <div> <img src="@/assets/imgs/dp/left/组16.png" alt=""> <div class="gs_name">日供水量</div> <div class="gs_count">40.0<span>  万m³</span></div> </div> <div> <img src="@/assets/imgs/dp/left/组17.png" alt=""> <div class="gs_name">设计供水</div> <div class="gs_count">40.0<span>   万m³</span></div> </div> </div> </div> <div class="left_title"><span>某某水厂</span></div> <div class="left_info"> <div class="info2_left"> <div class="sc_left1"> <div style="margin-left: 40%;margin-top: 24%;float: left;">100%</div> <div style="margin-left: 24%;margin-top: 20%;float: left;">水质合格率</div> </div> <div class="sc_left2"> <div style="margin-left: 40%;margin-top: 50%;float: left;">2.55m</div> <div style="margin-left: 25%;float: left;margin-top: -2%;">清水池液位</div> </div> </div> <div class="info2_right"> <div class="info2_right1"> <div> <img src="@/assets/imgs/dp/left/组16.png" alt=""> <div>日供水量</div> <div style="font-size: 0.95vw;">235 <span style="font-size: 0.7vw;">m³</span></div> </div> <div> <img src="@/assets/imgs/dp/left/组17.png" alt=""> <div>出水压力</div> <div style="font-size: 0.95vw;">0.21<span style="font-size: 0.7vw;">MPa</span></div> </div> </div> <div class="info2_right2"> <div> <img src="@/assets/imgs/dp/left/组4.png" alt=""> <div> 余氯mg/L </div> <div style="font-size: 0.9vw;color: rgb(220, 227, 233);font-weight: 550;">  0.56 </div> </div> <div> <img src="@/assets/imgs/dp/left/组5.png" alt=""> <div> 浊度NTU </div> <div style="font-size: 0.9vw;color: rgb(233, 216, 0);font-weight: 550;">  0.56 </div> </div> <div> <img src="@/assets/imgs/dp/left/组6.png" alt=""> <div>   pH </div> <div style="font-size: 0.9vw;color: rgb(127, 244, 199);font-weight: 550;">  6.7 </div> </div> </div> <div class="info2_right3" id="chart2"> </div> </div> </div> <div class="left_title"><span>设备巡检</span></div> <div class="left_info"> <div class="info3_left"> <div class="xj1"><div style="margin-left: 1.1vw;margin-top: 2vw;font-size: 0.97vw;">100%</div></div> <div class="xj2"><div style="margin-left: 2.4vw;margin-top: 0.73vw;font-size: 0.79vw;">巡检完成率</div></div> <div class="xj3"> <img src="@/assets/imgs/dp/left/总数.png" alt=""> <div style="margin-top: 0.7vw;font-size: 0.74vw;">   <span>巡检总数</span>   <span style="font-size: 0.74vw;">完成率</span></div> <div style="line-height: 0.9vw;"> <span style="color: #e7b9ec;font-size: 0.75vw;margin-left: 1.2vw;">35 <span style="font-size: 0.65vw;">次</span> </span> <span style="color: #e7b9ec;font-size: 0.75vw;margin-left: 1.2vw;">70.5 <span style="font-size: 0.65vw;;">%</span> </span> </div> </div> <div class="xj3"> <img src="@/assets/imgs/dp/left/001.png" style="margin-top: 1.3vw;margin-left: 1.45vw; width:auto;height: 1vw;" alt=""> <div style="margin-top: 0.7vw;font-size: 0.74vw;">    <span>本月已巡</span>   <span style="font-size: 0.74vw;">完成率</span></div> <div style="line-height: 0.9vw;color: rgb(233, 216, 0);"> <span style="font-size: 0.75vw;margin-left: 1.5vw;">35 <span style="font-size: 0.65vw;">次</span> </span><span style="font-size: 0.75vw;margin-left: 1.2vw;">70.5 <span style="font-size: 0.65vw;;">%</span> </span> </div> </div> </div> <div class="info3_right"> <dv-scroll-board :config="config" style="width:100%;height:100%;" /> </div> </div> </div> <div class="mid_data"> <div class="mid_top"> <div class="mid_top_info"> <img src="@/assets/imgs/dp/middle/水分.png" alt=""> <div style="margin-right: 0.8vw;"> <p>年供水总量</p> <p>8339.51 <span>万m2</span></p> </div> </div> <div class="mid_top_infos"> <img src="@/assets/imgs/dp/middle/水质.png" style="margin-left: 2.21vw;" alt=""> <div style="margin-right: 3.6vw;"> <p>水质达标率</p> <p>100 <span>%</span></p> </div> </div> <div class="mid_top_infos"> <img src="@/assets/imgs/dp/middle/人数.png" style="margin-left: 2.25vw;margin-top: 0.95vw;" alt=""> <div style="margin-right: 1vw;"> <p>服务人口数</p> <p>8339.51 <span>万人</span></p> </div> </div> <div class="mid_top_infos"> <img src="@/assets/imgs/dp/middle/data2.png" style="margin-left: 2.25vw;;margin-top: 0.95vw;" alt=""> <div style="margin-right: 3.8vw;"> <p>漏损率</p> <p>2.51 <span>%</span></p> </div> </div> </div>  <div ref="echartMap" class="data-foot-line echartMap"></div>  <div class="dialog_div" :style="{ left: `${dialogLeft}px`, top: `${dialogTop}px` }" v-if="showDialog"> <div class="tips_name"> <img src="@/assets/imgs/dp/middle/压力拷贝.png" alt=""> <span>某某水厂</span> </div> <div style="margin-top: 0.4vw;"> <div class="value_div"> <span class="value_name">出水瞬时流量:</span><span class="value_data">25.56</span><span class="value_unit">m3/h</span> </div> <div class="value_div"> <span class="value_name">出水压力:</span><span style="color: rgb(235, 215, 178);" class="value_data">0.156</span><span class="value_unit">MP4</span> </div> <div class="value_div"> <span class="value_name">出水累计流量:</span><span style="color: yellow;" class="value_data">23460</span><span class="value_unit">m3</span>

用户评论 (0)

发表评论

您的昵称:

评分

评论内容:

验证码:

vue3大屏展示炫酷效果

资源文件列表(大概)

资源内容介绍

用户评论 (0)

发表评论

相关资源

WeChatAuto,电脑微信辅助，微信自动发消息

CityEngine CE规则高架导轨

LIDC-IDRI预处理项目

Win11可用的鼠标模拟多点触摸软件

vue3大屏展示炫酷效果

资源文件列表(大概)

资源内容介绍

用户评论 (0)

发表评论

相关资源

WeChatAuto,电脑微信辅助，微信自动发消息

CityEngine CE规则 高架导轨

LIDC-IDRI预处理项目

Win11可用的鼠标模拟多点触摸软件

CityEngine CE规则高架导轨