zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新大屏

Browse Source
This commit is contained in:
zy_zr
2025-04-15 14:38:12 +08:00
parent 8b786df36a
commit 7d1ed23a98
90 changed files with 2828 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue
View File

@ -1,11 +1,96 @@
<template>
<div class="echartsBox">ggg</div>
<div class="echartsBox" ref="chartRef"></div>
</template>
<script>
export default {
import * as echarts from 'echarts';
import 'echarts-gl';
}
// export default {
// name: 'Bkjbtj',
// data() {
// return {
// chart: null,
// chartData: [
// { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
// { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
// { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
// { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
// ]
// };
// },
// mounted() {
// this.initChart();
// window.addEventListener('resize', this.resizeChart);
// },
// beforeDestroy() {
// window.removeEventListener('resize', this.resizeChart);
// this.chart && this.chart.dispose();
// },
// methods: {
// initChart() {
// this.chart = echarts.init(this.$refs.chartRef);
// const option = {
// backgroundColor: 'transparent',
// tooltip: {
// trigger: 'item',
// formatter: '{b}: {c} ({d}%)'
// },
// legend: {
// orient: 'vertical',
// right: '5%',
// top: 'middle',
// textStyle: {
// color: '#fff'
// }
// },
// series: [{
// name: '告警统计',
// type: 'pie3D',
// radius: '55%',
// center: ['40%', '50%'],
// viewControl: {
// beta: 40,
// alpha: 20,
// distance: 200,
// rotateSensitivity: 1,
// zoomSensitivity: 1
// },
// label: {
// show: true,
// formatter: '{d}%',
// textStyle: {
// color: '#fff',
// fontSize: 14,
// borderWidth: 1
// }
// },
// labelLine: {
// show: true,
// lineStyle: {
// color: '#fff'
// }
// },
// itemStyle: {
// opacity: 0.8,
// borderWidth: 1,
// borderColor: '#fff'
// },
// emphasis: {
// itemStyle: {
// opacity: 1
// }
// },
// data: this.chartData
// }]
// };
// this.chart.setOption(option);
// },
// resizeChart() {
// this.chart && this.chart.resize();
// }
// }
// };
</script>
<style lang="scss" scoped>
@ -15,5 +100,4 @@ export default {
background: rgba(0,29,75,0.6);
border-radius: 0 0 4px 4px;
}
</style>

7
src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue
View File

