Update video.vue

This commit is contained in:
TimSpan 2024-12-25 15:14:32 +08:00
parent 916ed8fc04
commit e011ab15d8
1 changed files with 721 additions and 760 deletions

View File

@ -1,26 +1,18 @@
<template> <template>
<ScaleBox <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
:width="1920"
:height="1080"
bgc="transparent"
:delay="100"
:isFlat="false"
>
<div class="cont"> <div class="cont">
<div class="left_cont"> <div class="left_cont">
<div class="top"> <div class="top">
<div class="title"> <div class="title">报警资源</div>
报警资源 <div style="display: flex; margin-top: 5px">
</div> <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 5px 0px">
<div style="display:flex;margin-top:5px;"> <div style="display: flex; width: 100%">
<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:5px 0px;"> <el-icon color="#3D409A" size="39" style="vertical-align: middle; margin-left: 20px">
<div style="display:flex;width:100%;">
<el-icon color="#3D409A" size="39" style="vertical-align: middle;margin-left:20px;">
<set-up /> <set-up />
</el-icon> </el-icon>
<div style="vertical-align: middle;margin-left:10px;text-align: center;"> <div style="vertical-align: middle; margin-left: 10px; text-align: center">
<p style="color:#727373;font-size:14px;">接入数量</p> <p style="color: #727373; font-size: 14px">接入数量</p>
<div style="margin-top:10px;"> <div style="margin-top: 10px">
<span class="fp">0</span> <span class="fp">0</span>
<span class="fp">3</span> <span class="fp">3</span>
<span class="fp">1</span> <span class="fp">1</span>
@ -29,22 +21,25 @@
</div> </div>
</div> </div>
</div> </div>
<div style="text-align: center;margin-top:10px;"> <div style="text-align: center; margin-top: 10px">
<span <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
<el-progress <el-progress
style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;" style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress> :text-inside="true"
color="#8C98B2"
:stroke-width="16"
:percentage="70"
></el-progress>
</div> </div>
</div> </div>
<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:5px 0px;"> <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 5px 0px">
<div style="display:flex;width:100%;"> <div style="display: flex; width: 100%">
<el-icon color="#3D409A" size="39" style="vertical-align: middle;margin-left:20px;"> <el-icon color="#3D409A" size="39" style="vertical-align: middle; margin-left: 20px">
<set-up /> <set-up />
</el-icon> </el-icon>
<div style="vertical-align: middle;margin-left:10px;text-align: center;"> <div style="vertical-align: middle; margin-left: 10px; text-align: center">
<p style="color:#727373;font-size:14px;">运营单位</p> <p style="color: #727373; font-size: 14px">运营单位</p>
<div style="margin-top:10px;"> <div style="margin-top: 10px">
<span class="fp">0</span> <span class="fp">0</span>
<span class="fp">3</span> <span class="fp">3</span>
<span class="fp">1</span> <span class="fp">1</span>
@ -53,157 +48,144 @@
</div> </div>
</div> </div>
</div> </div>
<div style="text-align: center;margin-top:10px;"> <div style="text-align: center; margin-top: 10px">
<span <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
<el-progress <el-progress
style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;" style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress> :text-inside="true"
color="#8C98B2"
:stroke-width="16"
:percentage="70"
></el-progress>
</div> </div>
</div> </div>
</div> </div>
<div style="display:flex;margin-top:10px;"> <div style="display: flex; margin-top: 10px">
<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;"> <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
<div style="width:100%;"> <div style="width: 100%">
<span <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span> <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">报警点位</span>
<span
style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">报警点位</span>
</div> </div>
<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;"> <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" /> <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
</div> </div>
<div style="display:flex;justify-content: center;margin-top:10px;"> <div style="display: flex; justify-content: center; margin-top: 10px">
<div style="margin-right:30px;text-align:center;"> <div style="margin-right: 30px; text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
总数</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
<div style="text-align:center;"> <div style="text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
在线</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
</div> </div>
<div style="text-align: center;margin-top:5px;"> <div style="text-align: center; margin-top: 5px">
<span <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
<el-progress <el-progress
style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;" style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress> :text-inside="true"
color="#8C98B2"
:stroke-width="14"
:percentage="70"
></el-progress>
</div> </div>
</div> </div>
<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;"> <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
<div style="width:100%;"> <div style="width: 100%">
<span <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span> <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">安保人员</span>
<span
style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">安保人员</span>
</div> </div>
<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;"> <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" /> <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
</div> </div>
<div style="display:flex;justify-content: center;margin-top:10px;"> <div style="display: flex; justify-content: center; margin-top: 10px">
<div style="margin-right:30px;text-align:center;"> <div style="margin-right: 30px; text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
总数</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
<div style="text-align:center;"> <div style="text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
在线</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
</div> </div>
<div style="text-align: center;margin-top:5px;"> <div style="text-align: center; margin-top: 5px">
<span <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
<el-progress <el-progress
style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;" style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress> :text-inside="true"
color="#8C98B2"
:stroke-width="14"
:percentage="70"
></el-progress>
</div> </div>
</div> </div>
</div> </div>
<div style="display:flex;margin-top:10px;"> <div style="display: flex; margin-top: 10px">
<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;"> <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
<div style="width:100%;"> <div style="width: 100%">
<span <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span> <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">报警复核</span>
<span
style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">报警复核</span>
</div> </div>
<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;"> <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" /> <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
</div> </div>
<div style="display:flex;justify-content: center;margin-top:10px;"> <div style="display: flex; justify-content: center; margin-top: 10px">
<div style="margin-right:30px;text-align:center;"> <div style="margin-right: 30px; text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
总数</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
<div style="text-align:center;"> <div style="text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
在线</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
</div> </div>
<div style="text-align: center;margin-top:5px;"> <div style="text-align: center; margin-top: 5px">
<span <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
<el-progress <el-progress
style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;" style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress> :text-inside="true"
color="#8C98B2"
:stroke-width="14"
:percentage="70"
></el-progress>
</div> </div>
</div> </div>
<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;"> <div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
<div style="width:100%;"> <div style="width: 100%">
<span <span style="width: 4px; height: 14px; background: #2e3192; margin-left: 4px; display: inline-block; vertical-align: middle"></span>
style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span> <span style="color: #404040; margin-left: 10px; vertical-align: middle; font-size: 14px">智能预警</span>
<span
style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">智能预警</span>
</div> </div>
<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;"> <div style="width: 40px; height: 40px; margin: 0 auto; margin-top: 3px">
<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" /> <img style="width: 100%; height: 100%" src="../../assets/images/index/photo.png" alt="" />
</div> </div>
<div style="display:flex;justify-content: center;margin-top:10px;"> <div style="display: flex; justify-content: center; margin-top: 10px">
<div style="margin-right:30px;text-align:center;"> <div style="margin-right: 30px; text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
总数</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
<div style="text-align:center;"> <div style="text-align: center">
<p <p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;"> <p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
在线</p>
<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
</div> </div>
</div> </div>
<div style="text-align: center;margin-top:5px;"> <div style="text-align: center; margin-top: 5px">
<span <span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
<el-progress <el-progress
style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;" style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress> :text-inside="true"
color="#8C98B2"
:stroke-width="14"
:percentage="70"
></el-progress>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="bttom"> <div class="bttom">
<div class="title"> <div class="title">行业单位</div>
行业单位 <div id="ecarts" style="width: 100%; height: 100px"></div>
</div>
<div id="ecarts" style="width:100%;height:100px;">
</div>
<div> <div>
<el-table :data="tableData" stripe style="width: 100%;" height="90"> <el-table :data="tableData" stripe style="width: 100%" height="90">
<el-table-column prop="a" label="行业名称" align="center" /> <el-table-column prop="a" label="行业名称" align="center" />
<el-table-column prop="b" label="总数" align="center" /> <el-table-column prop="b" label="总数" align="center" />
<el-table-column prop="c" label="在线总数" align="center" /> <el-table-column prop="c" label="在线总数" align="center" />
@ -212,32 +194,25 @@
</div> </div>
</div> </div>
<div class="cen"> <div class="cen">
<div style="width:100%;display: flex;"> <div style="width: 100%; display: flex">
<div class="title"> <div class="title">运营单位</div>
运营单位 <div style="margin-left: 30%; margin-top: 10px">
</div>
<div style="margin-left:30%;margin-top:10px;">
<span class="fp1">0</span> <span class="fp1">0</span>
<span class="fp1">3</span> <span class="fp1">3</span>
<span class="fp1">5</span> <span class="fp1">5</span>
</div> </div>
<div style="text-align: center;margin-top:3px;"> <div style="text-align: center; margin-top: 3px">
<p style="color:rgb(63, 63, 63);">在线率</p> <p style="color: rgb(63, 63, 63)">在线率</p>
<el-progress style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;" <el-progress style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px" :text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
</div> </div>
</div> </div>
<div style="margin-top:5px;"> <div style="margin-top: 5px">
<dv-scroll-board :config="config" style="width: 100%; height: 180px" /> <dv-scroll-board :config="config" style="width: 100%; height: 180px" />
</div> </div>
</div> </div>
</div> </div>
<div class="cont" id="myMap"> <div class="cont" id="myMap"></div>
<div style="width: 40%; position: absolute; left: 32%; bottom: 20px; z-index: 999999; color: #000; display: flex; background: #7584a3; color: #fff; padding: 5px">
</div>
<div
style="width:40%;position: absolute;left:32%;bottom:20px;z-index: 999999;color: #000;display: flex;background:#7584A3;color:#fff;padding:5px;">
<div @click="totab('1')" :class="indexdb == '1' ? 'top' : 'tops'">长沙市</div> <div @click="totab('1')" :class="indexdb == '1' ? 'top' : 'tops'">长沙市</div>
<div @click="totab('2')" :class="indexdb == '2' ? 'top' : 'tops'">株洲市</div> <div @click="totab('2')" :class="indexdb == '2' ? 'top' : 'tops'">株洲市</div>
<div @click="totab('3')" :class="indexdb == '3' ? 'top' : 'tops'">湘潭市</div> <div @click="totab('3')" :class="indexdb == '3' ? 'top' : 'tops'">湘潭市</div>
@ -256,37 +231,31 @@
<div class="right_cont"> <div class="right_cont">
<div class="top"> <div class="top">
<div style="width:100%;display: flex;"> <div style="width: 100%; display: flex">
<div class="title"> <div class="title">今日警情</div>
今日警情 <div style="margin-left: 28%">
</div> <a-segmented style="display: inline-block; width: 125px" v-model:value="value" :options="data" size="small" />
<div style="margin-left:28%;">
<a-segmented style="display:inline-block;width:125px" v-model:value="value" :options="data"
size="small" />
</div> </div>
</div> </div>
<div style="width:100%;text-align: center;margin:10px 0px;"> <div style="width: 100%; text-align: center; margin: 10px 0px">
<div> <div>
<span class="fp12">0</span> <span class="fp12">0</span>
<span class="fp12">0</span> <span class="fp12">0</span>
<span class="fp12">3</span> <span class="fp12">3</span>
<span class="fp12">5</span> <span class="fp12">5</span>
</div> </div>
<div style="margin: 10px 0px;width:100%;text-align: center;"> <div style="margin: 10px 0px; width: 100%; text-align: center">
<div style="display:inline-block;text-align: center;"> <div style="display: inline-block; text-align: center">
<span style="color: #363635;">同比</span> <span style="color: #363635">同比</span>
<a-statistic :value="11.28" :precision="2" suffix="%" <a-statistic :value="11.28" :precision="2" suffix="%" :value-style="{color: '#3f8600', fontSize: '15px'}" style="display: inline-block; margin-right: 50px">
:value-style="{ color: '#3f8600',fontSize:'15px' }"
style="display: inline-block;margin-right:50px;">
<template #prefix> <template #prefix>
<arrow-up-outlined /> <arrow-up-outlined />
</template> </template>
</a-statistic> </a-statistic>
</div> </div>
<div style="display:inline-block;text-align: center;"> <div style="display: inline-block; text-align: center">
<span style="color: #363635;">环比</span> <span style="color: #363635">环比</span>
<a-statistic :value="11.28" :precision="2" suffix="%" <a-statistic :value="11.28" :precision="2" suffix="%" :value-style="{color: '#ff0000', fontSize: '15px'}" style="display: inline-block">
:value-style="{ color: '#ff0000',fontSize:'15px' }" style="display: inline-block;">
<template #prefix> <template #prefix>
<arrow-down-outlined /> <arrow-down-outlined />
</template> </template>
@ -294,11 +263,11 @@
</div> </div>
</div> </div>
</div> </div>
<div style="margin-top:5px;"> <div style="margin-top: 5px">
<div style="width:90px;background: #DFECFC;color:#A6B2C3;height:20px;line-height:20px;padding-left:5px;display:inline-block;">实时预警</div> <div style="width: 90px; background: #dfecfc; color: #a6b2c3; height: 20px; line-height: 20px; padding-left: 5px; display: inline-block">实时预警</div>
<a-dropdown style="display: inline-block; width: 150px"> <a-dropdown style="display: inline-block; width: 150px">
<template #overlay> <template #overlay>
<a-menu @click="handleMenuClick"> <a-menu>
<a-menu-item key="1"> <a-menu-item key="1">
<UserOutlined /> <UserOutlined />
1st menu item 1st menu item
@ -313,112 +282,104 @@
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
<a-button size="small" style="margin-left:45%;background: #DFECFC;color:#A6B2C3;"> <a-button size="small" style="margin-left: 45%; background: #dfecfc; color: #a6b2c3">
全部类型 全部类型
<DownOutlined /> <DownOutlined />
</a-button> </a-button>
</a-dropdown> </a-dropdown>
</div> </div>
<div style="margin-top:5px;"> <div style="margin-top: 5px">
<dv-scroll-board :config="config1" style="width: 100%; height: 200px" /> <dv-scroll-board :config="config1" style="width: 100%; height: 200px" />
</div> </div>
</div> </div>
<div class="cen"> <div class="cen">
<div style="width:100%;display: flex;"> <div style="width: 100%; display: flex">
<div class="title"> <div class="title">智能预警</div>
智能预警 <div style="margin-left: 43%; margin-top: 10px">
</div>
<div style="margin-left:43%;margin-top:10px;">
<span class="fp1">0</span> <span class="fp1">0</span>
<span class="fp1">3</span> <span class="fp1">3</span>
<span class="fp1">5</span> <span class="fp1">5</span>
</div> </div>
</div> </div>
<div style="margin-top:5px;"> <div style="margin-top: 5px">
<div <div style="width: 90px; background: #dfecfc; color: #a6b2c3; height: 20px; line-height: 20px; padding-left: 5px; display: inline-block">实时预警</div>
style="width:90px;background: #DFECFC;color:#A6B2C3;height:20px;line-height:20px;padding-left:5px;display:inline-block;"> <a-segmented style="display: inline-block; width: 150px; margin-left: 95px" v-model:value="value" :options="data" size="small" />
实时预警</div>
<a-segmented style="display:inline-block;width:150px;margin-left:95px;" v-model:value="value"
:options="data" size="small" />
</div> </div>
<div style="margin-top:5px;"> <div style="margin-top: 5px">
<dv-scroll-board :config="config1" style="width: 100%; height: 180px" /> <dv-scroll-board :config="config1" style="width: 100%; height: 180px" />
</div> </div>
</div> </div>
<div class="bttom"> <div class="bttom">
<div style="width:100%;display: flex;"> <div style="width: 100%; display: flex">
<div class="title"> <div class="title">智能布控</div>
智能布控 <div style="margin-left: 43%; margin-top: 10px">
</div>
<div style="margin-left:43%;margin-top:10px;">
<span class="fp1">0</span> <span class="fp1">0</span>
<span class="fp1">3</span> <span class="fp1">3</span>
<span class="fp1">5</span> <span class="fp1">5</span>
</div> </div>
</div> </div>
<div style="margin-top:5px;"> <div style="margin-top: 5px">
<a-segmented style="display:inline-block;width:210px;" v-model:value="value" :options="data1" <a-segmented style="display: inline-block; width: 210px" v-model:value="value" :options="data1" size="small" />
size="small" /> <a-segmented style="display: inline-block; width: 110px; margin-left: 15px" v-model:value="value" :options="data" size="small" />
<a-segmented style="display:inline-block;width:110px;margin-left:15px;" v-model:value="value"
:options="data" size="small" />
</div> </div>
<div style="margin-top:5px;"> <div style="margin-top: 5px">
<dv-scroll-board :config="config1" style="width: 100%; height: 170px" /> <dv-scroll-board :config="config1" style="width: 100%; height: 170px" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ScaleBox> </ScaleBox>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ScaleBox from "vue3-scale-box"; // @ts-ignore
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue'; import ScaleBox from 'vue3-scale-box'
import { Ref, ref, watch, onMounted, reactive } from 'vue'; import {ArrowUpOutlined, ArrowDownOutlined} from '@ant-design/icons-vue'
import * as echarts from "echarts"; import {Ref, ref, watch, onMounted, reactive} from 'vue'
import 'echarts-gl'; import * as echarts from 'echarts'
import mapJson from "./js/hunan.json"; import 'echarts-gl'
import api from "@/axios"; import mapJson from './js/hunan.json'
onMounted( import api from '@/axios'
() => { onMounted(() => {
init(); init()
initMap(); initMap()
})
const tableData = ref([
{
a: '党政机关',
b: '1010',
c: '988',
d: '70%'
},
{
a: '党政机关',
b: '1010',
c: '988',
d: '70%'
} }
); ])
const tableData = ref([{
a: '党政机关',
b: '1010',
c: '988',
d: '70%'
}, {
a: '党政机关',
b: '1010',
c: '988',
d: '70%'
}]);
const indexdb = ref('1') const indexdb = ref('1')
const totab = (data) => { const totab = (data: any) => {
indexdb.value = data; indexdb.value = data
}; }
const init = () => { const init = () => {
// domecharts // domecharts
var myChart = echarts.init(document.getElementById('ecarts')); var myChart = echarts.init(document.getElementById('ecarts'))
// //
var option = { var option = {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['党政机关', '医疗机构', '高等院校', '中小学幼儿园', '商场超市',] data: ['党政机关', '医疗机构', '高等院校', '中小学幼儿园', '商场超市']
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
grid: { grid: {
left: "2%", left: '2%',
right: "4%", right: '4%',
top: "10%", top: '10%',
bottom: "1%", bottom: '1%',
containLabel: true, containLabel: true
}, },
series: [ series: [
{ {
@ -426,14 +387,14 @@
type: 'bar' type: 'bar'
} }
] ]
}; }
// 使 // 使
myChart.setOption(option); myChart.setOption(option)
}; }
const size = ref('small'); const size = ref('small')
const data1 = reactive(['人脸布控', '车辆布控', '信息布控']); const data1 = reactive(['人脸布控', '车辆布控', '信息布控'])
const data = reactive(['日', '周', '月', '年']); const data = reactive(['日', '周', '月', '年'])
const value = ref(data[0]); const value = ref(data[0])
const config1 = reactive({ const config1 = reactive({
header: ['事件', '时间', '位置', '状态'], header: ['事件', '时间', '位置', '状态'],
data: [ data: [
@ -446,14 +407,14 @@
['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'], ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'], ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'], ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'], ['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>']
], ],
headerBGC: '#F3FDFF', headerBGC: '#F3FDFF',
oddRowBGC: '#FAFBFD', oddRowBGC: '#FAFBFD',
evenRowBGC: 'F3FDFF', evenRowBGC: 'F3FDFF',
index: false, index: false,
columnWidth: [120, 100, 80, 80], columnWidth: [120, 100, 80, 80],
align: ['center','center','center','center'], align: ['center', 'center', 'center', 'center']
}) })
const config12 = reactive({ const config12 = reactive({
header: ['事件', '时间', '位置', '状态'], header: ['事件', '时间', '位置', '状态'],
@ -467,7 +428,7 @@
['人脸预警', '2024-1-24', '长沙望城区', '已转发'], ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
['人脸预警', '2024-1-24', '长沙望城区', '已转发'], ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
['人脸预警', '2024-1-24', '长沙望城区', '已转发'], ['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
['人脸预警', '2024-1-24', '长沙望城区', '已转发'], ['人脸预警', '2024-1-24', '长沙望城区', '已转发']
], ],
headerHeight: '20', headerHeight: '20',
headerBGC: '#F3FDFF', headerBGC: '#F3FDFF',
@ -475,7 +436,7 @@
evenRowBGC: 'F3FDFF', evenRowBGC: 'F3FDFF',
index: false, index: false,
columnWidth: [50], columnWidth: [50],
align: ['center','center','center','center'], align: ['center', 'center', 'center', 'center']
}) })
const config = reactive({ const config = reactive({
header: ['名称', '时间', '地区', '状态'], header: ['名称', '时间', '地区', '状态'],
@ -490,26 +451,26 @@
['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'], ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'], ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'], ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'], ['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>']
], ],
headerBGC: '#F3FDFF', headerBGC: '#F3FDFF',
oddRowBGC: '#FAFBFD', oddRowBGC: '#FAFBFD',
evenRowBGC: 'F3FDFF', evenRowBGC: 'F3FDFF',
index: false, index: false,
align: ['center','center','center','center'], align: ['center', 'center', 'center', 'center']
}) })
const initMap = () => { const initMap = () => {
let myChart = echarts.init(document.getElementById('myMap')); let myChart = echarts.init(document.getElementById('myMap'))
myChart.showLoading(); myChart.showLoading()
myChart.hideLoading(); myChart.hideLoading()
echarts.registerMap('myMap', mapJson); // @ts-ignore
echarts.registerMap('myMap', mapJson)
var option = { var option = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'}, textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
backgroundColor: '#092b6a', backgroundColor: '#092b6a',
formatter: '{b0}<br /> 幼儿园:88 <br /> 小学:88 <br /> 中学:88 ', formatter: '{b0}<br /> 幼儿园:88 <br /> 小学:88 <br /> 中学:88 '
}, },
series: [ series: [
{ {
@ -527,7 +488,7 @@
show: true, // show: true, //
color: '#333f5a', // color: '#333f5a', //
fontSize: 18, // fontSize: 18, //
fontWeight: 'bold', // fontWeight: 'bold' //
}, },
itemStyle: { itemStyle: {
color: '#9bcafc', // color: '#9bcafc', //
@ -564,12 +525,12 @@
} }
} }
] ]
}; }
myChart.setOption(option); myChart.setOption(option)
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize()
}); })
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">