|
|
@@ -33,10 +33,10 @@
|
|
|
</el-card>
|
|
|
<el-card shadow="never">
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :xs="24" :sm="12" :md="18" :lg="18" :xl="18">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
|
|
<v-chart class="chart" :option="option" :loading="state.loading" autoresize />
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
|
<ProTable
|
|
|
ref="proTableRef"
|
|
|
:columns="columns"
|
|
|
@@ -59,7 +59,6 @@
|
|
|
<script setup lang="tsx" name="statisticsOrderTimeSource">
|
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
|
import { FormInstance } from 'element-plus';
|
|
|
-import { callList, callPeriodBase } from '@/api/statistics/call';
|
|
|
import { defaultDate, shortcuts } from '@/utils/constants';
|
|
|
import Other from '@/utils/other';
|
|
|
import { orderSource, orderSourceExport } from '@/api/statistics/order';
|
|
|
@@ -69,9 +68,112 @@ import { useRouter } from 'vue-router';
|
|
|
const proTableRef = ref<RefType>(); // 表格ref
|
|
|
// 表格配置项
|
|
|
const columns = ref<any[]>([
|
|
|
- { prop: 'source', label: '时间段', align: 'center' },
|
|
|
- { prop: 'num', label: '数量', align: 'center' },
|
|
|
- { prop: 'rateText', label: '占比', align: 'center' },
|
|
|
+ { prop: 'time', label: '时间段', align: 'center', minWidth: 100, fixed: 'left' },
|
|
|
+ {
|
|
|
+ prop: 'subtotal',
|
|
|
+ label: '小计',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'phone',
|
|
|
+ label: '电话',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'web',
|
|
|
+ label: '因特网',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'rests',
|
|
|
+ label: '其他',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'created',
|
|
|
+ label: '自建',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'weChat',
|
|
|
+ label: '微信',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'app',
|
|
|
+ label: 'APP',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'wisdomYB',
|
|
|
+ label: '智慧宜宾',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'platform',
|
|
|
+ label: '综治平台',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'platform12328',
|
|
|
+ label: '省12328平台',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'mayorAndNetizens',
|
|
|
+ label: '市长和网民',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'mediaYB',
|
|
|
+ label: '宜宾融媒体',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'platform12345',
|
|
|
+ label: '省12345平台',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'interaction',
|
|
|
+ label: '省政民互动',
|
|
|
+ minWidth: 120,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'serviceYB',
|
|
|
+ label: '宜办事',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'cityTransfer',
|
|
|
+ label: '市州互转',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'platform110',
|
|
|
+ label: '宜宾110平台',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'noService',
|
|
|
+ label: '办不成事反映窗口',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'iyb',
|
|
|
+ label: 'i宜宾',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
]);
|
|
|
// 定义变量内容
|
|
|
const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
@@ -106,22 +208,7 @@ const queryList = () => {
|
|
|
Reflect.deleteProperty(request, 'crTime');
|
|
|
orderSource(request)
|
|
|
.then((res: any) => {
|
|
|
- state.tableData = res.result;
|
|
|
- const legendData = state.tableData
|
|
|
- .map((item: any) => {
|
|
|
- return item.source;
|
|
|
- })
|
|
|
- .filter((item: any) => item !== '合计');
|
|
|
- const dataTable = state.tableData
|
|
|
- .map((item: any) => {
|
|
|
- return {
|
|
|
- name: item.source,
|
|
|
- value: item.num,
|
|
|
- ...item,
|
|
|
- };
|
|
|
- })
|
|
|
- .filter((item: any) => item.name !== '合计');
|
|
|
- setOption(legendData, dataTable);
|
|
|
+ setOption([], []);
|
|
|
state.loading = false;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
@@ -175,9 +262,9 @@ const setOption = (legendData: string[], data: any) => {
|
|
|
],
|
|
|
},
|
|
|
grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
+ left: '0',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '0%',
|
|
|
top: '20%',
|
|
|
containLabel: true,
|
|
|
},
|
|
|
@@ -395,7 +482,7 @@ const setOption = (legendData: string[], data: any) => {
|
|
|
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
|
|
|
},
|
|
|
{
|
|
|
- name: '统计',
|
|
|
+ name: '合计',
|
|
|
type: 'bar',
|
|
|
stack: 'total',
|
|
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //默认数据
|
|
|
@@ -414,20 +501,8 @@ const setOption = (legendData: string[], data: any) => {
|
|
|
],
|
|
|
animationEasing: 'elasticOut',
|
|
|
animationDuration: 2000,
|
|
|
- // animationDelayUpdate: function (idx) {
|
|
|
- // return idx * 50 + 1000;
|
|
|
- // }
|
|
|
};
|
|
|
};
|
|
|
-// 获取基础信息
|
|
|
-const getBaseInfo = async () => {
|
|
|
- try {
|
|
|
- const { result } = await callPeriodBase();
|
|
|
- state.callForwardingSource = result.callForwardingSource ?? [];
|
|
|
- } catch (e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
-};
|
|
|
// 表格导出
|
|
|
const exportTable = (val: any, isExportAll = false) => {
|
|
|
let request = Other.deepClone(state.queryParams);
|
|
|
@@ -463,7 +538,6 @@ const onDetail = () => {
|
|
|
});
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
- getBaseInfo();
|
|
|
queryList();
|
|
|
});
|
|
|
</script>
|
zhangchong