6 changed files with 1283 additions and 218 deletions
@ -0,0 +1,991 @@ |
|||||||
|
<template> |
||||||
|
<el-scrollbar height="100vh"> |
||||||
|
<div class="wrapper"> |
||||||
|
<datav-header/> |
||||||
|
<main> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<el-row :gutter="16"> |
||||||
|
<el-col :span="6"> |
||||||
|
<datav-card title="调查情况" style="height: 156px"> |
||||||
|
<el-row class="mb-32"> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="descriptions_cell text-center margin-top-30"> |
||||||
|
<div class="descriptions_content"> |
||||||
|
{{ reviewOk[0].dczl }} |
||||||
|
</div> |
||||||
|
<div class="descriptions_label"> |
||||||
|
调查总量 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="descriptions_cell text-center margin-top-30"> |
||||||
|
<div class="descriptions_content"> |
||||||
|
{{ reviewOk[0].State3 }} |
||||||
|
</div> |
||||||
|
<div class="descriptions_label"> |
||||||
|
有效回复 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="descriptions_cell text-center margin-top-30"> |
||||||
|
<div class="descriptions_content"> |
||||||
|
{{ reviewOk[0].mys }} |
||||||
|
</div> |
||||||
|
<div class="descriptions_label"> |
||||||
|
满意 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<div class="descriptions_cell text-center margin-top-30"> |
||||||
|
<div class="descriptions_content"> |
||||||
|
{{ reviewOk[0].jbmys }} |
||||||
|
</div> |
||||||
|
<div class="descriptions_label"> |
||||||
|
基本满意 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4"> |
||||||
|
<div class="descriptions_cell text-center margin-top-30"> |
||||||
|
<div class="descriptions_content yellow"> |
||||||
|
{{ reviewOk[0].bmys }} |
||||||
|
</div> |
||||||
|
<div class="descriptions_label"> |
||||||
|
不满意数 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
</datav-card> |
||||||
|
<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> |
||||||
|
|
||||||
|
|
||||||
|
<div style="background-color:#04144E; "> |
||||||
|
<h3 style="color: white">业务满意率</h3> |
||||||
|
<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)">{{ scope.row.smyltb }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="12"> |
||||||
|
<el-row justify="center" :gutter="20" class="mt-16"> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-select 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-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-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-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> |
||||||
|
|
||||||
|
|
||||||
|
<v-charts |
||||||
|
style="height: 450px" |
||||||
|
:option="option" |
||||||
|
autoresize |
||||||
|
@click="handleChartClick" |
||||||
|
class="map-option" |
||||||
|
/> |
||||||
|
<datav-card title="综合滿意度排名"> |
||||||
|
<div class="common-layout"> |
||||||
|
<el-container> |
||||||
|
|
||||||
|
<el-container> |
||||||
|
<el-header> |
||||||
|
<div style="background-color:#04144E; "> |
||||||
|
<!-- 市州考评--> |
||||||
|
<el-table |
||||||
|
:data="tableData1" |
||||||
|
height="70" |
||||||
|
:style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px' }" |
||||||
|
:header-cell-style="headerCellStyle" |
||||||
|
:row-style="tableRowStyleTableData1" |
||||||
|
:show-summary='false' |
||||||
|
:highlight-current-row='false' |
||||||
|
> |
||||||
|
<el-table-column prop="SetName" label="排名" width="72px"/> |
||||||
|
<el-table-column prop="OrganizeName" label="市州考评" width="129"/> |
||||||
|
<el-table-column prop="FinalRP" label="滿意度" width="75px"/> |
||||||
|
<el-table-column prop="TBRp" label="上期满意度" width="75px"/> |
||||||
|
<el-table-column prop="TBRpts" label="同比上期" width="75px"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-header> |
||||||
|
<el-main> |
||||||
|
<div style="background-color:#04144E; "> |
||||||
|
<!-- 县市考评--> |
||||||
|
<el-table |
||||||
|
:data="tableData2" |
||||||
|
height="215" |
||||||
|
:style="{ width: '100%', marginTop: '70px', fontSize: fontSize + 'px' }" |
||||||
|
:header-cell-style="headerCellStyle" |
||||||
|
:row-style="tableRowStyleTableData2" |
||||||
|
:show-summary='false' |
||||||
|
> |
||||||
|
<el-table-column prop="MydRanking" label="排名" width="55px"/> |
||||||
|
<el-table-column prop="OrganizeName" label="县市考评"/> |
||||||
|
<el-table-column prop="FinalRP" label="滿意度" width="66px"/> |
||||||
|
<el-table-column prop="TBRp" label="上期满意度" width="66px"/> |
||||||
|
<el-table-column prop="TBRpts" label="同比上期" width="66px"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
|
||||||
|
</el-main> |
||||||
|
</el-container> |
||||||
|
|
||||||
|
<el-aside width="445px"> |
||||||
|
<!-- 区--> |
||||||
|
<div style="background-color:#04144E; height: 360px "> |
||||||
|
<el-table |
||||||
|
:data="tableData3" |
||||||
|
height="360" |
||||||
|
:style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px' }" |
||||||
|
:header-cell-style="headerCellStyle" |
||||||
|
:row-style="tableRowStyle" |
||||||
|
:show-summary='false' |
||||||
|
> |
||||||
|
<el-table-column prop="MydRanking" label="排名"/> |
||||||
|
<el-table-column prop="OrganizeName" label="区"/> |
||||||
|
<el-table-column prop="FinalRP" label="滿意度"/> |
||||||
|
<el-table-column prop="TBRp" label="上期满意度"/> |
||||||
|
<el-table-column prop="TBRpts" label="同比上期" width="86px"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-aside> |
||||||
|
</el-container> |
||||||
|
</div> |
||||||
|
</datav-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="6"> |
||||||
|
<datav-card title="不满意样本趋势" sub-title="不满意样本" style="height: 156px"> |
||||||
|
<div style="height: 150px"> |
||||||
|
<v-charts |
||||||
|
:option="option2" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
</datav-card> |
||||||
|
<datav-card title="单项分析"> |
||||||
|
<div style="height: 226px"> |
||||||
|
<v-charts |
||||||
|
:option="option3" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</datav-card> |
||||||
|
<div style="background-color:#04144E; "> |
||||||
|
<h3 style="color: white">单项调查情况 <span style="font-size: 14px; color: #597AE9">昨日数据下发</span> |
||||||
|
</h3> |
||||||
|
<el-table |
||||||
|
:data="tableData4" |
||||||
|
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="单项业务"/> |
||||||
|
<el-table-column prop="sdcl" label="有效数"/> |
||||||
|
<el-table-column prop="bmyzs" label="省不满意数"/> |
||||||
|
<el-table-column prop="LastDayQACount" label="新增调查数"/> |
||||||
|
|
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
</el-row> |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
</el-scrollbar> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script setup> |
||||||
|
import vCharts from "vue-echarts"; |
||||||
|
import changshaMap from "@/assets/data/changsha.json"; |
||||||
|
import * as echarts from "echarts/core"; |
||||||
|
import { |
||||||
|
GetBMYYBQS, GetCustomOffLineSonPeriodSet, |
||||||
|
GetDCQK, |
||||||
|
GetDITU, |
||||||
|
GetDXFX, |
||||||
|
GetGLFW, |
||||||
|
GetMyPeriod, GetOffLineStatisticsSetList, |
||||||
|
GetRCSQQK, |
||||||
|
GetZHMYLPM, |
||||||
|
GetZRSJXF, qx_get |
||||||
|
} from "@/api/screen/jwpy.ts"; |
||||||
|
|
||||||
|
|
||||||
|
// 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 tableData = ref([]) // 业务满意率 |
||||||
|
const tableData1 = ref([]) // 综合满意度排名 |
||||||
|
const tableData2 = ref([]) |
||||||
|
const tableData3 = ref([]) |
||||||
|
const tableData4 = ref([]) // 单项调查情况 |
||||||
|
// endregion |
||||||
|
// 树形下拉框的映射字段 |
||||||
|
const treeProps = { |
||||||
|
label: 'text', |
||||||
|
children: 'children' |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
// 监听年份变化，更新月份数据 |
||||||
|
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 = []; // 清空月份数据 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// region 下拉框 |
||||||
|
const handleYearChange = (checkedYear) => { |
||||||
|
console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) |
||||||
|
getData(); |
||||||
|
} |
||||||
|
const handleMonthChange = (checkedMonth) => { |
||||||
|
console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) |
||||||
|
getData(); |
||||||
|
} |
||||||
|
// 组织机构选项改变时 |
||||||
|
const handleOrgChange = async (checkedOrg) => { |
||||||
|
try { |
||||||
|
// 使用 await 等待异步操作完成 因为要等返回选中第一个 task 之后才能发送正确的请求 |
||||||
|
content.value = await GetOffLineStatisticsSetList(selectOrg.value); |
||||||
|
task.value = content.value[0].ID; |
||||||
|
// 找到对应单位在地图上的位置 |
||||||
|
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) => { |
||||||
|
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: { |
||||||
|
show: false, |
||||||
|
type: "piecewise", |
||||||
|
bottom: 10, |
||||||
|
pieces: [ |
||||||
|
{min: 0, max: 500, label: "问题数低于500", color: "#F6A149"}, |
||||||
|
{min: 501, max: 1000, label: "问题数介于500-1000", color: "#F6A149"}, |
||||||
|
{min: 1001, label: "问题数高于1000", color: "#D34343"}, |
||||||
|
], |
||||||
|
right: 10, |
||||||
|
realtime: false, |
||||||
|
orient: "horizontal", |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
calculable: true, |
||||||
|
}, |
||||||
|
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%'}, |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// region 初始化 |
||||||
|
onMounted(async () => { |
||||||
|
// 年 |
||||||
|
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; // 选择第一个年份 |
||||||
|
console.log("第一个年份" + selectYear.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; |
||||||
|
} |
||||||
|
|
||||||
|
// 组织机构 |
||||||
|
const resOrgs = await qx_get(); |
||||||
|
org.value = resOrgs; |
||||||
|
if (org.value.length > 0) { |
||||||
|
selectOrg.value = org.value[0].id; |
||||||
|
console.log(selectOrg.value); |
||||||
|
} |
||||||
|
|
||||||
|
const resTasks = await GetOffLineStatisticsSetList(selectOrg.value); |
||||||
|
content.value = resTasks; |
||||||
|
if (content.value.length > 0) { |
||||||
|
console.log(content.value[0]); |
||||||
|
task.value = content.value[0].ID; |
||||||
|
} |
||||||
|
// 获取数据 |
||||||
|
await getData(); |
||||||
|
}); |
||||||
|
|
||||||
|
async function getData() { |
||||||
|
|
||||||
|
// 调查情况 |
||||||
|
GetDCQK(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => { |
||||||
|
reviewOk.value = res |
||||||
|
}); |
||||||
|
|
||||||
|
// 调查满意度 |
||||||
|
GetGLFW(selectYear.value, selectOrg.value, task.value).then((res) => { |
||||||
|
dcmyd.value = res |
||||||
|
option1.value.xAxis.data = dcmyd.value[0].lstson.slice(-6).map(item => item.SonPeriodName); |
||||||
|
option1.value.series[0].data = dcmyd.value[0].lstson.slice(-6).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 === "(省)区"); |
||||||
|
tableData2.value = group2 |
||||||
|
tableData3.value = group3 |
||||||
|
}); |
||||||
|
|
||||||
|
// 不满意样本趋势 |
||||||
|
GetBMYYBQS(selectYear.value, selectOrg.value, task.value).then((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); |
||||||
|
}); |
||||||
|
|
||||||
|
// 单项分析 |
||||||
|
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); // 去年同期 |
||||||
|
}); |
||||||
|
|
||||||
|
// 单项调查情况 |
||||||
|
GetRCSQQK(selectYear.value, selectMonth.value, selectOrg.value, task.value).then((res) => { |
||||||
|
let text = res |
||||||
|
text = text.filter(item => item.Name !== null) |
||||||
|
tableData4.value = text |
||||||
|
}); |
||||||
|
|
||||||
|
// 地图数据 |
||||||
|
GetDITU(selectYear.value).then((res) => { |
||||||
|
tempMap.value = res |
||||||
|
mapDataList.value = tempMap.value.map(org => { |
||||||
|
return {name: org.OrganizeName, value: org.OrganizeID}; |
||||||
|
}) |
||||||
|
option.value.series.data = mapDataList.value |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// 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; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue