128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||
|
|
</div>
|
||
|
|
<div class="Count-Cnt flex">
|
||
|
|
<div class="left">
|
||
|
|
<MyTable :tableData="pageData.tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||
|
|
:tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount"
|
||
|
|
:tableConfiger="pageData.tableConfiger">
|
||
|
|
</MyTable>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<BarHatEcharts echartsId="counrtEchars" :data='obj'></BarHatEcharts>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { qcckGet} from "@/api/qcckApi.js";
|
||
|
|
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||
|
|
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
|
||
|
|
import Search from "@/components/aboutTable/Search.vue";
|
||
|
|
import { ref, onMounted, reactive } from "vue";
|
||
|
|
const searchConfiger = ref([
|
||
|
|
{ label: "时间段", prop: "time", showType: "daterange" },
|
||
|
|
]);
|
||
|
|
const obj = ref({
|
||
|
|
xDate: [],
|
||
|
|
list: []
|
||
|
|
})
|
||
|
|
const paramsObj = ref({})
|
||
|
|
const pageData = reactive({
|
||
|
|
tableData: [],
|
||
|
|
keyCount: 0,
|
||
|
|
tableHeight: 620,
|
||
|
|
tableConfiger: {
|
||
|
|
rowHieght: 61,
|
||
|
|
showSelectType: "null",
|
||
|
|
loading: false,
|
||
|
|
haveControls: false,
|
||
|
|
showIndex: false,
|
||
|
|
rowKey: 'ssbmdm',
|
||
|
|
lazy: false
|
||
|
|
},
|
||
|
|
controlsWidth: 100, // No controls needed based on prototype
|
||
|
|
tableColumn: [
|
||
|
|
{ label: "", prop: "mc" },
|
||
|
|
{ label: "跟踪侦察", prop: "xlzsl" },
|
||
|
|
{ label: "人员线索", prop: "xlrs" },
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getData()
|
||
|
|
});
|
||
|
|
const getData = () => {
|
||
|
|
qcckGet(paramsObj.value, "/mosty-jbld/rw/getRwtj").then(res => {
|
||
|
|
if (res && res.length > 0) {
|
||
|
|
pageData.tableColumn = res[0].list.map((el) => {
|
||
|
|
return { label: el.zdmc, prop: el.py }
|
||
|
|
})
|
||
|
|
pageData.tableColumn.unshift({ label: "", prop: "mc" })
|
||
|
|
pageData.tableData = res.map((item) => {
|
||
|
|
let big = {};
|
||
|
|
big.mc = item.ssbm;
|
||
|
|
big.ssbmdm = item.ssbmdm;
|
||
|
|
item.list.forEach((el) => {
|
||
|
|
big[el.py] = el.count
|
||
|
|
})
|
||
|
|
return big
|
||
|
|
})
|
||
|
|
obj.value.list = res[0]?.list.map((el) => {
|
||
|
|
return { name: el.zdmc, value: [], hatColor: '#087df9', color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'] }
|
||
|
|
})
|
||
|
|
obj.value.list?.forEach((w) => {
|
||
|
|
res.forEach((el) => {
|
||
|
|
el.list.forEach((item) => {
|
||
|
|
if (w.name == item.zdmc) {
|
||
|
|
w.value.push(item.count)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
obj.value.xDate = res.map((el) => el.ssbm)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const onSearch = (params) => {
|
||
|
|
if (params.time.length > 0) {
|
||
|
|
paramsObj.value.kssj = params.time[0]
|
||
|
|
paramsObj.value.jssj = params.time[1]
|
||
|
|
}
|
||
|
|
getData()
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取统计数据
|
||
|
|
const getCount = () =>{
|
||
|
|
qcckGet({},'/mosty-jbld/rw/getRwtj').then(res=>{
|
||
|
|
console.log(res,'============00');
|
||
|
|
let arr = res || [];
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.Count-Cnt {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100vh - 267px);
|
||
|
|
/* Adjust height as needed */
|
||
|
|
background: #fff;
|
||
|
|
padding: 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
width: 500px;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
flex: 1 0 0;
|
||
|
|
margin-left: 10px;
|
||
|
|
height: 100%;
|
||
|
|
border: 1px solid #e9e9e9;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|