vue3大屏展示炫酷效果

<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>&nbsp;&nbsp;个</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>&nbsp;&nbsp;万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>&nbsp;&nbsp; 万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;"> &nbsp;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;"> &nbsp;0.56 </div> </div> <div> <img src="@/assets/imgs/dp/left/组6.png" alt=""> <div> &nbsp;&nbsp;pH </div> <div style="font-size: 0.9vw;color: rgb(127, 244, 199);font-weight: 550;"> &nbsp;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;">&nbsp;&nbsp;&nbsp;<span>巡检总数</span>&nbsp;&nbsp;&nbsp;<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;">&nbsp;&nbsp;&nbsp;&nbsp;<span>本月已巡</span>&nbsp;&nbsp;&nbsp;<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>