417 lines
11 KiB
Vue
417 lines
11 KiB
Vue
<template>
|
||
|
||
<div class="main-box">
|
||
<div class="treeBox">
|
||
<MOSTY.DepartmentTree width="300px" placeholder="管理部门ID" @changeSsbm='changeSsbm' clearable filterable :isBmId="true" v-model="listQuery.ssbmdm" />
|
||
</div>
|
||
<div class="tableCnt">
|
||
<div class="titleBox">
|
||
<div class="title">已选机构：{{ssbmmc}}</div>
|
||
<div class="flex align-center">
|
||
<div class="flex align-center" style="margin-right:10px">
|
||
<div>是否包含:</div>
|
||
<el-select style="flex:1" v-model="listQuery.isChild" placeholder="请选择是否包含">
|
||
<el-option v-for="item in D_BZ_SF" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<div class="flex align-center">
|
||
<div>查询时间:</div>
|
||
<div class="time_box">
|
||
<div class="item_time" :class="activeIndex==index?'active_timebg':''" @click="changeTime(item,index)" v-for="(item,index) in timeArr" :key="item">{{item}}</div>
|
||
</div>
|
||
<el-date-picker v-if="listQuery.dateType=='04'" value-format="YYYY-MM-DD" @change='zdyChangeTime' v-model="zdyTime" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
|
||
</div>
|
||
<el-button type='primary' @click="searchFn">搜索</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="echartsBox">
|
||
<!-- 第一模块 -->
|
||
<ul class="itemBox">
|
||
<li class="item" v-for="item in date.oneList" :key="item.label">
|
||
<div class="ItemTitle">{{item.label}}</div>
|
||
<div class="echartsCnt">
|
||
<BatteryEharts v-if="item.value.length>0" :data='item.value' />
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- 第2模块 -->
|
||
<ul class="itemBoxSmall">
|
||
<li class="item" v-for="item in date.twoList" :key="item.label">
|
||
<div class="ItemTitle">{{item.label}}</div>
|
||
<ul class="itemCnt">
|
||
<li class="itemCntChild" v-for="(it,idx) in item.list" :key="idx">
|
||
<span class="icon"><img :src="it.icon" alt="" :style="{width:idx==2?'26px':'30px'}"></span>
|
||
<span class="title">{{it.title}} :</span>
|
||
<span class="num">{{it.num}} {{it.dw}}</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<div class="itemBoxBottom">
|
||
<Tablelist :headerShow='false'
|
||
:dic="{D_QW_BBZT, D_BZ_PDDTLX, D_BZ_RYMFJLB, D_BZ_RYJZLB, D_QW_BC_KTS, D_BZ_RYZBBBZW, D_QW_BBZL, D_BZ_SF, D_QW_XQLB, D_QW_XQLX, D_JCGL_ZDSB_SBLB, D_JCGL_ZDSB_SBLX, D_JCGL_JYCL_JYJTGJLB, D_JCGL_JYCL_JYJTFWLB, D_BZ_RYXFBBZW, D_BZ_XLFS, D_BZ_WZLX, D_BZ_ZZLX, D_JCGL_JYQX_QXLX}" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as MOSTY from "@/components/MyComponents/index";
|
||
import BatteryEharts from "@/views/backOfficeSystem/qwManagement/qwts/components/batteryEharts.vue";
|
||
import BarEcharts from "@/views/backOfficeSystem/qwManagement/qwts/components/barEcharts.vue";
|
||
import { timeValidate } from "@/utils/tools.js";
|
||
import { serviceGet, servicePost } from "@/api/serviceApi.js";
|
||
import LineEcharts from "@/views/backOfficeSystem/qwManagement/qwts/components/lineEcharts.vue";
|
||
import Tablelist from "@/views/backOfficeSystem/qwManagement/qwgl/tablelist.vue";
|
||
import { ElMessage } from "element-plus";
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed,
|
||
watch,
|
||
onMounted,
|
||
getCurrentInstance,
|
||
onUnmounted
|
||
} from "vue";
|
||
const { proxy } = getCurrentInstance();
|
||
const {
|
||
D_QW_BBZT,
|
||
D_BZ_PDDTLX,
|
||
D_BZ_RYMFJLB,
|
||
D_BZ_RYJZLB,
|
||
D_QW_BC_KTS,
|
||
D_BZ_RYZBBBZW,
|
||
D_QW_BBZL,
|
||
D_BZ_SF,
|
||
D_QW_XQLB,
|
||
D_QW_XQLX,
|
||
D_JCGL_ZDSB_SBLB,
|
||
D_JCGL_ZDSB_SBLX,
|
||
D_JCGL_JYCL_JYJTGJLB,
|
||
D_JCGL_JYCL_JYJTFWLB,
|
||
D_BZ_RYXFBBZW,
|
||
D_BZ_XLFS,
|
||
D_BZ_WZLX,
|
||
D_BZ_ZZLX,
|
||
D_JCGL_JYQX_QXLX
|
||
} = proxy.$dict(
|
||
"D_QW_BBZT",
|
||
"D_BZ_PDDTLX",
|
||
"D_BZ_RYMFJLB",
|
||
"D_BZ_RYJZLB",
|
||
"D_QW_BC_KTS",
|
||
"D_BZ_RYZBBBZW",
|
||
"D_QW_BBZL",
|
||
"D_BZ_SF",
|
||
"D_QW_XQLB",
|
||
"D_QW_XQLX",
|
||
"D_JCGL_ZDSB_SBLB",
|
||
"D_JCGL_ZDSB_SBLX",
|
||
"D_JCGL_JYCL_JYJTGJLB",
|
||
"D_JCGL_JYCL_JYJTFWLB",
|
||
"D_BZ_RYXFBBZW",
|
||
"D_BZ_XLFS",
|
||
"D_BZ_WZLX",
|
||
"D_BZ_ZZLX",
|
||
"D_JCGL_JYQX_QXLX"
|
||
);
|
||
const deptId = JSON.parse(localStorage.getItem("deptId"));
|
||
const activeIndex = ref();
|
||
const listQuery = ref({
|
||
// tjrq: "2024-08-13", //单日统计
|
||
tjrq: timeValidate(new Date(), "ymd"), //单日统计
|
||
dateType: "03",
|
||
ssbmdm: deptId[0].deptCode
|
||
});
|
||
const zdyTime = ref([]);
|
||
const timeArr = ref(["当日", "当周", "当月", "自定义"]);
|
||
const ssbmmc = ref(deptId[0].deptName);
|
||
const date = reactive({
|
||
oneList: [
|
||
{ label: "街面警力", value: [] },
|
||
{ label: "可抽调警力", value: [] },
|
||
{ label: "报备警力", value: [] },
|
||
{ label: "报备总量", value: [] }
|
||
],
|
||
twoList: [
|
||
{
|
||
label: "峰值（00:00:00 ~ 23：59：59）",
|
||
list: [
|
||
{
|
||
icon: require("@/assets/images/mj.png"),
|
||
title: "在岗民警",
|
||
num: 110,
|
||
dw: "人"
|
||
},
|
||
{
|
||
icon: require("@/assets/images/fj.png"),
|
||
title: "在岗辅警",
|
||
num: 110,
|
||
dw: "人"
|
||
},
|
||
{
|
||
icon: require("@/assets/images/jc.png"),
|
||
title: "在岗警车",
|
||
num: 110,
|
||
dw: "辆"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: "报备总量",
|
||
list: [
|
||
{
|
||
icon: require("@/assets/images/mj.png"),
|
||
title: "在岗民警",
|
||
num: 110,
|
||
dw: "人"
|
||
},
|
||
{
|
||
icon: require("@/assets/images/fj.png"),
|
||
title: "在岗辅警",
|
||
num: 110,
|
||
dw: "人"
|
||
},
|
||
{
|
||
icon: require("@/assets/images/jc.png"),
|
||
title: "在岗警车",
|
||
num: 110,
|
||
dw: "辆"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
});
|
||
// 获取上面柱状图的数据
|
||
const handleJlData = () => {
|
||
serviceGet(
|
||
listQuery.value,
|
||
"/mosty-qwzx/tbQwglCount/selectDateJYBMFCCount"
|
||
).then((res) => {
|
||
date.oneList[0].value = [res.jmjlMjsl, res.jmjlFjsl, res.jmjlClsl];
|
||
date.oneList[1].value = [res.yjkcdjlMjsl, res.yjkcdjlFjsl, res.yjkcdjlClsl];
|
||
date.oneList[2].value = [res.bbjlMjsl, res.bbjlFjsl, res.bbjlClsl];
|
||
date.oneList[3].value = [res.bbzlMjsl, res.bbzlFjsl, res.bbzlClsl];
|
||
});
|
||
};
|
||
// 获取中间柱状图的数据
|
||
const handleFzData = () => {
|
||
serviceGet(
|
||
listQuery.value,
|
||
"/mosty-qwzx/tbQwglCount/selectDateMFCPartCount"
|
||
).then((res) => {
|
||
date.twoList[0].list[0].num = res.fzMjsl;
|
||
date.twoList[0].list[1].num = res.fzFjsl;
|
||
date.twoList[0].list[2].num = res.fzClsl;
|
||
date.twoList[1].list[0].num = res.gzMjsl;
|
||
date.twoList[1].list[1].num = res.gzFjsl;
|
||
date.twoList[1].list[2].num = res.gzClsl;
|
||
});
|
||
};
|
||
const changeTime = (item, index) => {
|
||
console.log(item, "item");
|
||
activeIndex.value = index;
|
||
switch (item) {
|
||
case "当日":
|
||
listQuery.value.dateType = "03";
|
||
break;
|
||
case "当周":
|
||
listQuery.value.dateType = "02";
|
||
break;
|
||
case "当月":
|
||
listQuery.value.dateType = "01";
|
||
break;
|
||
case "自定义":
|
||
listQuery.value.dateType = "04";
|
||
break;
|
||
}
|
||
};
|
||
// 自定义时间
|
||
const zdyChangeTime = (val) => {
|
||
listQuery.value.ksrq = val[0];
|
||
listQuery.value.jsrq = val[1];
|
||
};
|
||
const changeSfbhFn = (val) => {
|
||
handleJlData();
|
||
handleFzData();
|
||
};
|
||
const searchFn = () => {
|
||
// if (listQuery.value.ksrq && listQuery.value.jsrq) {
|
||
// listQuery.value.tjrq = "";
|
||
// }
|
||
handleJlData();
|
||
handleFzData();
|
||
};
|
||
const changeSsbm = (val) => {
|
||
ssbmmc.value = val.orgName;
|
||
listQuery.value.ssbmdm = val.orgCode;
|
||
handleJlData();
|
||
handleFzData();
|
||
};
|
||
onMounted(() => {
|
||
handleJlData();
|
||
handleFzData();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "~@/assets/css/layout.scss";
|
||
@import "~@/assets/css/element-plus.scss";
|
||
.main-box {
|
||
display: flex;
|
||
font-size: 16px;
|
||
.tableCnt {
|
||
flex: 1;
|
||
margin-left: 10px;
|
||
.echartsBox {
|
||
height: calc(100% - 50px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
.itemBox {
|
||
flex: 1;
|
||
display: flex;
|
||
height: 100%;
|
||
margin: 2px 0;
|
||
}
|
||
.itemBoxSmall {
|
||
height: 110px;
|
||
display: flex;
|
||
margin: 2px 0;
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
.itemBoxBottom {
|
||
height: 460px;
|
||
}
|
||
.ItemTitle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 30px;
|
||
background: #f4f4f4;
|
||
padding: 0 14px;
|
||
box-sizing: border-box;
|
||
.btn {
|
||
padding: 2px 6px;
|
||
color: #fff;
|
||
background: #01c2ff;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.echartsCnt {
|
||
height: calc(100% - 30px);
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
li {
|
||
display: flex;
|
||
.head {
|
||
width: 50%;
|
||
background: #f0f0f0;
|
||
text-align: center;
|
||
padding: 4px 0;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
}
|
||
.num {
|
||
width: 50%;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
padding: 4px 0;
|
||
box-sizing: border-box;
|
||
border: 1px solid #f0f0f0;
|
||
border-top: 0;
|
||
}
|
||
.num1 {
|
||
border-right: 0;
|
||
}
|
||
}
|
||
.numlabel {
|
||
width: 80px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
border: 1px solid #cac8c8;
|
||
background: #f0f0f0;
|
||
line-height: 38px;
|
||
border-top: 0;
|
||
}
|
||
.topNum {
|
||
border-top: 1px solid #cac8c8;
|
||
}
|
||
.numValue {
|
||
width: calc(100% - 80px);
|
||
line-height: 38px;
|
||
span {
|
||
border: 1px solid #cac8c8;
|
||
font-size: 14px;
|
||
display: inline-block;
|
||
width: calc(100% / 24);
|
||
text-align: center;
|
||
border-top: 0;
|
||
border-left: 0;
|
||
white-space: nowrap;
|
||
}
|
||
.topSpan {
|
||
border-top: 1px solid #cac8c8;
|
||
}
|
||
}
|
||
}
|
||
.itemCnt {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
overflow: hidden;
|
||
.itemCntChild {
|
||
width: 50%;
|
||
padding: 5px 20px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
.icon {
|
||
display: inline-block;
|
||
text-align: center;
|
||
width: 30px;
|
||
}
|
||
.title {
|
||
color: #000;
|
||
font-size: 14px;
|
||
margin: 0 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.num {
|
||
color: #142232;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
.item {
|
||
flex: 1;
|
||
height: 100%;
|
||
margin: 0 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.time_box {
|
||
display: flex;
|
||
.item_time {
|
||
background: skyblue;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
padding: 4px;
|
||
margin: 0 2px;
|
||
}
|
||
}
|
||
.active_timebg {
|
||
background: #39adc4 !important;
|
||
}
|
||
</style>
|