124
This commit is contained in:
272
src/views/backOfficeSystem/kaoQinGL/jlytz/index.vue
Normal file
272
src/views/backOfficeSystem/kaoQinGL/jlytz/index.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="main-box">
|
||||
<div class="treeBox">
|
||||
<Trre ref="trre"
|
||||
@changeSsbm="changeSsbm"
|
||||
width="300px"
|
||||
placeholder="管理部门ID"
|
||||
clearable
|
||||
filterable
|
||||
:isBmId="true"
|
||||
v-model="listQuery.ssbmdm"
|
||||
@dialogBox="dialogBox"
|
||||
@orgList="orgList"
|
||||
/>
|
||||
</div>
|
||||
<div class="tableCnt" v-if="dialog">
|
||||
<el-form :model="searchConfiger" :inline="true">
|
||||
<el-form-item label="起止时间">
|
||||
<el-date-picker
|
||||
v-model="searchConfiger.queryTime"
|
||||
unlink-panels
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleFilter"> 查询 </el-button>
|
||||
<el-button @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div :style="{ height: tableHeight + 'px' }" class="tjbox" v-loading="loading">
|
||||
<div class="box" v-for="(item, index) in EchartsData" :key="index">
|
||||
<div class="ItemTitle">{{ item.title }}</div>
|
||||
<div class="barEcharts">
|
||||
<BarEcharts
|
||||
v-if="item.data.length > 0"
|
||||
:data="item.data"
|
||||
:Xdata="Xdata"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map">
|
||||
<GdMap />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else><editAddForm :dialog="dialog" :orgData="orgData" :str="title" @dialogBox="dialogBox" @modegenx="modegenx" /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import { getjltj, getqxjtj, getwctj, getcctj } from "@/api/file.js";
|
||||
import BarEcharts from "@/views/backOfficeSystem/qwManagement/components/barEcharts.vue";
|
||||
import editAddForm from "./editAddForm.vue";
|
||||
import Trre from "./trre.vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
// import Search from "@/components/aboutTable/Search.vue";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const deptId = JSON.parse(localStorage.getItem("deptId"));
|
||||
const searchConfiger = reactive({
|
||||
queryTime: []
|
||||
});
|
||||
const {
|
||||
D_JCGL_JYCL_JYJTYTLB,
|
||||
D_JCGL_JYCL_JYJTFWLB,
|
||||
D_JCGL_JYCL_JYJTGJLB,
|
||||
D_BZ_RYJZLB,
|
||||
D_JCGL_JYCL_HPYSLB
|
||||
} = proxy.$dict(
|
||||
"D_JCGL_JYCL_JYJTYTLB",
|
||||
"D_JCGL_JYCL_JYJTFWLB",
|
||||
"D_JCGL_JYCL_JYJTGJLB",
|
||||
"D_BZ_RYJZLB",
|
||||
"D_JCGL_JYCL_HPYSLB"
|
||||
);
|
||||
const listQuery = ref({ ssbmdm: "", kssj: "", jssj: "" });
|
||||
const changeSsbm = (val) => {
|
||||
listQuery.value.id = val.id;
|
||||
ArrData();
|
||||
};
|
||||
const loading=ref(false)
|
||||
const Xdata = ref(["民警", "辅警"]);
|
||||
const EchartsData = ref([]);
|
||||
const ArrData = async () => {
|
||||
loading.value=true
|
||||
const pormes = {
|
||||
id: listQuery.value.id,
|
||||
kssj: listQuery.value.kssj,
|
||||
jssj: listQuery.value.jssj,
|
||||
};
|
||||
try{
|
||||
EchartsData.value = [];
|
||||
const jltj = await getjltj(pormes);
|
||||
const qxjtj = await getqxjtj(pormes);
|
||||
const cctj = await getcctj(pormes);
|
||||
EchartsData.value.push({
|
||||
title: "总警力",
|
||||
data: [
|
||||
{
|
||||
name: "总警力",
|
||||
data: [jltj.mjsl, jltj.fjsl],
|
||||
type: "bar",
|
||||
barWidth: 10
|
||||
}
|
||||
]
|
||||
});
|
||||
EchartsData.value.push({
|
||||
title: "在岗数",
|
||||
data: [
|
||||
{
|
||||
name: "在岗数",
|
||||
data: [jltj.mjsl-cctj.mjsl,jltj.fjsl- cctj.fjsl-qxjtj.fjsl],
|
||||
type: "bar",
|
||||
barWidth: 10
|
||||
}
|
||||
]
|
||||
});
|
||||
EchartsData.value.push({
|
||||
title: "请休假",
|
||||
data: [
|
||||
{
|
||||
name: "请休假",
|
||||
data: [qxjtj.mjsl, qxjtj.fjsl],
|
||||
type: "bar",
|
||||
barWidth: 10
|
||||
}
|
||||
]
|
||||
});
|
||||
EchartsData.value.push({
|
||||
title: "出差",
|
||||
data: [
|
||||
{ name: "出差", data: [cctj.mjsl, cctj.fjsl], type: "bar", barWidth: 10 }
|
||||
]
|
||||
});
|
||||
}catch{}finally{
|
||||
loading.value=false
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// ArrData();
|
||||
const handleFilter = () => {
|
||||
if (searchConfiger.queryTime.length > 0) {
|
||||
listQuery.value.jssj = searchConfiger.queryTime[1];
|
||||
listQuery.value.kssj = searchConfiger.queryTime[0];
|
||||
} else {
|
||||
listQuery.value.jssj = "";
|
||||
listQuery.value.kssj = "";
|
||||
}
|
||||
ArrData();
|
||||
};
|
||||
const reset = () => {
|
||||
searchConfiger.queryTime = [];
|
||||
};
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
const tableHeight = ref();
|
||||
const tabHeightFn = () => {
|
||||
tableHeight.value = window.innerHeight -520 - 144;
|
||||
console.log(tableHeight.value);
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
const dialog = ref(true);
|
||||
const orgData=ref()
|
||||
const title=ref()
|
||||
const dialogBox = (val,bool,str) => {
|
||||
orgData.value=val
|
||||
dialog.value =bool;
|
||||
title.value=str
|
||||
|
||||
};
|
||||
const orgList=(val)=>{
|
||||
if(val.length&&val[0].orgCode=='510300000000'){
|
||||
listQuery.value.id=val[0].id
|
||||
ArrData();
|
||||
}
|
||||
const a= val.filter(item=>item.jd&&item.wd)
|
||||
a.map(item=>{
|
||||
emitter.emit("addPointArea", {
|
||||
coords: [{ jd: item.jd, wd:item.wd ,jzMc:item.orgName}],
|
||||
showTitle:true,
|
||||
icon:item.bmtg?`/mosty-api/mosty-base/minio/image/download/${item.bmtg}`:require("@/assets/point/jwz.png"),
|
||||
flag: "zqd"
|
||||
});
|
||||
return { jd: item.jd, wd:item.wd };
|
||||
})
|
||||
}
|
||||
const trre=ref()
|
||||
const modegenx=()=>{
|
||||
trre.value.modegenx()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.main-box {
|
||||
display: flex;
|
||||
|
||||
.tableCnt {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
|
||||
.tjbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.box {
|
||||
width: calc(99% / 4);
|
||||
height: 300px;
|
||||
border: 1px solid #000;
|
||||
|
||||
.title {
|
||||
font-size: 18x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
height: 520px;
|
||||
width: 100%;
|
||||
// height: calc(100% - 370px);
|
||||
}
|
||||
|
||||
.barEcharts {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user