This commit is contained in:
2025-07-06 17:23:11 +08:00
parent f2eb08b935
commit 4fa85505cf
4 changed files with 173 additions and 120 deletions

View File

@ -125,20 +125,11 @@ const nodeClick = (node) => {
}else{ }else{
emits("update:modelValue", node.orgCode); emits("update:modelValue", node.orgCode);
} }
emits("change", node);
}; };
const emits = defineEmits(["update:modelValue"]); const emits = defineEmits(["update:modelValue",'change']);
const handleChange = (e) => {
if (props.multiple === true) {
const data = e.map((item) => {
return item[item.length - 1];
});
emits("update:modelValue", data);
} else {
const data = e[0];
emits("update:modelValue", data);
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -64,6 +64,45 @@ export function timeValidate(date, type) {
} }
export function timeSlotChange(val) {
let startTime, endTime;
let now = new Date(); //当前日期
let nowDayOfWeek = now.getDay(); //今天本周的第几天
let nowDay = now.getDate(); //当前日
let nowMonth = now.getMonth(); //当前月
let nowYear = now.getFullYear(); //当前年
let jd = Math.ceil((nowMonth + 1) / 3)
switch (val) {
case '天':
case '日':
startTime = timeValidate(new Date(), 'ymd')
endTime = timeValidate(new Date(), 'ymd')
break;
case "本周":
case "周":
startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)
break;
case "本月":
case "月":
startTime = new Date(nowYear, nowMonth, 1)
endTime = new Date(nowYear, nowMonth + 1, 0)
break;
case "本季度":
case "季度":
startTime = new Date(nowYear, (jd - 1) * 3, 1)
endTime = new Date(nowYear, jd * 3, 0)
break
case "本年":
case "年":
startTime = new Date(nowYear, 0, 1)
endTime = new Date(nowYear, 11, 31)
break
}
return [timeValidate(startTime, 'ymd'), timeValidate(endTime, 'ymd')]
}
// 获取当前近多少天 7后7天 -7 前五天 // 获取当前近多少天 7后7天 -7 前五天
export function getRecentDay(n) { export function getRecentDay(n) {
var currentDate = new Date(); var currentDate = new Date();

View File

@ -3,7 +3,7 @@
<!-- 左侧树形菜单 --> <!-- 左侧树形菜单 -->
<div class="left-menu"> <div class="left-menu">
<!-- 这个部分用的是组件-后期替换 --> <!-- 这个部分用的是组件-后期替换 -->
<MOSTY.DepartmentTree width="310px" placeholder="管理部门ID" clearable filterable :isBmId="true" v-model="obj.listQuery.deptId" /> <MOSTY.DepartmentTree width="310px" placeholder="管理部门" clearable filterable :isBmId="true" v-model="obj.listQuery.deptId" />
</div> </div>
<!-- 右侧内容区 --> <!-- 右侧内容区 -->

View File

@ -3,22 +3,15 @@
<!-- 左侧树形菜单 --> <!-- 左侧树形菜单 -->
<div class="left-menu"> <div class="left-menu">
<!-- 这个部分用的是组件-后期替换 --> <!-- 这个部分用的是组件-后期替换 -->
<el-tree <MOSTY.DepartmentTree width="310px" @change="init" placeholder="管理部门" clearable filterable :isBmId="true" v-model="listQuery.ssbmdm" />
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
default-expand-all
/>
</div> </div>
<!-- 右侧内容区 --> <!-- 右侧内容区 -->
<div class="right-content"> <div class="right-content">
<!-- 顶部筛选 --> <!-- 顶部筛选 -->
<div class="filter-section"> <div class="filter-section">
<el-radio-group v-model="radio"> <el-radio-group v-model="radio" @change="changeRadio">
<el-radio :label="it.value" v-for="it in timeList" :key="it.value">{{ <el-radio v-for="(it,idx) in timeList" :key="idx" :label="it.num" >{{ it.label }}</el-radio>
it.label
}}</el-radio>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
v-model="dateRange" v-model="dateRange"
@ -30,8 +23,8 @@
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
@change="handleDateChange" @change="handleDateChange"
/> />
<el-button type="primary" @click="handleExport">查询</el-button> <el-button type="primary" @click="init">查询</el-button>
<el-button type="primary" @click="handleExport">重置</el-button> <el-button type="primary" @click="handleRest">重置</el-button>
</div> </div>
<!-- 统计图表区域 --> <!-- 统计图表区域 -->
@ -42,42 +35,28 @@
<el-button type="primary">导出统计表</el-button> <el-button type="primary">导出统计表</el-button>
</div> </div>
<div class="chart"> <div class="chart">
<PieEcharts <PieEcharts echartsId="pieChart" color="#333" :data="obj.cjList" />
echartsId="pieChart"
color="#333"
:data="obj.cjList"
></PieEcharts>
</div> </div>
</div> </div>
<div class="chart-item"> <div class="chart-item">
<div class="chart-title"> <div class="chart-title">
<span>指令统计</span> <span>线索来源统计</span>
<el-button type="primary">导出统计表</el-button> <el-button type="primary">导出统计表</el-button>
</div> </div>
<div class="chart"> <div class="chart">
<DbarEcharts <DbarEcharts echartsId="bar3DChart" :data="obj.xslyList" />
echartsId="bar3DChart"
:data="obj.zlList"
></DbarEcharts>
</div> </div>
</div> </div>
<div class="chart-item"> <div class="chart-item">
<div class="chart-title"> <div class="chart-title">
<span>线索类型统计</span> <span>线索专题统计</span>
<el-button type="primary">导出统计表</el-button> <el-button type="primary">导出统计表</el-button>
</div> </div>
<ul class="chart mt8"> <ul class="chart mt8">
<li v-for="(it, idx) in obj.jjList" :key="idx" class="mb6"> <li v-for="(it, idx) in obj.xxztList" :key="idx" class="mb6">
<div style="color: #333">{{ it.label }}</div> <div style="color: #333">{{ it.label }}</div>
<el-progress <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
:text-inside="true" <span><span style="color: #e37233">{{ it.value }}</span> </span>
:stroke-width="20"
:percentage="50"
status="exception"
>
<span
><span style="color: #e37233">{{ it.value }}</span> </span
>
</el-progress> </el-progress>
</li> </li>
</ul> </ul>
@ -87,11 +66,7 @@
<span>线索类型统计</span> <span>线索类型统计</span>
<el-button type="primary">导出统计表</el-button> <el-button type="primary">导出统计表</el-button>
</div> </div>
<lineEcharts <lineEcharts color="#333" echartsId="areaChart" :data="obj.xxlxList" />
color="#333"
echartsId="areaChart"
:data="obj.bkgzList"
></lineEcharts>
</div> </div>
</div> </div>
</div> </div>
@ -99,92 +74,140 @@
</template> </template>
<script setup> <script setup>
import { timeValidate, timeSlotChange } from "@/utils/tools.js";
import * as MOSTY from "@/components/MyComponents/index";
import lineEcharts from "@/views/home/echarts/lineEcharts.vue"; import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
import PieEcharts from "@/views/home/echarts/pieEcharts.vue"; import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue"; import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js"; import { qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"; import { reactive, ref, onMounted } from "vue";
import * as echarts from "echarts";
const radio = ref("日"); const dateRange = ref([timeValidate(),timeValidate()]);// 日期范围
const radio = ref(0); //当天
const timeList = ref([ const timeList = ref([
{ label: "日", value: "0" }, { label: "日", num: 0 },
{ label: "月", value: "1" }, { label: "月", num: 1 },
{ label: "季", value: "2" }, { label: "季", num: 2 },
{ label: "年", value: "3" } { label: "年", num: 3 }
]); ]);
const listQuery = ref({})
const obj = reactive({ const obj = reactive({
listQuery: {}, cjList: [],// 线索采集统计
cjList: [ xxztList: [],// 线索专题统计
{ label: "采纳数", value: 18 }, xxlxList: [],//线索类型统计
{ label: "编刊数", value: 20 }, xslyList: {
{ label: "退回数", value: 50 }, list: [],//线索来源统计
{ label: "合并数", value: 40 },
{ label: "其他", value: 30 }
],
// 布控工作统计
bkgzList: [
{ label: "发起总数", value: 10 },
{ label: "审核总数", value: 20 },
{ label: "审批总数", value: 50 },
{ label: "处置总数", value: 40 },
{ label: "其他", value: 30 }
],
jjList: [
{ label: "涉稳", value: 10 },
{ label: "涉毒", value: 20 },
{ label: "行政", value: 50 },
{ label: "群体", value: 40 },
{ label: "灾害", value: 40 }
],
zlList: {
list: [
{ label: "下发数", val: 50 },
{ label: "未签收", val: 40 },
{ label: "已签收", val: 10 },
{ label: "超时签收", val: 30 },
{ label: "未反馈", val: 40 },
{ label: "已反馈", val: 40 }
],
topColor:'#1bd6c2', topColor:'#1bd6c2',
colors: ["#28EEBF","#0DBAC5"], colors: ["#28EEBF","#0DBAC5"],
} }
}); });
// 树形菜单数据 onMounted(() => {
const treeData = ref([ init() //初始化数据
{ });
label: "林芝市公安局200",
children: [
{ label: "工布江达县公安局100" }, const init = () =>{
{ label: "工布江达城区派出所10" }, get_xscj_list();
{ label: "某某某派出所10" }, get_xsly_list();
{ label: "某某某公安局100" } get_xslx_list();
] get_xszt_list();
} }
]);
const defaultProps = {
children: "children", // 线索采集统计
label: "label" const get_xscj_list = () =>{
let data = {
ssbmdm:listQuery.value.ssbmdm,
kssj:dateRange.value[0]+' 00:00:00',
jssj:dateRange.value[1]+' 23:59:59',
}
qcckPost(data,'/mosty-gsxt/qbcj/getXscjTjByQbly').then(res=>{
let arr = res || [];
obj.cjList = arr.map(v=>{
return { label:v.zdmc,value:v.count }
})
})
}
// 线索类型统计
const get_xslx_list = () =>{
let data = {
ssbmdm:listQuery.value.ssbmdm,
kssj:dateRange.value[0]+' 00:00:00',
jssj:dateRange.value[1]+' 23:59:59',
}
qcckPost(data,'/mosty-gsxt/qbcj/getXscjTjByXslx').then(res=>{
let arr = res || [];
obj.xxlxList = arr.map(v=>{
return { label:v.zdmc,value:v.count }
})
})
}
// 线索专题统计
const get_xszt_list = () =>{
let data = {
ssbmdm:listQuery.value.ssbmdm,
kssj:dateRange.value[0]+' 00:00:00',
jssj:dateRange.value[1]+' 23:59:59',
}
qcckPost(data,'/mosty-gsxt/qbcj/getXscjTjBySszt').then(res=>{
let arr = res || [];
obj.xxztList = arr.map(v=>{
return { label:v.zdmc,value:v.count }
})
})
}
// 线索来源统计
const get_xsly_list = () =>{
let data = {
ssbmdm:listQuery.value.ssbmdm,
kssj:dateRange.value[0]+' 00:00:00',
jssj:dateRange.value[1]+' 23:59:59',
}
qcckPost(data,'/mosty-gsxt/qbcj/getXscjTjByQbly').then(res=>{
let arr = res || [];
obj.xslyList.list = arr.map(v=>{
return { label:v.zdmc,value:v.count }
})
})
}
const changeRadio = (val) =>{
switch(val){
case 0: //日
dateRange.value = [timeValidate(),timeValidate()]
break;
case 1: //月
dateRange.value = timeSlotChange('本月')
break;
case 2: //季度
dateRange.value = timeSlotChange('本季度')
break;
case 3: //年
dateRange.value = timeSlotChange('本年')
break;
}
}
const handleDateChange = (val) => {
radio.value = '';
if(val[0] == timeSlotChange('天')[0] && val[1] == timeSlotChange('天')[1]) radio.value = 0;
if(val[0] == timeSlotChange('本月')[0] && val[1] == timeSlotChange('本月')[1]) radio.value = 1;
if(val[0] == timeSlotChange('本季度')[0] && val[1] == timeSlotChange('本季度')[1]) radio.value = 2;
if(val[0] == timeSlotChange('本年')[0] && val[1] == timeSlotChange('本年')[1]) radio.value = 3;
}; };
// 日期范围 // 重置
const dateRange = ref([]); const handleRest = () => {
radio.value = 0;
// 事件处理函数 dateRange.value = [timeValidate(),timeValidate()];
const handleNodeClick = (data) => { init();
console.log(data);
}; };
const handleDateChange = () => {
// 处理日期变化
};
const handleExport = () => {
// 处理导出
};
onMounted(() => {});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -193,7 +216,7 @@ onMounted(() => {});
height: 100%; height: 100%;
.left-menu { .left-menu {
width: 280px; width: 350px;
padding: 20px; padding: 20px;
margin-top: 20px; margin-top: 20px;
border-radius: 4px; border-radius: 4px;