supervision
/
supervision-vue
4
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页大屏前端1.3

main
不爱学习的石同学 1 year ago
parent
5e20580922
commit
278ca5cd28
6 changed files with 598 additions and 268 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      src/api/screen/jwpy.ts
  2. 0
      src/api/screen/screen.ts
  3. 51
      src/components/datav/select.vue
  4. 347
      src/views/datav/Gobal.vue
  5. 264
      src/views/datav/Jwpy.vue
  6. 204
      src/views/datav/MailVisits.vue

0
src/api/screen/jwpy.ts
Unescape View File

0
src/api/screen/screen.ts
Unescape View File

51
src/components/datav/select.vue
Unescape View File

@ -0,0 +1,51 @@
<template>
<el-select v-model="value" placeholder="Select" class="custom-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script>
export default {
data() {
return {
value: null,
options: [
{value: '1', label: 'Option 1', disabled: false},
{value: '2', label: 'Option 2', disabled: false},
{value: '3', label: 'Option 3', disabled: true},
]
};
}
};
</script>
<style scoped lang="scss">
.custom-select {
width: 144px;
height: 30px;
background: #1C3472 !important;
color: #ffffff !important;
}
::v-deep .el-select .el-input__inner {
background-color: #1C3472 !important;
color: #ffffff !important;
}
::v-deep .el-option,
::v-deep .el-select-dropdown__item {
background-color: #1C3472 !important;
color: #ffffff !important;
}
::v-deep .el-option:hover,
::v-deep .el-select-dropdown__item:hover {
background-color: #0f2557 !important;
}
</style>

347
src/views/datav/Gobal.vue
Unescape View File

