You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1118 lines
32 KiB
1118 lines
32 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header/> |
|
<main> |
|
<el-row :gutter="16"> |
|
<el-col :span="6"> |
|
<datav-card title="调查满意度"> |
|
<el-container> |
|
<el-header> |
|
<el-row class="mb-32"> |
|
<el-col :span="11"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ |
|
dcmyd.length > 0 && dcmyd[1] && dcmyd[1].FinalRP !== undefined ? dcmyd[1].FinalRP : '0' |
|
}} |
|
</div> |
|
<div class="descriptions_label"> |
|
上期满意度 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="11"> |
|
<div class="descriptions_cell text-center height-118"> |
|
<div class="descriptions_content yellow"> |
|
{{ |
|
dcmyd.length > 0 && dcmyd[0] && dcmyd[0].FinalRP !== undefined ? dcmyd[0].FinalRP : '0' |
|
}} |
|
</div> |
|
<div class="descriptions_label "> |
|
当前调查满意度 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
</el-header> |
|
<el-main style="height: 165px"> |
|
<v-charts :option="option1" autoresize/> |
|
</el-main> |
|
</el-container> |
|
</datav-card> |
|
|
|
<datav-card title="单位满意率"> |
|
<el-container> |
|
<el-main> |
|
<div style="background-color:#04144E; "> |
|
<!-- 县市考评--> |
|
<el-table |
|
:data="tableData2" |
|
height="575" |
|
:style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px' }" |
|
:header-cell-style="headerCellStyle" |
|
:row-style="tableRowStyleTableData2" |
|
:show-summary='false' |
|
> |
|
<el-table-column prop="OrganizeName" label="单位名称" /> |
|
<el-table-column prop="FinalRP" label="滿意度" width="80px"/> |
|
<el-table-column prop="TBRp" label="上期满意度" width="80px"/> |
|
<el-table-column prop="TBRpts" label="同比上期" width="80px"> |
|
<template v-slot="scope"> |
|
<span :style="getCellStyle(scope.row.TBRpts)" style="font-size: 15px">{{ scope.row.TBRpts }}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-main> |
|
</el-container> |
|
</datav-card> |
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
<div class="datav-col" style="margin-top: 10px"> |
|
<el-row justify="center" v-if="isSelectVisible" :gutter="20" class="mt-16" @click="toggleSelect"> |
|
<p class="tjzq"> |
|
统计周期：<span>{{yearValue}}</span><span>{{monthValue}} </span> <span>{{orgValue}}</span><span>{{taskValue}}</span> |
|
</p> |
|
</el-row> |
|
</div> |
|
<el-row justify="center" :gutter="20" style="margin-bottom: 10px" class="mt-16"> |
|
<el-col :span="4"> |
|
|
|
<el-select v-if="!isSelectVisible" v-model="selectYear" placeholder="请选择" @change="handleYearChange"> |
|
<el-option |
|
v-for="item in years" |
|
:key="item.ID" |
|
:label="item.PeriodName" |
|
:value="item.ID"> |
|
</el-option> |
|
</el-select> |
|
</el-col> |
|
<el-col :span="4"> |
|
|
|
<el-select v-if="!isSelectVisible" v-model="selectMonth" placeholder="请选择" @change="handleMonthChange"> |
|
<el-option |
|
v-for="item in months" |
|
:key="item.ID" |
|
:label="item.SonPeriodName" |
|
:value="item.ID"> |
|
</el-option> |
|
</el-select> |
|
</el-col> |
|
<el-col :span="6"> |
|
|
|
<el-tree-select |
|
v-if="!isSelectVisible" |
|
v-model="selectOrg" |
|
:data="org" |
|
check-strictly |
|
:props="treeProps" |
|
:expand-on-click-node="false" |
|
node-key="id" |
|
:style="{ fontSize: '12px', }" |
|
@change="handleOrgChange" |
|
/> |
|
</el-col> |
|
<el-col :span="4"> |
|
|
|
|
|
<el-select v-if="!isSelectVisible" v-model="task" placeholder="请选择" @change="handleTaskChange"> |
|
<el-option |
|
v-for="item in content" |
|
:key="item.ID" |
|
:label="item.SetName" |
|
:value="item.ID"> |
|
</el-option> |
|
</el-select> |
|
</el-col> |
|
</el-row> |
|
<div class="flex gap-42"> |
|
<datav-statistic |
|
:value="reviewOk[0].dczl" |
|
title="调查总量" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="reviewOk[0].State3 " |
|
title="有效回复" |
|
style="width: 20%" |
|
|
|
/> |
|
<datav-statistic |
|
:value="Number(reviewOk[0].mys) || 0" |
|
title="满意" |
|
style="width: 20%" |
|
@click="open('/query?open=12337')" |
|
/> |
|
<datav-statistic |
|
:value="Number(reviewOk[0].jbmys) || 0" |
|
title="基本满意" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="Number(reviewOk[0].bmys) || 0 " |
|
title="不满意数" |
|
style="width: 20%" |
|
/> |
|
|
|
|
|
</div> |
|
<v-charts |
|
style="height: 450px" |
|
:option="option" |
|
autoresize |
|
@click="handleChartClick" |
|
class="map-option" |
|
/> |
|
<datav-card title="不满意样本趋势" sub-title="不满意样本" > |
|
<div style="height: 300px"> |
|
<v-charts |
|
:option="option2" |
|
autoresize |
|
/> |
|
</div> |
|
</datav-card> |
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
<datav-card title="项目满意率"> |
|
<div style="height: 350px"> |
|
<el-table |
|
:highlight-current-row="false" |
|
:highlight-hover-row='false' |
|
:data="tableData" |
|
height="350" |
|
:summary-cell-style="summaryCellStyle" |
|
:summary-method="getSummaries" |
|
:style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px' }" |
|
:header-cell-style="headerCellStyle" |
|
:row-style="tableRowStyle" |
|
:show-summary='true' |
|
> |
|
<el-table-column prop="Name" label="单项业务" width="77px"/> |
|
<el-table-column prop="sdcl" label="有效数" width="77px"/> |
|
<el-table-column prop="BasicallySatisfiedNum" label="基本满意数" width="77px"/> |
|
<el-table-column prop="sbmys" label="不满意数" width="77px"/> |
|
<el-table-column prop="smyl" label="满意率" width="77px"/> |
|
<el-table-column prop="smyltb" label="同比" width="77px"> |
|
<template v-slot="scope"> |
|
<span :style="getCellStyle(scope.row.smyltb)" style="font-size: 15px">{{ scope.row.smyltb }}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</datav-card> |
|
<div style="background-color:#04144E; "> |
|
<datav-card title="项目下发情况"> |
|
<div style="height: 465px"> |
|
<v-charts |
|
:option="option4" |
|
autoresize |
|
ref="xmxfqk" |
|
/> |
|
</div> |
|
</datav-card> |
|
|
|
</div> |
|
</el-col> |
|
|
|
</el-row> |
|
</main> |
|
</div> |
|
</el-scrollbar> |
|
|
|
</template> |
|
|
|
|
|
<script setup> |
|
import changshaMap from "@/assets/data/changsha.json"; |
|
import * as echarts from "echarts/core"; |
|
import { mapOrgNameMapping } from "@/enums/JwpyorgMapping.js"; |
|
|
|
import vCharts from "vue-echarts"; |
|
import { |
|
GetBMYYBQS, |
|
GetCustomOffLineSonPeriodSet, |
|
GetDCQK, |
|
GetDITU, |
|
GetDXFX, |
|
GetGLFW, |
|
GetMyPeriod, |
|
GetOffLineStatisticsSetList, |
|
GetRCSQQK, |
|
GetZHMYLPM, |
|
GetZRSJXF, |
|
qx_get |
|
} from "@/api/screen/jwpy.ts"; |
|
import moment from "moment/moment"; |
|
import {selectDistribution} from "@/api/datav"; |
|
|
|
|
|
// region 变量 |
|
const reviewOk = ref([{}]); // 调查情况 |
|
const dcmyd = ref([]); // 调查滿意度 |
|
const bmyybqs = ref([]); // 不满意样本趋势 |
|
const dxfx = ref([]); // 单项分析 |
|
const tempMap = ref([]) // 接收地图数据 |
|
const mapDataList = ref([]); // 解析后的地图数据 |
|
const years = ref([{}]) // 年份列表 |
|
const selectYear = ref(); // 选择的年份 |
|
const tempMonths = ref([{}]) // 暂储细节后的全部返回的月份 注意不能随意改变 |
|
const months = ref([{}]) // 对应年份的月份 |
|
const selectMonth = ref(); // 选择的月份 |
|
const org = ref([]) // 组织机构 |
|
const selectOrg = ref() // 选择的组织机构 |
|
const task = ref() // 选择的任务id |
|
const content = ref([{}]) // 任务id的列表 |
|
|
|
const yearValue = ref() |
|
const orgValue =ref() |
|
const taskValue =ref() |
|
const monthValue= ref() |
|
|
|
|
|
const tableData = ref([]) // 业务满意率 |
|
const tableData1 = ref([]) // 综合满意度排名 |
|
const tableData2 = ref([]) |
|
const tableData3 = ref([]) |
|
const tableData4 = ref([]) // 单项调查情况 |
|
// endregion |
|
// 树形下拉框的映射字段 |
|
const treeProps = { |
|
label: 'text', |
|
children: 'children' |
|
}; |
|
const time = ref([ |
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
moment().format("YYYY-MM-DD"), |
|
]); |
|
const getDistributionFun = async()=>{ |
|
console.log('---------') |
|
const res = await selectDistribution(time.value); |
|
option4.value.series[0].data=res.total; |
|
option4.value.series[1].data=res.checkStatus; |
|
// option4.value.series[2].data=res.checkStatus; |
|
option4.value.yAxis.data=res.name; |
|
console.log('option4',option4.value) |
|
|
|
} |
|
|
|
|
|
|
|
// 监听年份变化，更新月份数据 |
|
watch(selectYear, (newYearID) => { |
|
if (newYearID) { |
|
const temp = years.value.filter(item => item.ID === selectYear.value) |
|
if (temp.length > 0 && temp[0].PeriodName.includes("半")) { |
|
months.value = tempMonths.value.filter(item => item.PeriodID === newYearID); |
|
months.value.unshift({SonPeriodName: '半年度', ID: '-1'}); |
|
} else { |
|
months.value = tempMonths.value.filter(item => item.PeriodID === newYearID); |
|
months.value.unshift({SonPeriodName: '全年', ID: '-1'}); |
|
} |
|
selectMonth.value = months.value[0].ID; |
|
} else { |
|
months.value = []; // 清空月份数据 |
|
} |
|
}); |
|
let isSelectVisible = ref(true) |
|
const toggleSelect=()=> { |
|
isSelectVisible.value = !isSelectVisible.value; // 切换el-select的显示状态 |
|
|
|
}; |
|
|
|
|
|
// region 下拉框 |
|
const handleYearChange = (checkedYear) => { |
|
toggleSelect() |
|
|
|
yearValue.value= years.value.find(s=>s.ID == checkedYear).PeriodName; |
|
console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) |
|
getData(); |
|
|
|
} |
|
const handleMonthChange = (checkedMonth) => { |
|
toggleSelect() |
|
monthValue.value= months.value.find(s=>s.ID === checkedMonth).SonPeriodName; |
|
console.log(monthValue.value) |
|
console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) |
|
getData(); |
|
} |
|
// 组织机构选项改变时 |
|
const handleOrgChange = async (checkedOrg) => { |
|
toggleSelect() |
|
try { |
|
// 使用 await 等待异步操作完成 因为要等返回选中第一个 task 之后才能发送正确的请求 |
|
content.value = await GetOffLineStatisticsSetList(selectOrg.value); |
|
task.value = content.value[0].ID; |
|
taskValue.value= content.value[0].text; |
|
// 找到对应单位在地图上的位置 |
|
const targetName = mapDataList.value.find(item => item.value === checkedOrg).name; |
|
const chart = echarts.getInstanceByDom(document.querySelector('.map-option')); |
|
if (chart) { |
|
chart.dispatchAction({type: 'highlight', name: targetName,}); |
|
} else { |
|
|
|
} |
|
console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) |
|
} catch (error) { |
|
console.error("Error fetching data:", error); |
|
} |
|
await getData(); |
|
}; |
|
// 任务选项改变时 |
|
const handleTaskChange = (checkedTask) => { |
|
toggleSelect() |
|
taskValue.value= task.value.find(s=>s.ID === checkedTask).SetName; |
|
console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) |
|
getData(); |
|
} |
|
// 点击地图 |
|
const handleChartClick = async (params) => { |
|
if (params.componentType === 'series') { |
|
const targetName = params.name === '长沙县' ? '长沙县公安局' : params.name.substring(0, 2); |
|
const clickedData = mapDataList.value.find(item => item.name.includes(targetName)); |
|
if (clickedData) { |
|
selectOrg.value = clickedData.value; |
|
console.log(`地区：${params.name} id：${selectOrg.value} 年：${selectYear.value} 月：${selectMonth.value}`); |
|
try { |
|
content.value = await GetOffLineStatisticsSetList(selectOrg.value); |
|
task.value = content.value[0].ID; |
|
} catch (error) { |
|
console.error("Error fetching data:", error); |
|
} |
|
} else { |
|
console.error("没有找到匹配的数据项"); |
|
} |
|
} |
|
await getData(); |
|
// 覆盖 综合滿意度排名 右下角 |
|
// let tempId = setTimeout(discovery, 300); |
|
}; |
|
// endregion |
|
|
|
|
|
// 覆盖满意度排名右下角 |
|
const discovery = async () => { |
|
// 综合满意度排名 |
|
await GetZHMYLPM(selectYear.value, selectMonth.value, selectOrg.value, task.value, selectOrg.value === '4301' ? 1 : 2).then((res) => { |
|
tableData1.value = res[0].lstCity |
|
let temp = res[0].lstSheng; |
|
// 返回数据数组是连着的 这里需要分组 |
|
// const group2 = temp.filter(item => item.SetName === "(省)县市考评"); |
|
const group3 = temp.filter(item => item.SetName === "(省)派出所"); |
|
// tableData2.value = group2 |
|
tableData3.value = group3 |
|
}); |
|
|
|
} |
|
|
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
const option = ref({ |
|
geo: { |
|
map: "changsha", |
|
}, |
|
visualMap: { |
|
type: "piecewise", |
|
bottom: 10, |
|
pieces: [ |
|
{gte: 0, lte: 200, label: "满意度前三", color: "#4987F6"}, |
|
{gte: 200, lte: 400, label: "满意度一般", color: "#F6A149"}, |
|
{gte: 400, label: "满意度较差", color: "#D34343"}, |
|
], |
|
right: 10, // 右边距 |
|
realtime: false, |
|
orient: "horizontal", // 水平显示 |
|
textStyle: { |
|
color: "#fff", // 文字颜色 |
|
}, |
|
calculable: true, |
|
inRange: { |
|
color: ["#4987F6", "#F6A149", "#D34343"], |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "长沙", |
|
type: "map", |
|
map: "changsha", |
|
hoverAnimation: true, |
|
label: { |
|
show: true, |
|
color: "white", |
|
}, |
|
itemStyle: { |
|
normal: { |
|
areaColor: "#02215E", |
|
borderColor: "#1773c3", |
|
}, |
|
}, |
|
emphasis: { |
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
borderWidth: 4 // 高亮时边框宽度 |
|
}, |
|
data: [] |
|
} |
|
], |
|
}) |
|
const option1 = ref({ |
|
xAxis: { |
|
type: "category", |
|
boundaryGap: true, |
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
|
axisLabel: { |
|
interval: 0, |
|
}, |
|
axisTick: { |
|
show: false // 隐藏x轴的刻度 |
|
} |
|
}, |
|
yAxis: { |
|
type: "value", |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#193775", |
|
}, |
|
}, |
|
axisLabel: { |
|
margin: 20, |
|
}, |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'line', |
|
label: { |
|
backgroundColor: '#6a7985' |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
type: "line", |
|
smooth: true, |
|
label: { |
|
show: false |
|
}, |
|
lineStyle: { |
|
color: "#FFDB31", |
|
width: 4, |
|
}, |
|
areaStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
{ |
|
offset: 0, |
|
color: "rgba(255,218,51,0.25)", // 渐变起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(255,219,49,0)", // 渐变结束颜色 |
|
}, |
|
]), |
|
}, |
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // 直接添加数据 |
|
}, |
|
], |
|
grid: {left: '0%', right: '0%', top: '5%', bottom: '0%', containLabel: true}, |
|
}) |
|
const option2 = ref({ |
|
xAxis: { |
|
type: "category", |
|
boundaryGap: true, |
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',], |
|
axisTick: { |
|
show: false // 隐藏x轴的刻度 |
|
}, |
|
axisLabel: { |
|
interval: 0, |
|
}, |
|
}, |
|
yAxis: { |
|
type: "value", |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#193775", |
|
}, |
|
}, |
|
axisLabel: { |
|
margin: 20, |
|
}, |
|
|
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'line', |
|
label: { |
|
backgroundColor: '#6a7985' |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
type: "line", |
|
smooth: true, |
|
label: { |
|
show: false |
|
}, |
|
lineStyle: { |
|
color: "#6FDBA0", |
|
width: 4, |
|
}, |
|
areaStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: 'rgba(109, 221, 159, 0.47)' |
|
}, {offset: 1, color: 'rgba(109, 221, 159, 0)'}]) |
|
}, |
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // 直接添加数据 |
|
}, |
|
], |
|
grid: {left: '5%', right: '5%', top: '10%', bottom: '20%', containLabel: true}, |
|
}) |
|
const option3 = ref({ |
|
tooltip: {}, |
|
legend: { |
|
data: ['本期', '上一期', '去年同期'], |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
}, |
|
|
|
xAxis: { |
|
type: 'category', |
|
data: [], |
|
axisLabel: { |
|
interval: 0, // 隔一个显示一个标签 |
|
fontSize: 5, |
|
color: '#fff', |
|
}, |
|
|
|
}, |
|
yAxis: { |
|
type: 'value', |
|
axisLabel: { |
|
margin: 10, |
|
}, |
|
splitLine: { |
|
show: true, lineStyle: { |
|
color: ['#193775'], // 设置x轴分割线的颜色 |
|
width: 1, // 线条宽度 |
|
type: 'solid' // 线条样式，可以是 'solid', 'dashed', 'dotted' |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
name: '本期', |
|
type: 'bar', |
|
data: [], |
|
itemStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: 'rgba(40,230,255,0.63)' |
|
}, {offset: 1, color: 'rgba(40,230,255,0)'}]) |
|
}, |
|
|
|
|
|
}, |
|
{ |
|
name: '上一期', |
|
type: 'bar', |
|
data: [], |
|
itemStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{offset: 0, color: 'rgba(255,218,51,0.52)'}, |
|
{offset: 1, color: 'rgba(255,219,49,0)'}]) |
|
} |
|
}, |
|
{ |
|
name: '去年同期', |
|
type: 'line', |
|
data: [], |
|
itemStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: '#6FDBA0' |
|
}, {offset: 1, color: '#6FDBA0'}]) |
|
} |
|
} |
|
], |
|
grid: {left: '8%', right: '0%', top: '10%', bottom: '10%'}, |
|
}); |
|
const option4 = ref({ |
|
tooltip: {}, |
|
legend: { |
|
data: ['下发数', '查实数'], |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
}, |
|
|
|
xAxis: { |
|
type: 'value', |
|
axisLabel: { |
|
margin: 10, |
|
}, |
|
}, |
|
yAxis: { |
|
type: 'category', |
|
data:[], |
|
|
|
axisLabel: { |
|
fontSize:10, |
|
color: '#fff', |
|
}, |
|
|
|
splitLine: { |
|
show: true, lineStyle: { |
|
color: ['#193775'], // 设置x轴分割线的颜色 |
|
width: 1, // 线条宽度 |
|
type: 'solid' // 线条样式，可以是 'solid', 'dashed', 'dotted' |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
name: '下发数', |
|
type: 'bar', |
|
data: [], |
|
label: { |
|
show: true, |
|
position: 'right', |
|
color:'#fff' |
|
}, |
|
itemStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: 'rgba(40,230,255,0.63)' |
|
}, {offset: 1, color: 'rgba(40,230,255,0)'}]) |
|
}, |
|
}, |
|
{ |
|
name: '查实数', |
|
type: 'bar', |
|
data: [], |
|
label: { |
|
show: true, |
|
position: 'right', |
|
color:'#fff' |
|
}, |
|
itemStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{offset: 0, color: 'rgba(255,218,51,0.52)'}, |
|
{offset: 1, color: 'rgba(255,219,49,0)'}]) |
|
} |
|
}, |
|
// { |
|
// name: '办结数', |
|
// type: 'bar', |
|
// data: [], |
|
// label: { |
|
// show: true, |
|
// position: 'right', |
|
// color:'#fff' |
|
// }, |
|
// itemStyle: { |
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
// offset: 0, |
|
// color: '#6FDBA0' |
|
// }, {offset: 1, color: '#6FDBA0'}]) |
|
// } |
|
// } |
|
], |
|
grid: {left: '17%', right: '0%', top: '10%', bottom: '10%'}, |
|
}); |
|
|
|
|
|
|
|
// region 初始化 |
|
onMounted(async () => { |
|
|
|
console.log('--------------') |
|
await getDistributionFun(); |
|
console.log('-----end-------') |
|
// 年 |
|
const resYears = await GetMyPeriod(); |
|
years.value = resYears.map(item => ({ |
|
ID: item.ID, |
|
PeriodName: item.PeriodName |
|
})); |
|
|
|
if (years.value.length > 0) { |
|
selectYear.value = years.value[0].ID; // 选择第一个年份 |
|
|
|
yearValue.value = years.value[0].PeriodName; |
|
console.log('yearValue',years.value) |
|
} |
|
|
|
// 月 |
|
const resMonths = await GetCustomOffLineSonPeriodSet(); |
|
tempMonths.value = resMonths.map(item => ({ |
|
ID: item.ID, |
|
SonPeriodName: item.SonPeriodName, |
|
PeriodID: item.PeriodID, |
|
})); |
|
// 从返回的全部月份中筛选出对应年份的月份，添加一个 ‘全年’ 或者 ‘半年度’ value 为 -1 |
|
if (tempMonths.value.length > 0) { |
|
const temp = years.value.filter(item => item.ID === selectYear.value) |
|
if (temp.length > 0 && temp[0].PeriodName.includes("半")) { |
|
months.value = tempMonths.value.filter(item => item.PeriodID === selectYear.value); |
|
months.value.unshift({SonPeriodName: '半年度', ID: '-1'}); |
|
} else { |
|
months.value = tempMonths.value.filter(item => item.PeriodID === selectYear.value); |
|
months.value.unshift({SonPeriodName: '全年', ID: '-1'}); |
|
} |
|
selectMonth.value = months.value[0].ID; |
|
monthValue.value = months.value[0].SonPeriodName; |
|
console.log('months.value',months.value) |
|
} |
|
|
|
// 组织机构 |
|
const resOrgs = await qx_get(); |
|
org.value = resOrgs; |
|
if (org.value.length > 0) { |
|
selectOrg.value = org.value[0].id; |
|
console.log('org.value',org.value); |
|
orgValue.value = org.value[0].text; |
|
} |
|
|
|
const resTasks = await GetOffLineStatisticsSetList(selectOrg.value); |
|
content.value = resTasks; |
|
if (content.value.length > 0) { |
|
task.value = content.value[0].ID; |
|
console.log('content.value', content.value) |
|
taskValue.value = content.value[0].SetName; |
|
} |
|
// 获取数据 |
|
await getData(); |
|
}); |
|
|
|
async function getData() { |
|
|
|
|
|
// 调查情况 |
|
GetDCQK(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => { |
|
reviewOk.value = res |
|
console.log('调查情况',reviewOk.value) |
|
}); |
|
|
|
// 调查满意度 |
|
GetGLFW(selectYear.value, selectOrg.value, task.value).then((res) => { |
|
dcmyd.value = res |
|
console.log('-----调查满意度----',dcmyd.value) |
|
option1.value.xAxis.data = dcmyd.value[0].lstson.slice(0,new Date().getMonth()+1).map(item => item.SonPeriodName); |
|
option1.value.series[0].data = dcmyd.value[0].lstson.slice(0,new Date().getMonth()+1).map(item => item.FinalRP); |
|
}); |
|
|
|
// 业务满意率 |
|
GetZRSJXF(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => { |
|
let temp = res.lstShen |
|
temp = temp.filter(item => item.Name !== null); |
|
tableData.value = temp |
|
}); |
|
console.log('selectOrg', selectOrg.value) |
|
// 综合满意度排名 |
|
GetZHMYLPM(selectYear.value, selectMonth.value, selectOrg.value, task.value, selectOrg.value === '4301' ? 1 : 2).then((res) => { |
|
tableData1.value = res[0].lstCity |
|
let temp = res[0].lstSheng; |
|
// 返回数据数组是连着的 这里需要分组 |
|
const group2 = temp.filter(item => item.SetName === "(省)县市考评"); |
|
const group3 = temp.filter(item => item.SetName === "(省)区"); |
|
let orgSortArray =[ |
|
'芙蓉','天心','岳麓','开福','雨花','高新','望城','长沙县','浏阳','宁乡' |
|
] |
|
|
|
let groupData =temp.filter(item => item.SetName === "(省)县市考评" || item.SetName === "(省)区"); |
|
groupData = filterAndSortObjectsByName(groupData,orgSortArray) |
|
tableData2.value=groupData; |
|
// tableData2.value = group2 |
|
// tableData3.value = group3 |
|
console.log('综合满意度排名.value', tableData2.value) |
|
GetDITUFun() |
|
}); |
|
|
|
// 不满意样本趋势 |
|
GetBMYYBQS(selectYear.value, selectOrg.value, task.value).then((res) => { |
|
|
|
if(res){ |
|
bmyybqs.value = res; |
|
option2.value.xAxis.data = bmyybqs.value.map(item => item.SonPeriodName); |
|
option2.value.series[0].data = bmyybqs.value.map(item => item.QACount); |
|
} |
|
|
|
console.log('不满意样本趋势.value', bmyybqs.value) |
|
}); |
|
|
|
// 单项分析 |
|
GetDXFX(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => { |
|
dxfx.value = res; |
|
option3.value.xAxis.data = dxfx.value[0].lstson.map(item => item.MasterName); |
|
option3.value.series[0].data = dxfx.value[0].lstson.map(item => item.FinalRP); // 本周期 |
|
option3.value.series[1].data = dxfx.value[1].lstson.map(item => item.FinalRP); // 上一期 |
|
option3.value.series[2].data = dxfx.value[2].lstson.map(item => item.FinalRP); // 去年同期 |
|
console.log('单项分析.value', dxfx.value) |
|
}); |
|
|
|
// 单项调查情况 |
|
GetRCSQQK(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => { |
|
let text = res |
|
text = text.filter(item => item.Name !== null) |
|
tableData4.value = text |
|
}); |
|
|
|
// 地图数据 |
|
|
|
|
|
getDistributionFun(); |
|
|
|
} |
|
function GetDITUFun(){ |
|
GetDITU(selectYear.value).then((res) => { |
|
tempMap.value = res |
|
let valData = mapOrgNameMapping(tableData2.value,"FinalRP") |
|
console.log('valData',valData) |
|
let listData = valData.sort((a, b) => b["value"]- a["value"]); |
|
console.log('listData',listData) |
|
option.value.visualMap.pieces=[ |
|
{min: listData[2].value, max: 100, label: "满意度前三", color: "#4987F6"}, |
|
{min: listData[6].value, max: listData[3].value, label: "满意度中等", color: "#F6A149"}, |
|
{max: listData[6].value, label: "满意度较差", color: "#D34343"}, |
|
] |
|
option.value.series[0].data = listData; |
|
mapDataList.value = tempMap.value.map(org => { |
|
return {name: org.OrganizeName, value: org.OrganizeID}; |
|
}) |
|
console.log('option.value',option.value) |
|
}); |
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
* 过滤并排序函数 |
|
* @param objects 目标集合 |
|
* @param keywords 关键字集合 |
|
* */ |
|
const filterAndSortObjectsByName = (objects, keywords) => { |
|
// 过滤出包含关键字的名字的对象 |
|
const filteredObjects = objects.filter(obj => { |
|
return keywords.some(keyword => obj.OrganizeName.includes(keyword)); |
|
}); |
|
// 定义一个映射对象，用于存储关键字和对应的索引 |
|
const keywordIndexMap = {}; |
|
keywords.forEach((keyword, index) => { |
|
keywordIndexMap[keyword] = index; |
|
}); |
|
// 自定义排序函数 |
|
const sortFunction = (a, b) => { |
|
const keywordA = keywords.find(keyword => a.OrganizeName.includes(keyword)); |
|
const keywordB = keywords.find(keyword => b.OrganizeName.includes(keyword)); |
|
if (!keywordA) return 1; |
|
if (!keywordB) return -1; |
|
return keywordIndexMap[keywordA] - keywordIndexMap[keywordB]; |
|
}; |
|
// 对过滤后的对象数组进行排序 |
|
return filteredObjects.sort(sortFunction); |
|
}; |
|
|
|
// endregion |
|
|
|
// region 数据 |
|
// endregion |
|
|
|
|
|
// region 表格样式 |
|
const fontSize = ref(11) |
|
const headerCellStyle = ref({ |
|
fontSize: '11px', /* 设置表头字体大小 */ |
|
color: '#24D2EE', /* 设置表头字体颜色 */ |
|
backgroundColor: '#04144E', /* 设置表头背景颜色 */ |
|
height: '0px', /* 设置表头高度 */ |
|
padding: '0 0 0 0', /* 设置表头内边距 */ |
|
lineHeight: '0px', |
|
}); |
|
const tableRowStyle = (row) => { |
|
return { |
|
backgroundColor: '#04144E', |
|
color: "#FFFFFF", |
|
height: '40px', |
|
}; |
|
}; |
|
const tableRowStyleTableData1 = (row) => { |
|
return { |
|
backgroundColor: '#04144E', |
|
color: "#FFFFFF", |
|
height: '50px', |
|
}; |
|
}; |
|
const tableRowStyleTableData2 = () => { |
|
return { |
|
backgroundColor: '#04144E', |
|
color: "#FFFFFF", |
|
height: '50px', |
|
}; |
|
} |
|
// 自定义总合行样式 |
|
const summaryCellStyle = () => { |
|
return { |
|
backgroundColor: '#04144E', |
|
color: "#FFFFFF" |
|
}; |
|
}; |
|
// 定义汇总方法 |
|
const getSummaries = (param) => { |
|
const {columns, data} = param; |
|
const sums = []; |
|
columns.forEach((column, index) => { |
|
if (index === 0) { |
|
sums[index] = '总计'; |
|
return; |
|
} |
|
const values = data.map(item => Number(item[column.property])); |
|
if (!values.every(value => isNaN(value))) { |
|
sums[index] = values.reduce((prev, curr) => { |
|
const value = Number(curr); |
|
if (!isNaN(value)) { |
|
return prev + curr; |
|
} else { |
|
return prev; |
|
} |
|
}, 0); |
|
// 小数就2位 不然就随便 |
|
sums[index] = Number.isInteger(sums[index]) ? sums[index] : sums[index].toFixed(2); |
|
} else { |
|
sums[index] = 'N/A'; |
|
} |
|
}); |
|
return sums; |
|
}; |
|
const getCellStyle = (smyltb) => { |
|
if (smyltb > 0) { |
|
return {color: 'green'}; |
|
} else { |
|
return {color: 'red'}; |
|
} |
|
} |
|
// endregion |
|
|
|
</script> |
|
|
|
|
|
<style lang="scss" scoped> |
|
@import "@/style/datav.scss"; |
|
|
|
:deep() { |
|
.el-table__footer-wrapper tfoot td.el-table__cell { |
|
background-color: #09256D; |
|
} |
|
|
|
.el-scrollbar__wrap--hidden-default { |
|
background-color: #03154D; |
|
} |
|
|
|
.el-table .cell { |
|
padding: 0; |
|
text-align: center; |
|
} |
|
|
|
.el-table .el-table__row:hover { |
|
//background-color: transparent !important; |
|
} |
|
|
|
.el-table { |
|
--el-table-row-hover-bg-color: transparent; |
|
--el-table-border-color: #193775; |
|
} |
|
|
|
.el-select__wrapper { |
|
background-color: #1C3472; |
|
//border: 0px solid ; |
|
} |
|
|
|
.el-select__placeholder { |
|
font-weight: 400; |
|
font-size: 14px; |
|
color: #FFFFFF; |
|
} |
|
|
|
.el-select.is-focus { |
|
border-color: red; /* 去掉高亮时的边框颜色 */ |
|
box-shadow: none; /* 去掉高亮时的阴影 */ |
|
} |
|
|
|
} |
|
|
|
.dropdown-container { |
|
position: absolute; |
|
right: 30px; |
|
top: 65px; |
|
} |
|
|
|
.datav-tab-item { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.descriptions_content { |
|
font-size: 18px; |
|
font-weight: 700; |
|
} |
|
|
|
|
|
.margin-top-30 { |
|
margin-top: 30px; |
|
} |
|
|
|
|
|
.height-118 { |
|
height: 118px; |
|
} |
|
|
|
.custom-footer-row { |
|
background-color: #FB3131; |
|
font-weight: bold; |
|
color: #333; |
|
} |
|
|
|
.custom-footer-cell { |
|
text-align: center; |
|
padding: 10px; |
|
} |
|
|
|
|
|
h3 span { |
|
float: right; |
|
|
|
} |
|
|
|
h3 { |
|
line-height: 50px; |
|
margin-top: 10px; |
|
margin-bottom: 0px; |
|
} |
|
|
|
.yellow { |
|
color: #ffd04b; |
|
} |
|
|
|
.tjzq{ |
|
display: block; |
|
|
|
span{ |
|
display: inline-block; |
|
margin: 0px 5px; |
|
} |
|
} |
|
|
|
|
|
</style>
|
|
|