2024-07-22 11:11:43 +08:00
|
|
|
|
<template>
|
2024-12-25 15:14:32 +08:00
|
|
|
|
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
|
|
|
|
<div class="cont">
|
|
|
|
|
<div class="left_cont">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div class="title">报警资源</div>
|
|
|
|
|
<div style="display: flex; margin-top: 5px">
|
|
|
|
|
<div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 5px 0px">
|
|
|
|
|
<div style="display: flex; width: 100%">
|
|
|
|
|
<el-icon color="#3D409A" size="39" style="vertical-align: middle; margin-left: 20px">
|
|
|
|
|
<set-up />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<div style="vertical-align: middle; margin-left: 10px; text-align: center">
|
|
|
|
|
<p style="color: #727373; font-size: 14px">接入数量</p>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span class="fp">0</span>
|
|
|
|
|
<span class="fp">3</span>
|
|
|
|
|
<span class="fp">1</span>
|
|
|
|
|
<span class="fp">2</span>
|
|
|
|
|
<span class="fp">5</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center; margin-top: 10px">
|
|
|
|
|
<span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 5px 0px">
|
|
|
|
|
<div style="display: flex; width: 100%">
|
|
|
|
|
<el-icon color="#3D409A" size="39" style="vertical-align: middle; margin-left: 20px">
|
|
|
|
|
<set-up />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<div style="vertical-align: middle; margin-left: 10px; text-align: center">
|
|
|
|
|
<p style="color: #727373; font-size: 14px">运营单位</p>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<span class="fp">0</span>
|
|
|
|
|
<span class="fp">3</span>
|
|
|
|
|
<span class="fp">1</span>
|
|
|
|
|
<span class="fp">2</span>
|
|
|
|
|
<span class="fp">5</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center; margin-top: 10px">
|
|
|
|
|
<span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px">
|
|
|
|
|
<div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
|
|
|
|
|
<div style="width: 100%">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<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="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; justify-content: center; margin-top: 10px">
|
|
|
|
|
<div style="margin-right: 30px; text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center; margin-top: 5px">
|
|
|
|
|
<span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
|
|
|
|
|
<el-progress
|
|
|
|
|
style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
|
|
|
|
|
:text-inside="true"
|
|
|
|
|
color="#8C98B2"
|
|
|
|
|
:stroke-width="14"
|
|
|
|
|
:percentage="70"
|
|
|
|
|
></el-progress>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
|
|
|
|
|
<div style="width: 100%">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<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="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; justify-content: center; margin-top: 10px">
|
|
|
|
|
<div style="margin-right: 30px; text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center; margin-top: 5px">
|
|
|
|
|
<span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
|
|
|
|
|
<el-progress
|
|
|
|
|
style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
|
|
|
|
|
:text-inside="true"
|
|
|
|
|
color="#8C98B2"
|
|
|
|
|
:stroke-width="14"
|
|
|
|
|
:percentage="70"
|
|
|
|
|
></el-progress>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px">
|
|
|
|
|
<div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
|
|
|
|
|
<div style="width: 100%">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<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="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; justify-content: center; margin-top: 10px">
|
|
|
|
|
<div style="margin-right: 30px; text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center; margin-top: 5px">
|
|
|
|
|
<span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
|
|
|
|
|
<el-progress
|
|
|
|
|
style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
|
|
|
|
|
:text-inside="true"
|
|
|
|
|
color="#8C98B2"
|
|
|
|
|
:stroke-width="14"
|
|
|
|
|
:percentage="70"
|
|
|
|
|
></el-progress>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 45%; margin-left: 3%; border: 1px solid #e9ebec; padding: 4px 0px">
|
|
|
|
|
<div style="width: 100%">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<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="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; justify-content: center; margin-top: 10px">
|
|
|
|
|
<div style="margin-right: 30px; text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">总数</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
<p style="background: #e3e8fd; padding: 3px 15px; border-radius: 2px; font-size: 12px; color: #b7bdcf">在线</p>
|
|
|
|
|
<p style="color: #3f3f3f; font-weight: 500; margin-top: 5px; font-size: 12px">8563</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center; margin-top: 5px">
|
|
|
|
|
<span style="display: inline-block; color: #3f3f3f; vertical-align: middle; font-size: 12px">真实率</span>
|
|
|
|
|
<el-progress
|
|
|
|
|
style="width: 60px; display: inline-block; vertical-align: middle; margin-left: 10px"
|
|
|
|
|
:text-inside="true"
|
|
|
|
|
color="#8C98B2"
|
|
|
|
|
:stroke-width="14"
|
|
|
|
|
:percentage="70"
|
|
|
|
|
></el-progress>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bttom">
|
|
|
|
|
<div class="title">行业单位</div>
|
|
|
|
|
<div id="ecarts" style="width: 100%; height: 100px"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-table :data="tableData" stripe style="width: 100%" height="90">
|
|
|
|
|
<el-table-column prop="a" label="行业名称" align="center" />
|
|
|
|
|
<el-table-column prop="b" label="总数" align="center" />
|
|
|
|
|
<el-table-column prop="c" label="在线总数" align="center" />
|
|
|
|
|
<el-table-column prop="d" label="在线率" align="center" />
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cen">
|
|
|
|
|
<div style="width: 100%; display: flex">
|
|
|
|
|
<div class="title">运营单位</div>
|
|
|
|
|
<div style="margin-left: 30%; margin-top: 10px">
|
|
|
|
|
<span class="fp1">0</span>
|
|
|
|
|
<span class="fp1">3</span>
|
|
|
|
|
<span class="fp1">5</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center; margin-top: 3px">
|
|
|
|
|
<p style="color: rgb(63, 63, 63)">在线率</p>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 5px">
|
|
|
|
|
<dv-scroll-board :config="config" style="width: 100%; height: 180px" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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 @click="totab('1')" :class="indexdb == '1' ? '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('4')" :class="indexdb == '4' ? 'top' : 'tops'">邵阳市</div>
|
|
|
|
|
<div @click="totab('5')" :class="indexdb == '5' ? 'top' : 'tops'">娄底市</div>
|
|
|
|
|
<div @click="totab('6')" :class="indexdb == '6' ? 'top' : 'tops'">常德市</div>
|
|
|
|
|
<div @click="totab('7')" :class="indexdb == '7' ? 'top' : 'tops'">岳阳市</div>
|
|
|
|
|
<div @click="totab('8')" :class="indexdb == '8' ? 'top' : 'tops'">衡阳市</div>
|
|
|
|
|
<div @click="totab('9')" :class="indexdb == '9' ? 'top' : 'tops'">永州市</div>
|
|
|
|
|
<div @click="totab('10')" :class="indexdb == '10' ? 'top' : 'tops'">郴州市</div>
|
|
|
|
|
<div @click="totab('11')" :class="indexdb == '11' ? 'top' : 'tops'">怀化市</div>
|
|
|
|
|
<div @click="totab('12')" :class="indexdb == '12' ? 'top' : 'tops'">张家界市</div>
|
|
|
|
|
<div @click="totab('13')" :class="indexdb == '13' ? 'top' : 'tops'">湘西</div>
|
|
|
|
|
<div @click="totab('14')" :class="indexdb == '14' ? 'top' : 'tops'">益阳市</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right_cont">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div style="width: 100%; display: flex">
|
|
|
|
|
<div class="title">今日警情</div>
|
|
|
|
|
<div style="margin-left: 28%">
|
|
|
|
|
<a-segmented style="display: inline-block; width: 125px" v-model:value="value" :options="data" size="small" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 100%; text-align: center; margin: 10px 0px">
|
|
|
|
|
<div>
|
|
|
|
|
<span class="fp12">0</span>
|
|
|
|
|
<span class="fp12">0</span>
|
|
|
|
|
<span class="fp12">3</span>
|
|
|
|
|
<span class="fp12">5</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin: 10px 0px; width: 100%; text-align: center">
|
|
|
|
|
<div style="display: inline-block; text-align: center">
|
|
|
|
|
<span style="color: #363635">同比</span>
|
|
|
|
|
<a-statistic :value="11.28" :precision="2" suffix="%" :value-style="{color: '#3f8600', fontSize: '15px'}" style="display: inline-block; margin-right: 50px">
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<arrow-up-outlined />
|
|
|
|
|
</template>
|
|
|
|
|
</a-statistic>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block; text-align: center">
|
|
|
|
|
<span style="color: #363635">环比</span>
|
|
|
|
|
<a-statistic :value="11.28" :precision="2" suffix="%" :value-style="{color: '#ff0000', fontSize: '15px'}" style="display: inline-block">
|
|
|
|
|
<template #prefix>
|
|
|
|
|
<arrow-down-outlined />
|
|
|
|
|
</template>
|
|
|
|
|
</a-statistic>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
<a-dropdown style="display: inline-block; width: 150px">
|
|
|
|
|
<template #overlay>
|
|
|
|
|
<a-menu>
|
|
|
|
|
<a-menu-item key="1">
|
|
|
|
|
<UserOutlined />
|
|
|
|
|
1st menu item
|
|
|
|
|
</a-menu-item>
|
|
|
|
|
<a-menu-item key="2">
|
|
|
|
|
<UserOutlined />
|
|
|
|
|
2nd menu item
|
|
|
|
|
</a-menu-item>
|
|
|
|
|
<a-menu-item key="3">
|
|
|
|
|
<UserOutlined />
|
|
|
|
|
3rd item
|
|
|
|
|
</a-menu-item>
|
|
|
|
|
</a-menu>
|
|
|
|
|
</template>
|
|
|
|
|
<a-button size="small" style="margin-left: 45%; background: #dfecfc; color: #a6b2c3">
|
|
|
|
|
全部类型
|
|
|
|
|
<DownOutlined />
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 5px">
|
|
|
|
|
<dv-scroll-board :config="config1" style="width: 100%; height: 200px" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cen">
|
|
|
|
|
<div style="width: 100%; display: flex">
|
|
|
|
|
<div class="title">智能预警</div>
|
|
|
|
|
<div style="margin-left: 43%; margin-top: 10px">
|
|
|
|
|
<span class="fp1">0</span>
|
|
|
|
|
<span class="fp1">3</span>
|
|
|
|
|
<span class="fp1">5</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
<a-segmented style="display: inline-block; width: 150px; margin-left: 95px" v-model:value="value" :options="data" size="small" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 5px">
|
|
|
|
|
<dv-scroll-board :config="config1" style="width: 100%; height: 180px" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bttom">
|
|
|
|
|
<div style="width: 100%; display: flex">
|
|
|
|
|
<div class="title">智能布控</div>
|
|
|
|
|
<div style="margin-left: 43%; margin-top: 10px">
|
|
|
|
|
<span class="fp1">0</span>
|
|
|
|
|
<span class="fp1">3</span>
|
|
|
|
|
<span class="fp1">5</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 5px">
|
|
|
|
|
<a-segmented style="display: inline-block; width: 210px" v-model:value="value" :options="data1" size="small" />
|
|
|
|
|
<a-segmented style="display: inline-block; width: 110px; margin-left: 15px" v-model:value="value" :options="data" size="small" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 5px">
|
|
|
|
|
<dv-scroll-board :config="config1" style="width: 100%; height: 170px" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ScaleBox>
|
2024-07-22 11:11:43 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2024-12-25 15:14:32 +08:00
|
|
|
|
// @ts-ignore
|
|
|
|
|
import ScaleBox from 'vue3-scale-box'
|
|
|
|
|
import {ArrowUpOutlined, ArrowDownOutlined} from '@ant-design/icons-vue'
|
|
|
|
|
import {Ref, ref, watch, onMounted, reactive} from 'vue'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import 'echarts-gl'
|
|
|
|
|
import mapJson from './js/hunan.json'
|
|
|
|
|
import api from '@/axios'
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
init()
|
|
|
|
|
initMap()
|
|
|
|
|
})
|
|
|
|
|
const tableData = ref([
|
|
|
|
|
{
|
|
|
|
|
a: '党政机关',
|
|
|
|
|
b: '1010',
|
|
|
|
|
c: '988',
|
|
|
|
|
d: '70%'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
a: '党政机关',
|
|
|
|
|
b: '1010',
|
|
|
|
|
c: '988',
|
|
|
|
|
d: '70%'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
const indexdb = ref('1')
|
|
|
|
|
const totab = (data: any) => {
|
|
|
|
|
indexdb.value = data
|
|
|
|
|
}
|
|
|
|
|
const init = () => {
|
|
|
|
|
// 基于准备好的dom,初始化echarts实例
|
|
|
|
|
var myChart = echarts.init(document.getElementById('ecarts'))
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
|
var option = {
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: ['党政机关', '医疗机构', '高等院校', '中小学幼儿园', '商场超市']
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value'
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '2%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
top: '10%',
|
|
|
|
|
bottom: '1%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
|
|
type: 'bar'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
myChart.setOption(option)
|
|
|
|
|
}
|
|
|
|
|
const size = ref('small')
|
|
|
|
|
const data1 = reactive(['人脸布控', '车辆布控', '信息布控'])
|
|
|
|
|
const data = reactive(['日', '周', '月', '年'])
|
|
|
|
|
const value = ref(data[0])
|
|
|
|
|
const config1 = reactive({
|
|
|
|
|
header: ['事件', '时间', '位置', '状态'],
|
|
|
|
|
data: [
|
|
|
|
|
['人脸预警', '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>'],
|
|
|
|
|
['人脸预警', '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>']
|
|
|
|
|
],
|
|
|
|
|
headerBGC: '#F3FDFF',
|
|
|
|
|
oddRowBGC: '#FAFBFD',
|
|
|
|
|
evenRowBGC: 'F3FDFF',
|
|
|
|
|
index: false,
|
|
|
|
|
columnWidth: [120, 100, 80, 80],
|
|
|
|
|
align: ['center', 'center', 'center', 'center']
|
|
|
|
|
})
|
|
|
|
|
const config12 = reactive({
|
|
|
|
|
header: ['事件', '时间', '位置', '状态'],
|
|
|
|
|
data: [
|
|
|
|
|
['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
|
|
|
|
|
['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
|
|
|
|
|
['人脸预警', '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',
|
|
|
|
|
headerBGC: '#F3FDFF',
|
|
|
|
|
oddRowBGC: '#FAFBFD',
|
|
|
|
|
evenRowBGC: 'F3FDFF',
|
|
|
|
|
index: false,
|
|
|
|
|
columnWidth: [50],
|
|
|
|
|
align: ['center', 'center', 'center', 'center']
|
|
|
|
|
})
|
|
|
|
|
const config = reactive({
|
|
|
|
|
header: ['名称', '时间', '地区', '状态'],
|
|
|
|
|
columnWidth: [120, 100, 80, 80],
|
|
|
|
|
data: [
|
|
|
|
|
['隆吉平台', '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>'],
|
|
|
|
|
['隆吉平台', '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',
|
|
|
|
|
oddRowBGC: '#FAFBFD',
|
|
|
|
|
evenRowBGC: 'F3FDFF',
|
|
|
|
|
index: false,
|
|
|
|
|
align: ['center', 'center', 'center', 'center']
|
|
|
|
|
})
|
|
|
|
|
const initMap = () => {
|
|
|
|
|
let myChart = echarts.init(document.getElementById('myMap'))
|
|
|
|
|
myChart.showLoading()
|
|
|
|
|
myChart.hideLoading()
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
echarts.registerMap('myMap', mapJson)
|
|
|
|
|
var option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
|
|
|
|
|
backgroundColor: '#092b6a',
|
|
|
|
|
formatter: '{b0}<br /> 幼儿园:88 <br /> 小学:88 <br /> 中学:88 '
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'map3D',
|
|
|
|
|
name: '地图',
|
|
|
|
|
selectedMode: 'single', // 地图高亮单选
|
|
|
|
|
regionHeight: 4, // 地图高度
|
|
|
|
|
map: 'myMap',
|
|
|
|
|
viewControl: {
|
|
|
|
|
distance: 168, // 地图视角 控制初始大小
|
|
|
|
|
alpha: 50, // 倾斜角度
|
|
|
|
|
rotateSensitivity: [1, 1]
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 是否显示名字
|
|
|
|
|
color: '#333f5a', // 文字颜色
|
|
|
|
|
fontSize: 18, // 文字大小
|
|
|
|
|
fontWeight: 'bold' // 文字大小
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#9bcafc', // 地图背景颜色
|
|
|
|
|
borderWidth: 1, // 分界线wdith
|
|
|
|
|
borderColor: '#a4d8f0', // 分界线颜色
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 是否显示高亮
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff' // 高亮文字颜色
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#3a69c1', // 地图高亮颜色
|
|
|
|
|
borderWidth: 10, // 分界线wdith
|
|
|
|
|
borderColor: '#6BECF5' // 分界线颜色
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
light: {
|
|
|
|
|
main: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
intensity: 1,
|
|
|
|
|
shadow: true,
|
|
|
|
|
shadowQuality: 'high',
|
|
|
|
|
alpha: 25, //
|
|
|
|
|
beta: 20
|
|
|
|
|
},
|
|
|
|
|
ambient: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
intensity: 0.6
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
myChart.setOption(option)
|
|
|
|
|
window.addEventListener('resize', function () {
|
|
|
|
|
myChart.resize()
|
|
|
|
|
})
|
|
|
|
|
}
|
2024-07-22 11:11:43 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2024-12-25 15:14:32 +08:00
|
|
|
|
:deep(.el-table) {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
color: #000;
|
2024-07-22 11:11:43 +08:00
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
--el-table-border: {
|
|
|
|
|
none
|
2024-07-22 11:11:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
;
|
2024-07-22 11:11:43 +08:00
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
--el-table-border-color: {
|
|
|
|
|
none
|
2024-07-22 11:11:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-table th.el-table__cell) {
|
|
|
|
|
background-color: #F3FDFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-table thead) {
|
|
|
|
|
color: #000000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-table tr) {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-table__body tr.current-row > td) {
|
|
|
|
|
// background: #2cabff !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
|
|
|
|
|
// background-color: #13306A !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-table th.el-table__cell) {
|
|
|
|
|
// background-color:#13306A;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented .ant-segmented-item-selected) {
|
|
|
|
|
background-color: #DFECFC;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented) {
|
|
|
|
|
background-color: #E1E8FC;
|
|
|
|
|
color: #BEC6DA;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.dv-scroll-board) {
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.dv-scroll-board .header) {
|
|
|
|
|
border-bottom: 1px solid #E8E8E9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.dv-scroll-board .rows .row-item) {
|
|
|
|
|
border-bottom: 1px solid #E8E8E9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-table .el-table__cell) {
|
|
|
|
|
padding: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tops {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
padding: 8px 5px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
// border-bottom: 2px solid #2B78C0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
// padding: 8px 5px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-bottom: 2px solid #2B78C0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
background: #DFECFC;
|
|
|
|
|
color: #8892AD;
|
|
|
|
|
width: 30%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
// margin: 0 auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-radius: 0 0 10px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fp {
|
|
|
|
|
background: #EAF2FF;
|
|
|
|
|
color: #9CA5B6;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 3px 2px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fp1 {
|
|
|
|
|
background: #8C98B2;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 5px 4px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fp12 {
|
|
|
|
|
background: #8C98B2;
|
|
|
|
|
font-size: 20px !important;
|
|
|
|
|
padding: 5px 4px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cont {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #E5F1F7;
|
|
|
|
|
|
|
|
|
|
.left_cont {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 98%;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 2px;
|
|
|
|
|
left: 5px;
|
|
|
|
|
.top {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 408px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #E9EBEC;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
2024-07-22 11:11:43 +08:00
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
.cen {
|
|
|
|
|
margin-top: 1%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 26%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #E9EBEC;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
2024-07-22 11:11:43 +08:00
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
.bttom {
|
|
|
|
|
margin-top: 1%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 26%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #E9EBEC;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
2024-07-22 11:11:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
.cont {
|
|
|
|
|
width: calc(100% - 920px);
|
|
|
|
|
height: 98%;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 460px;
|
|
|
|
|
top: 0.5%;
|
|
|
|
|
// background: red;
|
2024-07-22 11:11:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
.right_cont {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 98%;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 5px;
|
|
|
|
|
top: 2px;
|
|
|
|
|
|
|
|
|
|
.top {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 40%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #E9EBEC;
|
|
|
|
|
overflow: auto;
|
2024-07-22 11:11:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
.cen {
|
|
|
|
|
margin-top: 1%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #E9EBEC;
|
|
|
|
|
overflow: auto;
|
2024-07-22 11:11:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-12-25 15:14:32 +08:00
|
|
|
|
.bttom {
|
|
|
|
|
margin-top: 1%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #E9EBEC;
|
|
|
|
|
overflow: auto;
|
2024-07-22 11:11:43 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2024-12-25 15:14:32 +08:00
|
|
|
|
}
|
|
|
|
|
</style>
|