124
This commit is contained in:
1417
src/views/home/components/511202.json
Normal file
1417
src/views/home/components/511202.json
Normal file
File diff suppressed because it is too large
Load Diff
103
src/views/home/components/Introduction.vue
Normal file
103
src/views/home/components/Introduction.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="data-statistics flex align-center just-center">
|
||||
<div class="img_but" @click="gettbGjZdxxselectList">
|
||||
<div class="imgBox"><img src="@/assets/images/qt11/lx.png" alt="" /></div>
|
||||
<div class="textB">路线</div>
|
||||
</div>
|
||||
<div class="img_but boxCenter" @click="gettbGjclXlxxselectList">
|
||||
<div class="imgBox"><img src="@/assets/images/qt11/zt.png" alt="" /></div>
|
||||
<div class="textB">站台</div>
|
||||
</div>
|
||||
<div class="img_but" @click="clearContents">
|
||||
<div class="imgBox">
|
||||
<img src="@/assets/images/qt11/qc.png" alt="" />
|
||||
</div>
|
||||
<div class="textB">清除</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以在这里添加需要的响应式数据和方法
|
||||
import { tbGjZdxxselectList, tbGjclXlxxselectList } from "@/api/mosty-zhgj.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const gettbGjZdxxselectList = () => {
|
||||
tbGjZdxxselectList({}).then((res) => {});
|
||||
tbGjZdxxselectList({}).then((res) => {
|
||||
const data = res.map((item) => {
|
||||
return { coords: [item.zb], text: item.xlmc };
|
||||
});
|
||||
emitter.emit("echoLine", {
|
||||
type: "solid",
|
||||
coords: data,
|
||||
isclear: true,
|
||||
flag: "lx",
|
||||
color: "#46ff71"
|
||||
});
|
||||
});
|
||||
};
|
||||
const gettbGjclXlxxselectList = () => {
|
||||
tbGjclXlxxselectList({}).then((res) => {
|
||||
if (res) {
|
||||
const coords = res
|
||||
.filter((item) => item.jd && item.wd)
|
||||
.map((items) => {
|
||||
return {
|
||||
jd: items.jd,
|
||||
wd: items.wd
|
||||
};
|
||||
});
|
||||
const icon = require("@/assets/images/qt11/car.png");
|
||||
emitter.emit("addPoint", { coords, flag: "gjz", icon });
|
||||
}
|
||||
});
|
||||
};
|
||||
// const coords = [
|
||||
// { jd: 102.651727, wd: 30.117088 },
|
||||
// { jd: 102.527442, wd: 30.108846 },
|
||||
// { jd: 102.801965, wd: 30.100063 },
|
||||
// { jd: 102.711411, wd: 30.158424 },
|
||||
// { jd: 102.579582, wd: 30.174818 }
|
||||
// ];
|
||||
// 清除
|
||||
const clearContents = () => {
|
||||
emitter.emit("deletePointArea", "gjz");
|
||||
emitter.emit("deletePointArea", "lx");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-statistics {
|
||||
height: 100%;
|
||||
//
|
||||
.img_but {
|
||||
text-align: center;
|
||||
|
||||
.imgBox {
|
||||
width: 101px;
|
||||
height: 78px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.imgT {
|
||||
background: url("~@/assets/images/bi/R_T.png") no-repeat center center;
|
||||
}
|
||||
.textB {
|
||||
// width: 38px;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
height: 18px;
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
color: #c9eeff;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
.boxCenter {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
src/views/home/components/beonDuty.vue
Normal file
153
src/views/home/components/beonDuty.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="checkpoint-list noScollLine">
|
||||
<el-timeline style="max-width: 375px">
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in warningList.listData"
|
||||
:key="index"
|
||||
:timestamp="item.yjSj"
|
||||
placement="top"
|
||||
:hollow="true"
|
||||
color="#061b44"
|
||||
>
|
||||
<div class="item_card">
|
||||
<div style="line-height: 18px">
|
||||
{{ item.yjNr }}
|
||||
<!-- 2025年3月20日,早上10点时，重点人员张三购买林芝客运站前
|
||||
往朗县客运站的车票。 -->
|
||||
</div>
|
||||
<el-divider border-style="dashed" class="dashed" />
|
||||
<div class="flex">
|
||||
<div class="warning-image">
|
||||
<img :src="item.yjTp" alt="预警图片" />
|
||||
</div>
|
||||
<div class="inform">
|
||||
<div class="flex align-center">
|
||||
<div class="inform_name">
|
||||
姓名：<span>{{ item.yjRyxm }}</span>
|
||||
</div>
|
||||
<div class="inform_tag">{{ item.yjlyBqmc }}</div>
|
||||
</div>
|
||||
|
||||
<div>身份证：{{ item.yjRysfzh }}</div>
|
||||
<div>
|
||||
购票时间：<span>{{ item.gpsj }}</span>
|
||||
</div>
|
||||
<div>购买路线：{{ item.gmlx }}</div>
|
||||
<div>购买地点：{{ item.gmdd }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<Empty :show="warningList.listData.length == 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
|
||||
import Empty from "@/components/Empty/index.vue";
|
||||
const warningList = reactive({
|
||||
listData: [],
|
||||
total: 0
|
||||
});
|
||||
const linQuery = reactive({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const gettbGjclselectPage = () => {
|
||||
tbGjYjgetPageList(linQuery).then((res) => {
|
||||
warningList.listData =
|
||||
linQuery.pageCurrent == 1
|
||||
? res.records
|
||||
: warningList.listDat.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
});
|
||||
};
|
||||
const scroll = () => {
|
||||
if (warningList.total > warningList.listData.length) {
|
||||
gettbGjclselectPage();
|
||||
linQuery.pageCurrent++;
|
||||
}
|
||||
};
|
||||
gettbGjclselectPage();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.checkpoint-list {
|
||||
margin-top: 20px;
|
||||
margin-left: 18px;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
.item_card {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
padding: 18px 13px 8px 15px;
|
||||
width: 359px;
|
||||
height: 190px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #0468e1;
|
||||
opacity: 0.86;
|
||||
background: url("~@/assets/images/bi/jmk.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.dashed {
|
||||
width: 100%;
|
||||
border-top: 1px #0468e1 dashed;
|
||||
margin: 10px 0px 9px;
|
||||
}
|
||||
.warning-image {
|
||||
border: 1px solid #0468e1;
|
||||
padding: 10px 10px 10px 14px;
|
||||
width: 103px;
|
||||
height: 99px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.inform {
|
||||
box-sizing: border-box;
|
||||
margin-left: 11px;
|
||||
width: 215px;
|
||||
font-family: "Source Han Sans CN";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
.inform_name {
|
||||
width: 120px;
|
||||
}
|
||||
.inform_tag {
|
||||
font-family: "Source Han Sans CN";
|
||||
font-weight: 300;
|
||||
font-size: 10px;
|
||||
color: #f9411c;
|
||||
border: 1px solid #f9411c;
|
||||
padding: 0px 8px;
|
||||
font-weight: 800;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-timeline-item__node {
|
||||
border-color: rgb(13, 216, 37);
|
||||
}
|
||||
::v-deep .el-timeline-item__tail {
|
||||
border-left: 2px solid #06366d;
|
||||
}
|
||||
::v-deep .el-timeline-item__wrapper {
|
||||
padding-left: 10px;
|
||||
}
|
||||
::v-deep .is-top {
|
||||
margin-bottom: 12px;
|
||||
padding-top: 2px;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
110
src/views/home/components/collection.vue
Normal file
110
src/views/home/components/collection.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="data-statistics flex align-center just-center">
|
||||
<!-- 人员数据采集 -->
|
||||
<div>
|
||||
<div class="container row">
|
||||
<div class="block">
|
||||
<div class="quantity">{{ statistics.xscl }}<span>个</span></div>
|
||||
<div class="name">行驶车辆</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="quantity">{{ statistics.xsxl }}<span>个</span></div>
|
||||
<div class="name">行驶线路</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container row">
|
||||
<div class="block">
|
||||
<div class="designation">
|
||||
<div class="quantity">{{ statistics.ccry }}<span>个</span></div>
|
||||
<div class="name">乘车人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="designation">
|
||||
<div class="quantity">{{ statistics.zdry }}<span>个</span></div>
|
||||
<div class="name">重点人员</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="designation">
|
||||
<div class="quantity">{{ statistics.ztccry }}<span>个</span></div>
|
||||
<div class="name">中途上车人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以在这里添加需要的响应式数据和方法
|
||||
import { ref } from "vue";
|
||||
import { tbGjtjgjCount } from "@/api/mosty-zhgj.js";
|
||||
const statistics = ref({});
|
||||
const gettbGjtjgjCount = () => {
|
||||
tbGjtjgjCount({
|
||||
// startTime: "2025-1-1",
|
||||
// endTime: "2025-1-2"
|
||||
}).then((res) => {
|
||||
statistics.value = res;
|
||||
});
|
||||
};
|
||||
gettbGjtjgjCount();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-statistics {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 19px;
|
||||
}
|
||||
.row {
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.block {
|
||||
width: 101px;
|
||||
height: 75px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("~@/assets/images/qt11/kuang.png");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.quantity {
|
||||
// width: 66px;
|
||||
height: 21px;
|
||||
font-family: "YSBTH";
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
color: #f4fdff;
|
||||
line-height: 21px;
|
||||
text-shadow: 0px 5px 6px rgba(4, 13, 32, 0.27);
|
||||
background: linear-gradient(0deg, #59a6f4 0%);
|
||||
-webkit-background-clip: text;
|
||||
// margin: 0 6px 8px 5px;
|
||||
text-align: center;
|
||||
margin-top: 17px;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 8px;
|
||||
span {
|
||||
font-family: "MicrosoftYaHei";
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
// width: 66px;
|
||||
height: 17px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #cde3f6;
|
||||
line-height: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
src/views/home/components/mapecharts.vue
Normal file
145
src/views/home/components/mapecharts.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="map-container">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chart = null
|
||||
|
||||
const initChart = async () => {
|
||||
// 使用require方式导入静态资源
|
||||
const baseImg = require('@/assets/images/map-marker.svg')
|
||||
|
||||
try {
|
||||
// 确保图片加载完成
|
||||
await new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.onload = resolve
|
||||
img.onerror = reject
|
||||
img.src = baseImg
|
||||
})
|
||||
|
||||
let geoJson = require('./511202.json')
|
||||
chart = echarts.init(chartRef.value)
|
||||
echarts.registerMap('myMap', geoJson)
|
||||
|
||||
// 异步加载撒点数据
|
||||
const markerData = [
|
||||
{ name: '站点1', value: [102.651727, 30.117088, 3] },
|
||||
{ name: '站点2', value: [102.527442, 30.108846, 3] },
|
||||
{ name: '站点3', value: [102.801965, 30.100063, 3] },
|
||||
{ name: '站点4', value: [102.711411, 30.158424, 3] },
|
||||
{ name: '站点5', value: [102.579582, 30.174818, 3] }
|
||||
]
|
||||
|
||||
const option = {
|
||||
geo3D: {
|
||||
map: 'myMap',
|
||||
regionHeight: 6,
|
||||
shading: 'realistic',
|
||||
realisticMaterial: {
|
||||
roughness: 0.2,
|
||||
metalness: 0
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.2)',
|
||||
opacity: 0.9,
|
||||
borderWidth: 1,
|
||||
borderColor: '#61CFF8',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.5)',
|
||||
borderWidth: 10,
|
||||
borderColor: 'rgba(10,148,184,1)'
|
||||
}
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25,
|
||||
beta: 20
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
}
|
||||
},
|
||||
viewControl: {
|
||||
distance: 150,
|
||||
alpha: 46,
|
||||
beta: 30,
|
||||
},
|
||||
postEffect: {
|
||||
enable: true,
|
||||
bloom: {
|
||||
enable: true,
|
||||
intensity: 0.1
|
||||
}
|
||||
},
|
||||
temporalSuperSampling: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'scatter3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
symbol: 'image://' + baseImg,
|
||||
symbolSize: [40, 40],
|
||||
itemStyle: {
|
||||
color: '#00f0ff',
|
||||
opacity: 1
|
||||
},
|
||||
data: markerData
|
||||
}]
|
||||
}
|
||||
|
||||
// 确保DOM已经渲染完成
|
||||
await nextTick()
|
||||
chart.setOption(option)
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
chart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
250
src/views/home/components/wanringAnyse.vue
Normal file
250
src/views/home/components/wanringAnyse.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="warning-analysis">
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">车辆预警分析</h2>
|
||||
<div ref="vehicleChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">人员预警分析</h2>
|
||||
<div ref="personChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { choseRbgb } from '@/utils/tools'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const vehicleChartRef = ref(null)
|
||||
const personChartRef = ref(null)
|
||||
let vehicleChart = null
|
||||
let personChart = null
|
||||
|
||||
const createChartOption = (data, colors) => {
|
||||
return {
|
||||
title: {
|
||||
text: '100',
|
||||
subtext: '总数',
|
||||
left: '20%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 24,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '60%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff'
|
||||
},
|
||||
percentage: {
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
blue: {
|
||||
color: colors[0]
|
||||
},
|
||||
lightBlue: {
|
||||
color: colors[1]
|
||||
},
|
||||
orange: {
|
||||
color: colors[2]
|
||||
},
|
||||
green: {
|
||||
color: colors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (name) => {
|
||||
const item = data.find(d => d.name === name)
|
||||
return `${name} ${item.value} {${item.colorType}|(${item.value}%)}`
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
center: ['28%', '50%'],
|
||||
data: data.map(item => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color[0] },
|
||||
{ offset: 1, color: item.color[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: 'none'
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['65%', '85%'],
|
||||
center: ['28%', '50%'],
|
||||
data: data.map(item => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color1[0] },
|
||||
{ offset: 1, color: item.color1[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: 'none'
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const initCharts = () => {
|
||||
vehicleChart = echarts.init(vehicleChartRef.value)
|
||||
personChart = echarts.init(personChartRef.value)
|
||||
const colors = ['#00f0ff', '#0066ff', '#ff9900', '#00cc66']
|
||||
// 车辆预警数据
|
||||
const vehicleData = [
|
||||
{
|
||||
value: 25,
|
||||
name: '盗窃车辆',
|
||||
colorType: 'blue',
|
||||
color: ['#00f0ff', '#00a0cc'],
|
||||
color1: [choseRbgb('#00f0ff',0.3), choseRbgb('#00a0cc',0.3)]
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '车牌与车辆不符',
|
||||
colorType: 'lightBlue',
|
||||
color: ['#0066ff', '#0044cc'],
|
||||
color1: [choseRbgb('#0066ff',0.3), choseRbgb('#0044cc',0.3)]
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
name: '车辆超高',
|
||||
colorType: 'orange',
|
||||
color: ['#ff9900', '#cc7a00'],
|
||||
color1: [choseRbgb('#ff9900',0.3), choseRbgb('#cc7a00',0.3)]
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: '车辆超限',
|
||||
colorType: 'green',
|
||||
color: ['#00cc66', '#009944'],
|
||||
color1: [choseRbgb('#00cc66',0.3), choseRbgb('#009944',0.3)]
|
||||
}
|
||||
]
|
||||
|
||||
// 人员预警数据
|
||||
const personData = [
|
||||
{
|
||||
value: 25,
|
||||
name: '涉稳人员',
|
||||
colorType: 'blue',
|
||||
color: ['#00f0ff', '#00a0cc'],
|
||||
color1: [choseRbgb('#00f0ff',0.3), choseRbgb('#00a0cc',0.3)]
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '涉毒人员',
|
||||
colorType: 'lightBlue',
|
||||
color: ['#0066ff', '#0044cc'],
|
||||
color1: [choseRbgb('#0066ff',0.3), choseRbgb('#0044cc',0.3)]
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
name: '涉黄人员',
|
||||
colorType: 'orange',
|
||||
color: ['#ff9900', '#cc7a00'],
|
||||
color1: [choseRbgb('#ff9900',0.3), choseRbgb('#cc7a00',0.3)]
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: '前科人员',
|
||||
colorType: 'green',
|
||||
color: ['#00cc66', '#009944'],
|
||||
color1: [choseRbgb('#00cc66',0.3), choseRbgb('#009944',0.3)]
|
||||
}
|
||||
]
|
||||
vehicleChart.setOption(createChartOption(vehicleData, colors))
|
||||
personChart.setOption(createChartOption(personData, colors))
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
vehicleChart?.resize()
|
||||
personChart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initCharts()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
vehicleChart?.dispose()
|
||||
personChart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-analysis {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59A6F4 0%,#ffffff 90%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: url('~@/assets/images/bg_02.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
222
src/views/home/components/warning.vue
Normal file
222
src/views/home/components/warning.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="warning-container">
|
||||
<div class="warning-list noScollLine" v-infinite-scroll="scroll">
|
||||
<div
|
||||
@click="roadmap(item.zb)"
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.listData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="warning-image">
|
||||
<img :src="item.image" alt="预警图片" />
|
||||
</div>
|
||||
<div class="personalInfo">
|
||||
<div class="driver">
|
||||
驾驶员：<span>{{ item.cljsy }}</span>
|
||||
</div>
|
||||
<div class="driver">车牌号：{{ item.cph }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="course">行驶路线：{{ item.xlmc }}</div>
|
||||
<div class="fare">
|
||||
<div class="flex riding" style="">
|
||||
<div>乘车人数：20</div>
|
||||
<div>途中乘车人数：30</div>
|
||||
</div>
|
||||
|
||||
<div>重点人；30</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider border-style="dashed" class="dashed" />
|
||||
<div class="flex">
|
||||
<div class="mark">
|
||||
<img src="@/assets/images/bi/ddtb.png" />
|
||||
</div>
|
||||
<div class="address">
|
||||
{{ item.xlmc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList.listData.length == 0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { tbGjclselectPage } from "@/api/mosty-zhgj.js";
|
||||
import Empty from "@/components/Empty/index.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const warningList = reactive({
|
||||
listData: [],
|
||||
total: 0
|
||||
});
|
||||
const linQuery = reactive({
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const gettbGjclselectPage = () => {
|
||||
tbGjclselectPage(linQuery).then((res) => {
|
||||
warningList.listData =
|
||||
linQuery.pageCurrent == 1
|
||||
? res.records
|
||||
: warningList.listDat.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
});
|
||||
};
|
||||
const scroll = () => {
|
||||
if (warningList.total > warningList.listData.length) {
|
||||
gettbGjclselectPage();
|
||||
linQuery.pageCurrent++;
|
||||
}
|
||||
};
|
||||
gettbGjclselectPage();
|
||||
//画线
|
||||
const roadmap = (row) => {
|
||||
if (row && row.length > 0) {
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [row[0][0], row[0][1]],
|
||||
zoomLevel: 12
|
||||
});
|
||||
emitter.emit("drawLineAnimation", {
|
||||
type: "solid",
|
||||
coords: row,
|
||||
isclear: true,
|
||||
flag: "lx"
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-container {
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 8px 30px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg_08.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab-item.active::before {
|
||||
background: url("~@/assets/images/bg_09.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.warning-list {
|
||||
height: calc(100% - 13px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background-size: 100% 100%;
|
||||
background-image: url("~@/assets/images/bi/jqk.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 375px;
|
||||
height: 211px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #0468e1;
|
||||
opacity: 0.86;
|
||||
margin: 0 auto 10px;
|
||||
padding: 14px 10px 8px;
|
||||
}
|
||||
.warning-image {
|
||||
border: 1px solid #0468e1;
|
||||
|
||||
padding: 10px 10px 10px 14px;
|
||||
width: 123px;
|
||||
height: 69px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.personalInfo {
|
||||
margin-top: 20px;
|
||||
width: calc(100% - 131px);
|
||||
height: 42px;
|
||||
font-family: "Microsoft YaHei";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
.driver {
|
||||
line-height: 14px;
|
||||
margin-bottom: 12px;
|
||||
margin-left: 8px;
|
||||
span {
|
||||
color: #1ee7e7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
margin: 8px 0 13px;
|
||||
height: 71px;
|
||||
.course {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.fare {
|
||||
.riding {
|
||||
margin: 7px 0;
|
||||
div {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashed {
|
||||
width: 100%;
|
||||
border-top: 1px #0468e1 dashed;
|
||||
margin: 10px 0px 9px;
|
||||
}
|
||||
.mark {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
// background: linear-gradient(-3deg, #86c8eb, #ffffff);
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: linear-gradient(-3deg, #86c8eb, #ffffff);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.address {
|
||||
// width: 100%;
|
||||
width: calc(100% - 31px);
|
||||
margin-left: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
116
src/views/home/index.vue
Normal file
116
src/views/home/index.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<!-- 头部 -->
|
||||
<Head></Head>
|
||||
<!-- 左边 内容-->
|
||||
<div class="home-aside asideL">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">当日统计</div>
|
||||
<div class="comom-cnt">
|
||||
<Collection></Collection>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">车辆信息</div>
|
||||
<div class="comom-cnt">
|
||||
<Warning></Warning>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-aside asidecentre">
|
||||
<Introduction />
|
||||
</div>
|
||||
<!-- 右边 内容-->
|
||||
<div class="home-aside asideR">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">预警信息</div>
|
||||
<div class="comom-cnt">
|
||||
<BeOnDuty></BeOnDuty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import Head from "./layout/head.vue";
|
||||
import Collection from "./components/collection.vue";
|
||||
import Warning from "./components/warning.vue";
|
||||
import BeOnDuty from "./components/beonDuty.vue";
|
||||
import Introduction from "./components/Introduction.vue";
|
||||
import { ref } from "vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.homeBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.home-aside {
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
width: 442px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
height: calc(100vh - 67px);
|
||||
|
||||
background: #071629;
|
||||
}
|
||||
// 左边
|
||||
.asideL {
|
||||
top: 65px;
|
||||
left: 0;
|
||||
.asideL-top {
|
||||
height: 291px;
|
||||
background: red;
|
||||
background: url("~@/assets/images/bi/L_B.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.asideL-bottom {
|
||||
margin-top: 13px;
|
||||
height: calc(100% - 310px);
|
||||
background: url("~@/assets/images/border_R_B.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
// 右边
|
||||
.asideR {
|
||||
top: 65px;
|
||||
right: 0;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
.asideL-top {
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bi/R_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
// 右边
|
||||
.asidecentre {
|
||||
background: #07162900;
|
||||
width: calc(100% - 884px);
|
||||
height: 120px;
|
||||
bottom: 30px;
|
||||
left: 442px;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// 公用
|
||||
.common-title {
|
||||
padding: 0 54px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.comom-cnt {
|
||||
height: calc(100% - 30px);
|
||||
padding: 4px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
147
src/views/home/layout/head.vue
Normal file
147
src/views/home/layout/head.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="home-head-box relative">
|
||||
<div class="time absolute">
|
||||
<div class="f20">{{ datatime }}</div>
|
||||
<div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
|
||||
</div>
|
||||
<div class="title absolute" @click="goPath">{{ props.title }}</div>
|
||||
<div>
|
||||
<div class="min_title absolute">
|
||||
<span class="title_text">林芝市</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wd absolute">
|
||||
<el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
|
||||
<span> 温度 1~7°C </span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import { getRecentDay, timeValidate } from "@/utils/tools.js";
|
||||
import { ref, onMounted, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "公交系统"
|
||||
}
|
||||
});
|
||||
const datatime = ref(getRecentDay(0));
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref(0);
|
||||
const timersfm = ref(null);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
|
||||
function goPath() {
|
||||
router.push("/editPassword");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zdybg {
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: relative;
|
||||
background: #071629;
|
||||
z-index: 2;
|
||||
}
|
||||
.home-head-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
z-index: 2;
|
||||
background: #071629;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
height: 138px;
|
||||
z-index: -1;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.title {
|
||||
font-size: 36px;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
transform: translateX(-50%);
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.min_title {
|
||||
font-size: 36px;
|
||||
background: url("~@/assets/images/qt11/min_title.png") no-repeat center
|
||||
center;
|
||||
left: 50%;
|
||||
top: 65px;
|
||||
z-index: -2;
|
||||
background-color: #0a1d35;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
font-family: "YSBTH";
|
||||
.title_text {
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
left: 25%;
|
||||
top: 10px;
|
||||
}
|
||||
.wd {
|
||||
right: 25%;
|
||||
top: 12px;
|
||||
font-size: 16px;
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
}
|
||||
.zbbb {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
font-size: 16px;
|
||||
width: 162px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
background: url("~@/assets/images/btnbb.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user