更新代码
This commit is contained in:
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="statistical-analysis">
|
||||
<!-- 左侧树形菜单 -->
|
||||
<div class="left-menu">
|
||||
<!-- 这个部分用的是组件-后期替换 -->
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
default-expand-all
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="right-content">
|
||||
<!-- 顶部筛选 -->
|
||||
<div class="filter-section">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="it.value" v-for="it in timeList" :key="it.value">{{
|
||||
it.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
<el-button type="primary" @click="handleExport">查询</el-button>
|
||||
<el-button type="primary" @click="handleExport">重置</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 统计图表区域 -->
|
||||
<div class="charts-container">
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>报送情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<PieEcharts
|
||||
echartsId="bsqkEpieChart"
|
||||
color="#333"
|
||||
:data="obj.bsqkList"
|
||||
></PieEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>采纳情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<DbarEcharts
|
||||
echartsId="bar3DChart"
|
||||
:data="obj.cnList"
|
||||
></DbarEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>战果情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<ul class="chart mt8">
|
||||
<li v-for="(it, idx) in obj.zgList" :key="idx" class="mb6">
|
||||
<div style="color: #333">{{ it.label }}</div>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
>
|
||||
<span
|
||||
><span style="color: #e37233">{{ it.value }}</span> 个</span
|
||||
>
|
||||
</el-progress>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>奖惩情况</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<lineEcharts
|
||||
color="#333"
|
||||
echartsId="areaChart"
|
||||
:data="obj.jcList"
|
||||
></lineEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
|
||||
import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
|
||||
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const radio = ref("日");
|
||||
const timeList = ref([
|
||||
{ label: "日", value: "0" },
|
||||
{ label: "月", value: "1" },
|
||||
{ label: "季", value: "2" },
|
||||
{ label: "年", value: "3" }
|
||||
]);
|
||||
const obj = reactive({
|
||||
listQuery: {},
|
||||
bsqkList: [
|
||||
{ label: "待上报", value: 18 },
|
||||
{ label: "已上报", value: 20 },
|
||||
{ label: "已流转指令", value: 50 },
|
||||
{ label: "已办结", value: 40 },
|
||||
{ label: "已归档", value: 30 }
|
||||
],
|
||||
//
|
||||
jcList: [
|
||||
{ label: "表彰奖励", value: 10 },
|
||||
{ label: "物质奖励", value: 20 },
|
||||
{ label: "其他奖励", value: 50 },
|
||||
{ label: "责任追究", value: 40 },
|
||||
{ label: "通报批评", value: 40 },
|
||||
{ label: "其他惩罚", value: 30 }
|
||||
],
|
||||
zgList: [
|
||||
{ label: "已处置", value: 10 },
|
||||
{ label: "转指令", value: 20 },
|
||||
{ label: "转协同", value: 50 },
|
||||
{ label: "转督办", value: 40 },
|
||||
{ label: "转移交", value: 40 },
|
||||
{ label: "警种变更", value: 40 }
|
||||
],
|
||||
cnList: {
|
||||
list: [
|
||||
{ label: "已采纳", val: 50 },
|
||||
{ label: "未采纳", val: 40 },
|
||||
{ label: "已合并", val: 10 },
|
||||
{ label: "已流转", val: 30 },
|
||||
{ label: "退回", val: 40 },
|
||||
],
|
||||
topColor:'#1bd6c2',
|
||||
colors: ["#28EEBF","#0DBAC5"],
|
||||
}
|
||||
});
|
||||
|
||||
// 树形菜单数据
|
||||
const treeData = ref([
|
||||
{
|
||||
label: "林芝市公安局（200）",
|
||||
children: [
|
||||
{ label: "工布江达县公安局（100）" },
|
||||
{ label: "工布江达城区派出所（10）" },
|
||||
{ label: "某某某派出所（10）" },
|
||||
{ label: "某某某公安局（100）" }
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "label"
|
||||
};
|
||||
|
||||
// 日期范围
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 事件处理函数
|
||||
const handleNodeClick = (data) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const handleDateChange = () => {
|
||||
// 处理日期变化
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// 处理导出
|
||||
};
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistical-analysis {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.left-menu {
|
||||
width: 280px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
.filter-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.charts-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 50px);
|
||||
.chart-item {
|
||||
width: 49.5%;
|
||||
height: calc(50% - 5px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chart {
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
color: #333;
|
||||
}
|
||||
::v-deep .el-radio__inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .el-progress-bar__innerText {
|
||||
color: #333;
|
||||
margin: 0 -40px;
|
||||
}
|
||||
::v-deep .el-progress.is-exception .el-progress-bar__inner {
|
||||
background: linear-gradient(90deg, #fe5d00 0%, #face35 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user