@ -6,9 +6,6 @@
import * as echarts from "echarts";
import { ref, onMounted, watch, defineProps } from "vue";
onMounted(() => {
lineChartFn();
});
function lineChartFn() {
var chartDom = document.getElementById("circlecz");
var myChart = echarts.init(chartDom);
@ -98,7 +95,7 @@ function lineChartFn() {
},
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [10, 4], // 设置扁圆的宽和高
symbolSize: [11, 4], // 设置扁圆的宽和高
itemStyle: {
color: '#087df9' // 圆盘颜色
},
@ -132,7 +129,7 @@ function lineChartFn() {
},
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [10, 4], // 设置扁圆的宽和高
symbolSize: [11, 4], // 设置扁圆的宽和高
itemStyle: {
color: '#00FFFF' // 圆盘颜色
},

106
src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
View File

@ -1,5 +1,17 @@
<template>
<div class="systemBox">
<!-- 头部筛选 -->
<div class="topSearch">
<el-form v-model="listQuery">
<MOSTY.Department clearable width="400px" v-model="listQuery.ssbmdm" />
<MOSTY.Select v-model="listQuery.sd" :dictEnum="search.xd" />
<MOSTY.Select v-model="listQuery.zs" :dictEnum="search.zs" />
<MOSTY.Select v-model="listQuery.qy" :dictEnum="search.qy" />
<MOSTY.Select v-model="listQuery.dz" :dictEnum="search.dz" />
</el-form>
<el-button type="primary">搜索</el-button>
</div>
<div></div>
<!-- 左边列表 -->
<div class="leftList">
<div class="hed flex just-between align center">
@ -17,51 +29,90 @@
</li>
</ul>
</div>
<!-- 右边模块 -->
<div class="rightList">
<!-- 第一部门 -->
<div>
<div class="hed flex align-center">
<span @click="active = it" :class="active == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.bkBtn" :key="it" >{{ it }}</span>
</div>
<span
@click="active = it"
:class="active == it ? 'active' : ''"
class="f14 mr10 pointer"
v-for="it in btn.bkBtn"
:key="it"
>{{ it }}</span
>
</div>
<Count></Count>
</div>
<!-- 第二部分 -->
<div class="mt10">
<div class="hed flex align-center">布控级别统计</div>
<div style="width:100%;height:170px">
<div style="width: 100%; height: 170px">
<Bkjbtj></Bkjbtj>
</div>
</div>
<!-- 第三部分 -->
<div class="mt10">
<div class="hed flex align-center">
<span @click="active1 = it" :class="active1 == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.yrBtn" :key="it" >{{ it }}</span>
<span
@click="active1 = it"
:class="active1 == it ? 'active' : ''"
class="f14 mr10 pointer"
v-for="it in btn.yrBtn"
:key="it"
>{{ it }}</span
>
</div>
<div style="width:100%;height:170px">
<div style="width: 100%; height: 170px">
<RyCount></RyCount>
</div>
</div>
<!-- 第四部分 -->
<div class="mt10">
<div class="hed flex align-center">轨迹统计</div>
<div style="width:100%;height:170px">
<div style="width: 100%; height: 170px">
<Gjtj></Gjtj>
</div>
</div>
</div>
<!-- 底部按钮 -->
<ul class="footBox">
<li class="footItem" v-for="it in btn.footBtn" :key="it">{{ it }}</li>
</ul>
</div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import YjItem from "./components/yjItem.vue";
import Count from "./components/count.vue";
import Bkjbtj from "./components/bkjbtj.vue";
import RyCount from "./components/ryCount.vue";
import Gjtj from "./components/gjtj.vue";
import { reactive, ref } from "vue";
const listQuery = ref({
keyword: ""
});
const search = reactive({
xd: [
{ label: "吸毒", value: "10" },
{ label: "贩毒", value: "20" }
],
zs: [
{ label: "酒店", value: "10" },
{ label: "名宿", value: "20" }
],
qy: [
{ label: "县城", value: "10" },
{ label: "市区", value: "20" }
],
dz: [
{ label: "网吧", value: "10" },
{ label: "酒馆", value: "20" }
]
});
const searchForm = ref({
keyword: ""
});
@ -108,8 +159,9 @@ const personList = ref([
}
]);
const btn = reactive({
bkBtn :["布控人员", "布控群体"],
yrBtn :["人员身份标签统计", "人员行为标签统计"]
bkBtn: ["布控人员", "布控群体"],
yrBtn: ["人员身份标签统计", "人员行为标签统计"],
footBtn:['预警','布控']
});
const active = ref("布控人员");
const active1 = ref("人员身份标签统计");
@ -126,6 +178,23 @@ const active1 = ref("人员身份标签统计");
width: calc(100% + 40px);
height: calc(100% + 20px);
background: #e9edf6;
.topSearch {
position: absolute;
top: 10px;
right: 500px;
width: 600px;
height: 60px;
display: flex;
align-items: center;
.el-form {
display: flex;
::v-deep .el-input__inner{
background: rgba(0, 22, 83, 0.4);
border: 1px solid #0072ff;
color: #fff;
}
}
}
.leftList {
position: absolute;
left: 20px;
@ -162,6 +231,23 @@ const active1 = ref("人员身份标签统计");
font-family: "YSBTH";
}
}
.footBox{
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
display: flex;
align-items: center;
.footItem{
background: red;
width: 195px;
height: 42px;
text-align: center;
line-height: 42px;
margin: 0 10px;
font-size: 16px;
}
}
.hed {
height: 40px;
line-height: 40px;