124
This commit is contained in:
416
src/views/backOfficeSystem/qwManagement/dwqw/index.vue
Normal file
416
src/views/backOfficeSystem/qwManagement/dwqw/index.vue
Normal file
@ -0,0 +1,416 @@
|
||||
<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>
|
Reference in New Issue
Block a user