@ -11,7 +11,7 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
<el-scrollbar height="300px"> <el-scrollbar height="340px">
<datav-chart-bar <datav-chart-bar
:data="fxsjlist" :data="fxsjlist"
size="large" size="large"
@ -21,7 +21,7 @@
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局属单位" name="2"> <datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px"> <el-scrollbar height="340px">
<datav-chart-bar <datav-chart-bar
:data="jsdwlist" :data="jsdwlist"
:max="11" :max="11"
@ -34,12 +34,13 @@
</datav-card> </datav-card>
<datav-card title="业务类型占比"> <datav-card title="业务类型占比">
<v-charts <v-charts
style="height: 320px" style="height: 340px"
:option="zfbaPieOption" :option="zfbaPieOption"
autoresize autoresize
/> />
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<datav-date-picker v-model="time"/> <datav-date-picker v-model="time"/>
<div class="flex gap-42"> <div class="flex gap-42">
@ -61,7 +62,7 @@
<datav-statistic <datav-statistic
:value="overview.mailComplaintPro" :value="overview.mailComplaintPro"
title="信访投诉问题" title="信访投诉问题"
style="width: 16.66%" style="width: 16.66%;"
/> />
<datav-statistic <datav-statistic
:value="overview.policeValuationPro" :value="overview.policeValuationPro"
@ -75,34 +76,56 @@
/> />
</div> </div>
<v-charts <v-charts
style="height: 450px" style="height: 360px"
:option="option" :option="option"
autoresize autoresize
/> />
<datav-card title="问题趋势"> <div>
<v-charts
style="height: 300px" <datav-card title="问题趋势">
:option="proTrend" <v-charts
autoresize style="height: 260px;"
/> :option="proTrend"
</datav-card> autoresize
/>
<div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand">
<span class="el-dropdown-link my-gobal-yearselect">
{{ selectedYear + " 年" }}
</span>
<template #dropdown>
<el-dropdown-menu style="width: 90px">
<el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</datav-card>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<datav-card title="突出问题排名" sub-title="问题数"> <datav-card title="突出问题排名" sub-title="问题数">
<el-scrollbar height="300px"> <el-scrollbar height="390px">
<datav-chart-bar-pro <datav-chart-bar-pro
:data="tcwtlist" :data="tcwtlist"
size="small" size="small"
/> />
</el-scrollbar> </el-scrollbar>
</datav-card> </datav-card>
<datav-card title="问题类型占比"> <datav-card title="问题类型占比">
<v-charts <v-charts
style="height: 300px" style="height: 350px"
:option="wtlxPieOption" :option="wtlxPieOption"
autoresize autoresize
/> />
</datav-card> </datav-card>
</el-col> </el-col>
</el-row> </el-row>
</main> </main>
@ -110,6 +133,7 @@
</el-scrollbar> </el-scrollbar>
</template> </template>
<script setup> <script setup>
import vCharts from "vue-echarts"; import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json"; import changshaMap from "@/assets/data/changsha.json";
@ -125,16 +149,7 @@ const ywzblist = ref([]); // 业务类型占比
const wtlxlist = ref([]); // 问题类型占比 const wtlxlist = ref([]); // 问题类型占比
const tcwtlist = ref([]); // 突出问题排名 const tcwtlist = ref([]); // 突出问题排名
const mapData = ref([]); // 地图数据 const mapData = ref([]); // 地图数据
const gobalTempMapVoList = ref([ let gobalTempMapVoList = [
{
"name": "芙蓉分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{ {
"name": "天心分局", "name": "天心分局",
"totalPro": 11, "totalPro": 11,
@ -143,122 +158,70 @@ const gobalTempMapVoList = ref([
"mailPro": 11, "mailPro": 11,
"policePro": 11, "policePro": 11,
"reviewPro": 11 "reviewPro": 11
}, }
{ ]; // 地图临时测试数据
"name": "岳麓分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{
"name": "开福分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{
"name": "雨花分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{
"name": "长沙县局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{
"name": "望城分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{
"name": "宁乡市局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{
"name": "浏阳市局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
{
"name": "高新分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11
},
]); // 地图临时测试数据
// endregion // endregion
const router = useRouter(); const router = useRouter();
// region 地图相关 // region 地图相关
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = { const option = ref({
geo: { geo: {
map: "changsha", map: "changsha",
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: function (params) { formatter: function (params) {
if (typeof params.data === "undefined") { console.log(params)
console.log(params); const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>问题总数 <span>${dataItem.totalPro}</span></li>
<li>督察问题 <span>${dataItem.supervisePro}</span></li>
<li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
<li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
<li>警务评议问题 <span>${dataItem.policePro}</span></li>
<li>审计监督问题 <span>${dataItem.reviewPro}</span></li>
</ul>
</div>
</div>`;
} else { } else {
console.log("================================")
console.log(params);
const res = params.data;
return `<div class="tooltip"> return `<div class="tooltip">
<div class="tooltip-title">${res.name}</div> <div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul"> <ul class="tooltip-ul"">
<li>问题总数 <span>${params.data.totalPro}</span></li> <li>问题总数 <span>0</span></li>
<li>督察问题 <span>${params.data.supervisePro}</span></li> <li>督察问题 <span>0</span></li>
<li>案件核查问题 <span>${params.data.caseVerifyPro}</span></li> <li>案件核查问题 <span>0</span></li>
<li>信访投诉问题 <span>${params.data.mailPro}</span></li> <li>信访投诉问题 <span>0</span></li>
<li>警务评议问题 <span>${params.data.policePro}</span></li> <li>警务评议问题 <span>0</span></li>
<li>审计监督问题 <span>${params.data.reviewPro}</span></li> <li>审计监督问题 <span>0</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
} }
} },
// backgroundColor: "#031577", //
// borderColor: "#0A2F86",
// borderWidth: 0, // 设置边框宽度为1像素
// borderRadius: 3, // 设置边框半径为3像素
// shadowBlur: 0, // 设置阴影模糊程度为8像素
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
}, },
visualMap: { visualMap: {
type: "piecewise", type: "piecewise",
bottom: 10, bottom: 10,
pieces: [ pieces: [
{gte: 0, lte: 500, label: "问题数低于500"}, {gte: 0, lte: 10, label: "问题数低于500"},
{gte: 500, lte: 1000, label: "问题数介于500-1000"}, {gte: 10, lte: 20, label: "问题数介于500-1000"},
{gte: 1000, label: "问题数高于1000"}, {gte: 30, label: "问题数高于1000"},
], ],
right: 10, right: 10,
realtime: false, realtime: false,
@ -287,20 +250,21 @@ const option = {
borderColor: "#1773c3", borderColor: "#1773c3",
}, },
}, },
data: gobalTempMapVoList.value.map(item => ({ emphasis: {
areaColor: "#FFD700", // 高亮时区域颜色
borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
},
data: gobalTempMapVoList.map(item => ({
name: item.name, name: item.name,
value: item.totalPro, value: item.totalPro // 将 totalPro 值映射到 value 字段
todaysum: item.totalPro,
allsum: item.supervisePro,
completed: item.caseVerifyPro,
completedrate: item.mailPro,
resolvedrate: item.policePro,
reviewrate: item.reviewPro
})) }))
} }
], ],
}; })
// endregion // endregion
/** /**
* gobalTempMapVoList.value.map(item => ({ * gobalTempMapVoList.value.map(item => ({
* name: item.name, * name: item.name,
@ -313,8 +277,15 @@ const option = {
* })) * }))
* @type {Ref<UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>, UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}> | {yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>} * @type {Ref<UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>, UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}> | {yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>}
*/ */
// 问题趋势线状图 // region问题趋势线状图
const proTrend = ref({ const proTrend = ref({
grid: {
left: '10%', // 图表距离容器左边的距离
right: '10%', // 图表距离容器右边的距离
top: '10%', // 图表距离容器上边的距离
bottom: '20%', // 图表距离容器下边的距离
containLabel: false // 是否包含坐标轴的标签
},
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
@ -366,6 +337,14 @@ const proTrend = ref({
], ],
}); });
const years = ref(['2024', '2023']); // 年份列表
const selectedYear = ref('2024年'); // 当前选中的年份
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
};
// endregion
function go() { function go() {
router.push("/datav/sub1") router.push("/datav/sub1")
@ -422,7 +401,6 @@ const overview = ref({
policeValuationPro: 0, policeValuationPro: 0,
reviewPro: 0, reviewPro: 0,
}); });
const time = ref([ const time = ref([
moment().startOf("year").format("YYYY-MM-DD"), moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"),
@ -436,20 +414,7 @@ function getData() {
ywzblist.value = res.ywzblist; ywzblist.value = res.ywzblist;
wtlxlist.value = res.wtlxlist; wtlxlist.value = res.wtlxlist;
tcwtlist.value = res.tcwtlist; tcwtlist.value = res.tcwtlist;
console.log(res.gobalTempMapVoList); gobalTempMapVoList = res.gobalTempMapVoList;
// gobalTempMapVoList.value = res.gobalTempMapVoList;
// console.log(gobalTempMapVoList.value);
/* option.value.series[0].data = gobalTempMapVoList.value.map(item => ({
name: item.name,
totalPro: item.totalPro,
supervisePro: item.supervisePro,
caseVerifyPro: item.caseVerifyPro,
mailPro: item.mailPro,
policePro: item.policePro,
reviewPro: item.reviewPro
}));*/
}); });
getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => { getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => {
proTrend.value.xAxis.data = res.monthList; proTrend.value.xAxis.data = res.monthList;
@ -464,7 +429,6 @@ watch(time, () => {
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@ -479,7 +443,6 @@ const colors = [
percentage: 40, percentage: 40,
}, },
]; ];
// endregion // endregion
@ -490,46 +453,102 @@ const colors = [
@import "@/style/datav.scss"; @import "@/style/datav.scss";
:deep() { :deep() {
// 弹框整体
.tooltip { .tooltip {
width: 110px; position: relative;
height: 120px; width: 169.88px;
height: 198px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
border: 1px solid #4E8FFF;
margin: -10px -10px -10px -10px;
} }
//浏阳市局
.tooltip-title { .tooltip-title {
color: #fff; width: 169.88px;
font-weight: bold; height: 43px;
text-align: center; background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
line-height: 30px; display: flex;
width: 110px; justify-content: center; /* 水平居中 */
height: 30px; align-items: center; /* 垂直居中 */
background: #031577; text-align: center; /* 水平居中 */
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 22px;
border-bottom: 1px solid #253755; /* 设置下边框 */
} }
.tooltip-content { .tooltip-content {
color: #fff; width: 170px;
font-weight: bold; height: 155.8px;
width: 110px; //font-size: 11px;
height: 120px; margin-top: -12px;
font-size: 12px;
background: linear-gradient(180deg, #010457 0%, #031577 100%); background: linear-gradient(180deg, #010457 0%, #031577 100%);
}
.tooltip-content ul {
list-style-type: none; /* 移除默认的小圆点 */
padding: 0;
} }
.tooltip-content ul li { .tooltip-content ul li {
line-height: 20px;
margin-left: 5px; margin-left: 5px;
font-family: SourceHanSansCN, SourceHanSansCN; height: 25px;
color: #597AE9; color: #597AE9;
font-size: 13px;
} }
// 数字的span
.tooltip-ul span { .tooltip-ul span {
float: right; float: right;
width: 50px; width: 30px;
text-align: right; text-align: right;
margin-right: 5px; margin-right: 15px;
color: #fff; color: #fff;
font-size: 13px;
}
/* 小尖角 */
.tooltip::before {
content: '';
position: absolute;
top: 90px; /* 调整尖角的垂直位置 */
left: -10px; /* 调整尖角的水平位置 */
width: 0;
height: 0;
//border-top: 10px solid red; /* 顶边颜色 */
//border-bottom: 10px solid green; /* 底边颜色 */
//border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
} }
}
.test {
width: 95px;
height: 25px;
background: #1C3472;
} }
</style>
.gobal-dropdown-container {
position: absolute;
right: 20px;
top: 15px;
}
.my-gobal-yearselect {
font-size: 14px;
padding-top: 6px;
padding-left: 20px;
width: 90px;
}
</style>

264
src/views/datav/Jwpy.vue
Unescape View File

@ -5,52 +5,42 @@
<main> <main>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="调查情况"> <datav-card title="调查情况" style="height: 156px">
<el-row class="mb-32"> <el-row class="mb-32">
<el-col :span="4"> <el-col :span="5">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center margin-top-30">
<div class="descriptions_content">
{{ overview.firstMail }}
</div>
<div class="descriptions_label">
调查总量
</div>
</div>
</el-col>
<el-col :span="4">
<div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
{{ overview.firstMail }} {{ reviewOk.State2 }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
调查总量 调查总量
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="5">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center margin-top-30">
<div class="descriptions_content"> <div class="descriptions_content">
{{ overview.firstMail }} {{ reviewOk.State3 }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
有效回复 有效回复
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="5">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center margin-top-30">
<div class="descriptions_content"> <div class="descriptions_content">
{{ overview.firstMail }} {{ reviewOk.State3 - reviewOk.bmys }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
满意 满意
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="5">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center margin-top-30">
<div class="descriptions_content"> <div class="descriptions_content">
{{ overview.firstMail }} {{ 0 }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
基本满意 基本满意
@ -58,9 +48,9 @@
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center margin-top-30">
<div class="descriptions_content"> <div class="descriptions_content">
{{ overview.firstMail }} {{ reviewOk.bmys }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
不满意数 不满意数
@ -69,13 +59,52 @@
</el-col> </el-col>
</el-row> </el-row>
</datav-card> </datav-card>
<datav-card title="调查滿意度"></datav-card> <datav-card title="调查滿意度">
<div style="height: 226px">
<el-container>
<el-aside width="100px">
<el-col>
<div class="descriptions_cell text-center height-118">
<div class="descriptions_content margin-top-30 ">
{{ reviewOk.bmys }}
</div>
<div class="descriptions_label">
上期满意度
</div>
</div>
<div class="descriptions_cell text-center height-118">
<div class="descriptions_content">
{{ reviewOk.bmys }}
</div>
<div class="descriptions_label">
当前调查满意度
</div>
</div>
</el-col>
</el-aside>
<el-main>
<v-charts
:option="option1"
autoresize
/>
</el-main>
</el-container>
</div>
</datav-card>
<datav-card title="业务满意率"></datav-card> <datav-card title="业务满意率"></datav-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="datav-col"> <div class="datav-col">
<datav-date-picker v-model="time"/> <el-row :gutter="6">
<el-col :span="4">
<!-- <datav-select></datav-select>-->
</el-col>
</el-row>
</div> </div>
<v-charts <v-charts
style="height: 450px" style="height: 450px"
@ -84,16 +113,38 @@
/> />
<datav-card title="综合滿意度排名"> <datav-card title="综合滿意度排名">
<div class="common-layout">
<el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
<el-aside width="445px">Aside</el-aside>
</el-container>
</div>
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<datav-card title="不满意样本趋势"> <datav-card title="不满意样本趋势" sub-title="不满意样本" style="height: 156px">
<div style="height: 150px">
<v-charts
:option="option2"
autoresize
/>
</div>
</datav-card> </datav-card>
<datav-card title="单项分析"></datav-card> <datav-card title="单项分析">
<div style="height: 226px">
<v-charts
:option="option3"
autoresize
/>
</div>
</datav-card>
<datav-card title="单项调查情况"></datav-card> <datav-card title="单项调查情况"></datav-card>
</el-col> </el-col>
@ -199,15 +250,22 @@ const option = {
}, },
data: mapDataList, data: mapDataList,
}, },
], ],
}; };
const option1 = ref({ const option1 = {
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [], data: [
"9/10",
"9/11",
"9/12",
"9/13",
"9/13",
"9/13",
],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -250,11 +308,104 @@ const option1 = ref({
}, },
]), ]),
}, },
data: [], data: [
100,
25,
50,
70,
10,
10,
],
}, },
], ],
}); grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
// region 调查满意度 }
const option2 = {
xAxis: {
type: "category",
boundaryGap: false,
data: [
"9/10",
"9/11",
"9/12",
"9/13",
"9/13",
"9/13",
],
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#193775",
},
}
},
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: [
79,
88,
82,
77,
69,
90,
],
},
],
grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
}
const option3 = {
title: {text: '柱状图示例'},
tooltip: {},
legend: {data: ['销量']},
grid: {
left: '10%',
right: '10%', top: '10%', bottom: '10%'
},
xAxis: {type: 'category', data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},
yAxis: {type: 'value'},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
itemStyle: {
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)'}])
}
}]
};
// region 调查情况
const overview = ref({ const overview = ref({
total: 0, total: 0,
countryMail: 0, countryMail: 0,
@ -263,16 +414,30 @@ const overview = ref({
numMail: 0, numMail: 0,
}); });
const time = ref([ const reviewOk = ref({
moment().startOf("year").format("YYYY-MM-DD"), State2: 164279,
moment().format("YYYY-MM-DD"), State3: 104659,
]); bmys: "1615",
dczl: 392902,
jtl: "68.45%",
yxhf: "104659",
yxl: "38.92%"
});
// endregion
// region 调查滿意度
// endregion
/** /**
* 初始化 * 初始化
*/ */
let timer; let timer;
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
function initRecentlyMailTrend() { function initRecentlyMailTrend() {
@ -283,8 +448,8 @@ function initRecentlyMailTrend() {
endTime: time.value[1] endTime: time.value[1]
}).then((data) => { }).then((data) => {
// 更新图表的 xAxis 和 series 数据 // 更新图表的 xAxis 和 series 数据
option1.value.xAxis.data = data.monthList; // option1.value.xAxis.data = data.monthList;
option1.value.series[0].data = data.totalList; // option1.value.series[0].data = data.totalList;
}); });
} }
@ -300,7 +465,7 @@ onMounted(() => {
function getData() { function getData() {
getMailVisitsData(time.value).then((data) => { getMailVisitsData(time.value).then((data) => {
overview.value = data.overview; // overview.value = data.overview;
}); });
} }
@ -339,5 +504,20 @@ const colors = [
align-items: center; align-items: center;
} }
.descriptions_content {
font-size: 22px;
font-weight: 700;
}
.margin-top-30 {
margin-top: 30px;
}
.height-118 {
height: 118px;
}
</style> </style>

204
src/views/datav/MailVisits.vue
Unescape View File

@ -352,85 +352,78 @@ import moment from "moment/moment.js";
/** /**
* 地图渲染 * 地图渲染
*/ */
const getMapDataList = async () => {
try {
mapDataList = await mapCountyData(currentParams);
changsMap();
} catch (error) {}
};
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
let mapDataList = reactive([ let gobalTempMapVoList = [
{name: '长沙县', value: 500}, {
{name: '浏阳市', value: 400}, "name": "天心分局",
{name: '开福区', value: 300}, "totalPro": 11,
{name: '浏阳市', value: 400}, "supervisePro": 11,
{name: '望城区', value: 400}, "caseVerifyPro": 11,
{name: '芙蓉区', value: 400}, "mailPro": 11,
{name: '天心区', value: 400}, "policePro": 11,
{name: '雨花区', value: 400}, "reviewPro": 11
{name: '岳麓区', value: 400}, }
{name: '宁乡市', value: 400}, ];
]); const option = ref({
const option = {
geo: { geo: {
// 是上面注册时的名字哦，registerMap（'名字保持一致'）
map: "changsha", map: "changsha",
itemStyle: {
normal: {
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
},
},
}, },
tooltip: { tooltip: {
show: true, trigger: 'item',
trigger: "item",
position: "right",
formatter: function (params) { formatter: function (params) {
if (typeof params.data === "undefined") { console.log(params)
console.log(params); const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>信访总件数 <span>${dataItem.totalPro}</span></li>
<li>国家信访 <span>${dataItem.supervisePro}</span></li>
<li>公安部信访 <span>${dataItem.caseVerifyPro}</span></li>
<li>局长信箱 <span>${dataItem.mailPro}</span></li>
<li>12337信访 <span>${dataItem.policePro}</span></li>
</ul>
</div>
</div>`;
} else { } else {
console.log(params);
return `<div class="tooltip"> return `<div class="tooltip">
<div class="tooltip-title">${params.name}</div> <div class="tooltip-title">${params.name}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul"> <ul class="tooltip-ul"">
<li>信访总件数 <span>${params.data.todaysum}</span></li> <li>信访总件数 <span>0</span></li>
<li>国家信访 <span>${params.data.allsum}</span> <li>国家信访 <span>0</span></li>
</li> <li>公安部信访 <span>0</span></li>
<li>公安部信访 <span>${params.data.completed}</span> <li>局长信箱 <span>0</span></li>
</li> <li>12337信访 <span>0</span></li>
<li>局长信箱 <span>${params.data.completedrate}</span></li>
<li>12337信访 <span>${params.data.resolvedrate}</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
} }
}, },
backgroundColor: "#031577", //
borderColor: "#0A2F86",
borderWidth: 0, // 设置边框宽度为1像素
borderRadius: 3, // 设置边框半径为3像素
shadowBlur: 0, // 设置阴影模糊程度为8像素
shadowOffsetX: 0, // 设置水平阴影位移量为0像素
shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
}, },
visualMap: { visualMap: {
type: "piecewise", type: "piecewise",
bottom: 10, bottom: 10,
pieces: [ pieces: [
{gte: 85, lte: 100, label: "信访总件数>300"}, {gte: 0, lte: 10, label: "问题数低于500"},
{gte: 65, lte: 85, label: "信访总件数>200"}, {gte: 10, lte: 20, label: "问题数介于500-1000"},
{gte: 0, lte: 65, label: "信访总件数0-200"}, {gte: 30, label: "问题数高于1000"},
], ],
right: 10, // 右边距 right: 10,
realtime: false, realtime: false,
orient: "horizontal", // 水平显示 orient: "horizontal",
textStyle: { textStyle: {
color: "#fff", // 文字颜色 color: "#fff",
}, },
calculable: true, calculable: true,
inRange: { inRange: {
color: ["#D34343", "#F6A149", "#4987F6"], color: ["#4987F6", "#F6A149", "#D34343",],
}, },
}, },
series: [ series: [
@ -443,12 +436,25 @@ const option = {
show: true, show: true,
color: "white", color: "white",
}, },
data: mapDataList, itemStyle: {
}, normal: {
areaColor: "#02215E",
borderColor: "#1773c3",
},
},
emphasis: {
areaColor: "#FFD700", // 高亮时区域颜色
borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
},
data: gobalTempMapVoList.map(item => ({
name: item.name,
value: item.totalPro // 将 totalPro 值映射到 value 字段
}))
}
], ],
})
};
const option1 = ref({ const option1 = ref({
xAxis: { xAxis: {
type: "category", type: "category",
@ -633,7 +639,6 @@ watch(activeMailTrend, async () => {
option1.value.xAxis.data = recentlyMailTrend.monthList; option1.value.xAxis.data = recentlyMailTrend.monthList;
option1.value.series[0].data = recentlyMailTrend.totalList; option1.value.series[0].data = recentlyMailTrend.totalList;
} }
}) })
@ -704,10 +709,6 @@ const colors = [
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";
@ -726,4 +727,83 @@ const colors = [
:deep() {
// 弹框整体
.tooltip {
position: relative;
width: 169.88px;
height: 178px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
border: 1px solid #4E8FFF;
margin: -10px -10px -10px -10px;
}
//浏阳市局
.tooltip-title {
width: 169.88px;
height: 43px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center; /* 水平居中 */
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 22px;
border-bottom: 1px solid #253755; /* 设置下边框 */
}
.tooltip-content {
width: 170px;
height: 132px;
//font-size: 11px;
margin-top: -12px;
background: linear-gradient(180deg, #010457 0%, #031577 100%);
}
.tooltip-content ul {
list-style-type: none; /* 移除默认的小圆点 */
padding: 0;
}
.tooltip-content ul li {
margin-left: 5px;
height: 25px;
color: #597AE9;
font-size: 13px;
}
// 数字的span
.tooltip-ul span {
float: right;
width: 30px;
text-align: right;
margin-right: 15px;
color: #fff;
font-size: 13px;
}
/* 小尖角 */
.tooltip::before {
content: '';
position: absolute;
top: 90px; /* 调整尖角的垂直位置 */
left: -10px; /* 调整尖角的水平位置 */
width: 0;
height: 0;
//border-top: 10px solid red; /* 顶边颜色 */
//border-bottom: 10px solid green; /* 底边颜色 */
//border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save