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