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

Merge branches 'master' and 'master' of http://gitea.biutag.com/supervision/supervision-vue

main
wxc 1 year ago
parent
cc2b7e7dd6 34a85e63f2
commit
e0b81eefee
10 changed files with 1540 additions and 587 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. 8
      src/api/data/policeMeeting.ts
  2. 33
      src/api/data/supervisionNotify.ts
  3. 9
      src/api/screen/CaseVerif.ts
  4. 4
      src/components/datav/card.vue
  5. 58
      src/components/datav/message.vue
  6. 176
      src/views/data/PoliceMeeting.vue
  7. 205
      src/views/datav/CaseVerif.vue
  8. 127
      src/views/datav/Gobal.vue
  9. 57
      src/views/datav/MailVisits.vue
  10. 1218
      src/views/datav/SceneInsp.vue

8
src/api/data/policeMeeting.ts
Unescape View File

@ -0,0 +1,8 @@
import request from "@/api/request";
export function listPoliceMeeting(query) {
return request.get({
url: '/data/migration/page',
query
});
}

33
src/api/data/supervisionNotify.ts
Unescape View File

@ -55,3 +55,36 @@ export function getYellowBetDrug(times) {
url: `/datav/supervisonNotify/getYellowBetDrug?beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/supervisonNotify/getYellowBetDrug?beginTime=${times[0]}&endTime=${times[1]}`
}); });
} }
// 枪支管理数据
export function getGunController(times) {
return request.get({
url: `/datav/supervisonNotify/getGunController?beginTime=${times[0]}&endTime=${times[1]}`
});
}
// 枪支管理数据
export function getCompanyProblem(times) {
return request.get({
url: `/datav/supervisonNotify/getCompanyProblem?beginTime=${times[0]}&endTime=${times[1]}`
});
}
// 执法办案数据
export function getHandleCase(times) {
return request.get({
url: `/datav/supervisonNotify/getHandleCase?beginTime=${times[0]}&endTime=${times[1]}`
});
}
// 枪支管理数据
export function getCheckBeer(times) {
return request.get({
url: `/datav/supervisonNotify/getCheckBeer?beginTime=${times[0]}&endTime=${times[1]}`
});
}

9
src/api/screen/CaseVerif.ts
Unescape View File

@ -0,0 +1,9 @@
import request from "../request";
export function getAllCaseVerifCount(times) {
return request.get({
url: `/datav/caseVerif/getAllCaseVerifCount?beginTime=${times[0]}&endTime=${times[1]}`
});
}

4
src/components/datav/card.vue
Unescape View File

@ -9,6 +9,8 @@
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
defineProps({ defineProps({
title: { title: {
@ -20,6 +22,8 @@ defineProps({
} }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.datav-card { .datav-card {
padding: 12px; padding: 12px;

58
src/components/datav/message.vue
Unescape View File

@ -0,0 +1,58 @@
<!-- Message.vue -->
<template>
<div class="message" :class="type">
<div class="message-title">{{ title }}</div>
<div class="message-content">{{ content }}</div>
<div class="message-footer flex end">
<span>{{ date }}</span>
</div>
</div>
</template>
<script setup>
const props = defineProps( {
type: {
type: String,
default: 'success'
},
title: {
type: String,
required: true
},
content: {
type: String,
required: true
},
date: {
type: String,
required: true
}
})
const messageClass = computed(() => `message ${props.type}`);
</script>
<style scoped>
.message {
padding: 10px;
margin-bottom: 10px;
background: linear-gradient(270deg, rgba(16, 151, 255, 0.1) 0%, rgba(0, 55, 236, 0.87) 100%);
&[type=warning] {
background: linear-gradient(270deg, rgba(255, 190, 16, 0.1) 0%, rgba(236, 84, 0, 0.87) 100%);
}
&[type=success] {
background: linear-gradient(270deg, rgba(91, 216, 9, 0.14) 0%, #28813D 100%);
}
.message-title {
font-size: 14px;
margin-bottom: 10px;
}
.message-content {
margin-bottom: 10px;
}
}
</style>

176
src/views/data/PoliceMeeting.vue
Unescape View File

@ -0,0 +1,176 @@
<template>
<div class="container">
<header>
<el-form :label-width="114">
<el-row>
<!-- <el-col :span="6">-->
<!-- <el-form-item label="事务ID">-->
<!-- <el-input-->
<!-- placeholder="请输入"-->
<!-- v-model="query.sampleId"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="6">
<el-form-item label="事务名">
<el-input
placeholder="请输入"
v-model="query.name"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="受访人">
<el-input
placeholder="请输入"
v-model="query.visitName"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="受访人电话">
<el-input
placeholder="请输入"
v-model="query.visitPhone"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="单位名称">
<el-input
placeholder="请输入"
v-model="query.orgName"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="业务名称">
<el-input
placeholder="请输入"
v-model="query.businessName"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="提交时间范围">
<el-date-picker
value-format="YYYY-MM-DD"
type="daterange"
unlink-panels
format="YYYY-MM-DD"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
v-model="query.sampleTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="评议时间范围">
<el-date-picker
value-format="YYYY-MM-DD"
type="daterange"
unlink-panels
format="YYYY-MM-DD"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
:shortcuts="shortcuts"
v-model="query.visitTime"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="mb-25 flex end">
<div>
<el-button type="primary" @click="getList">
<template #icon>
<icon name="el-icon-Search" />
</template>
查询
</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</header>
<div class="table-container" v-loading="loading">
<el-table ref="tableRef" :data="list" :default-sort="{prop:'visitTime', order: 'descending'}" :sort-by="query.sortField" @sort-change="handleSortChange">
<el-table-column label="事务名" prop="name" />
<el-table-column label="受访人" prop="visitName" />
<el-table-column label="受访人电话" prop="visitPhone" show-overflow-tooltip />
<el-table-column label="涉及单位" prop="orgName" show-overflow-tooltip />
<el-table-column label="事项" prop="businessName" show-overflow-tooltip />
<el-table-column label="提交时间" prop="sampleTime" sortable="custom" :sort-orders="['ascending', 'descending']" />
<el-table-column label="评议时间" prop="visitTime" sortable="custom" :sort-orders="['ascending', 'descending']" />
<el-table-column label="内容" prop="sampleContent" show-overflow-tooltip />
<el-table-column label="结果" prop="resultName" show-overflow-tooltip />
</el-table>
</div>
<div class="flex end mt-8">
<el-pagination
@size-change="getList"
@current-change="getList"
:current-page="query.current"
:page-sizes="[10, 20, 50]"
v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {listPoliceMeeting} from "@/api/data/policeMeeting";
const query = ref({
current: 1,
size: 10,
sortField: 'visitTime',
sortOrder: 'DESC'
});
const tableRef = ref(null);
function handleSortChange({ prop, order }) {
query.value.sortField = prop;
query.value.sortOrder = order === "ascending" ? 'ASC' : 'DESC';
getList();
}
const list = ref<any[]>([]);
const total = ref(0);
const show = ref(false);
function getList() {
listPoliceMeeting(query.value).then((data) => {
list.value = data.records;
total.value = data.total;
});
}
function reset() {
query.value = {
current: 1,
size: 10,
sortField: 'visitTime',
sortOrder: 'DESC'
};
tableRef.value.sort('visitTime','descending');
}
onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
</style>

205
src/views/datav/CaseVerif.vue
Unescape View File

@ -45,7 +45,13 @@
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="警纪警规" name="3">
<v-charts
style="height: 320px"
:option="fwglPieOption"
autoresize
/>
</datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
</el-col> </el-col>
@ -58,27 +64,27 @@
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="temp.tempCheckedCaseTotal" :value="overview.confirmed"
title="查实案件数" title="查实案件数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="temp.tempDealPro" :value="overview.investigateAndPunish"
title="查处问题（个）" title="查处问题（个）"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="temp.tempDealPre" :value="overview.accountablePeopleNumber"
title="问责人次" title="问责人次"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="temp.tempDealOrg" :value="overview.accountableDepartNumber"
title="问责单位数" title="问责单位数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="temp.tempRate" :value="overview.confirmedRate"
value-unit="%" value-unit="%"
title="查实率" title="查实率"
style="width: 16.66%" style="width: 16.66%"
@ -95,6 +101,19 @@
:option="option1" :option="option1"
autoresize 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> </datav-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@ -131,7 +150,15 @@
/> />
</div> </div>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="停职处理情况" name="2">
<div class="mb-40">
<v-charts
style="height: 340px"
:option="option4"
autoresize
/>
</div>
</datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
</el-col> </el-col>
@ -147,7 +174,12 @@ import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import moment from "moment"; import moment from "moment";
import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav"; import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav";
import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
import {getAllCaseVerifCount} from "@/api/screen/CaseVerif.ts";
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
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"),
@ -155,11 +187,11 @@ const time = ref([
const overview = ref({ const overview = ref({
total: 0, total: 0,
confirmed: 0, confirmed: 0, // 查实案件数
investigateAndPunish: 0, investigateAndPunish: 0, // 查处问题（个）
accountablePeopleNumber: 0, accountablePeopleNumber: 0, // 问责人次
accountableDepartNumber: 0, accountableDepartNumber: 0, // 问责单位数、
confirmedRate: 0, confirmedRate: 0, // 查实率
}); });
let gobalTempMapVoList = [ let gobalTempMapVoList = [
{ {
@ -252,8 +284,6 @@ const fwglPieList = ref([]);
const jjjgPieList = ref([]); const jjjgPieList = ref([]);
const ajlyPieList = ref([]); const ajlyPieList = ref([]);
const ajhcqxList = ref([]); const ajhcqxList = ref([]);
const temp = ref({ const temp = ref({
tempCheckedCaseTotal: 0, tempCheckedCaseTotal: 0,
tempDealPro: 0, tempDealPro: 0,
@ -262,16 +292,25 @@ const temp = ref({
tempRate: 0, tempRate: 0,
}) })
setTimeout(() => { // setTimeout(() => {
temp.value={ // temp.value={
tempCheckedCaseTotal: 292, // tempCheckedCaseTotal: 292,
tempDealPro: 285, // tempDealPro: 285,
tempDealPre: 223, // tempDealPre: 223,
tempDealOrg: 93, // tempDealOrg: 93,
tempRate: 18, // tempRate: 18,
} // }
}, 1000); // }, 1000);
//
// region 事件||监听
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
};
watch(time, () => {
getData();
});
// endregion
@ -280,7 +319,7 @@ setTimeout(() => {
function getData() { function getData() {
getCaseVerifData(time.value).then((data) => { getCaseVerifData(time.value).then((data) => {
overview.value = data.overview; // overview.value = data.overview;
fxsjBarList.value = data.fxsjBarList; fxsjBarList.value = data.fxsjBarList;
jsdwBarList.value = data.jsdwBarList; jsdwBarList.value = data.jsdwBarList;
zfbaPieList.value = data.zfbaPieList; zfbaPieList.value = data.zfbaPieList;
@ -292,9 +331,13 @@ function getData() {
getCaseVerifTrend(time.value, 12).then((data) => { getCaseVerifTrend(time.value, 12).then((data) => {
ajhcqxList.value = data.ajhcqsList; ajhcqxList.value = data.ajhcqsList;
console.log(ajhcqxList.value) // console.log(ajhcqxList.value)
}); });
getAllCaseVerifCount(time.value).then((data) => {
overview.value = data.overview;
console.log(overview.value)
})
} }
@ -505,9 +548,20 @@ const option = {
}; };
const option1 = ref({ const option1 = ref({
grid: {
left: '5%', // 图表距离容器左边的距离
right: '2%', // 图表距离容器右边的距离
top: '10%', // 图表距离容器上边的距离
bottom: '20%', // 图表距离容器下边的距离
containLabel: false // 是否包含坐标轴的标签
},
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: true,
axisTick: {
// 去掉X轴刻度线
show: false
},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'],
}, },
yAxis: { yAxis: {
@ -606,85 +660,100 @@ const colors = [
// 弹框整体 // 弹框整体
.tooltip { .tooltip {
position: relative; position: relative;
width: 180px; width: 160px;
height: 222px; height: 194px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
border: 1px solid #4E8FFF; border: 1px solid #4E8FFF;
margin: -10px -10px -10px -10px; margin: -10px -10px -10px -10px;
} }
//浏阳市局 ////浏阳市局
.tooltip-title { .tooltip-title {
width: 180px; width: 160px;
height: 43px; height: 43px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
box-shadow: inset 0px -1px 0px 0px #253755;
display: flex; display: flex;
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
text-align: center; /* 水平居中 */
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px;
border-bottom: 1px solid #253755; /* 设置下边框 */ border-bottom: 1px solid #253755; /* 设置下边框 */
} }
.tooltip-content { .tooltip-content {
width: 180px; width: 160px;
height: 172px; height: 150px;
//font-size: 11px; background: linear-gradient(180deg, #010457 0%, #031577 100%)
margin-top: -12px;
background: linear-gradient(180deg, #010457 0%, #031577 100%);
} }
.tooltip-content ul { .tooltip-content ul {
list-style-type: none; /* 移除默认的小圆点 */ list-style-type: none; /* 移除默认的小圆点 */
padding: 0; padding-left: 5px;
margin: 0;
} }
.tooltip-content ul li { .tooltip-content ul li {
margin-left: 5px; height: 24px;
height: 25px;
color: #597AE9; color: #597AE9;
font-size: 13px; font-weight: 400;
font-size: 14px;
} }
// 数字的span //// 数字的span
.tooltip-ul span { .tooltip-ul span {
float: right; float: right;
width: 50px; width: 55px;
text-align: right;
margin-right: 10px;
color: #fff; color: #fff;
font-size: 13px; font-size: 14px;
text-align: center; /* 水平居中 */
} }
/* 小尖角 */ ///* 小尖角 */
.tooltip::before { //.tooltip::before {
content: ''; // 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; /* 右边颜色，与背景颜色相同 */
//}
}
.gobal-dropdown-container {
position: absolute; position: absolute;
top: 90px; /* 调整尖角的垂直位置 */ right: 20px;
left: -10px; /* 调整尖角的水平位置 */ top: 15px;
width: 0; }
height: 0; .test {
//border-top: 10px solid red; /* 顶边颜色 */ width: 95px;
//border-bottom: 10px solid green; /* 底边颜色 */ height: 25px;
//border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */ background: #1C3472;
} }
.gobal-dropdown-container {
position: absolute;
right: 20px;
top: 15px;
}
.my-gobal-yearselect {
font-size: 14px;
padding-top: 6px;
padding-left: 20px;
width: 90px;
color: #fff;
} }
</style> </style>
<!--<datav-tab-item label="警纪警规" name="3">-->
<!--<v-charts-->
<!-- style="height: 320px"-->
<!-- :option="jjjgPieOption"-->
<!-- autoresize-->
<!--/>-->
<!--</datav-tab-item>-->

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

@ -84,7 +84,7 @@
<div> <div>
<datav-card title="问题趋势"> <datav-card title="问题趋势">
<v-charts <v-charts
style="height: 260px;" style="height: 280px;"
:option="proTrend" :option="proTrend"
autoresize autoresize
/> />
@ -103,8 +103,6 @@
</div> </div>
</datav-card> </datav-card>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@ -120,7 +118,7 @@
<datav-card title="问题类型占比"> <datav-card title="问题类型占比">
<v-charts <v-charts
style="height: 360px;" style="height: 370px;"
:option="wtlxPieOption" :option="wtlxPieOption"
autoresize autoresize
/> />
@ -177,7 +175,8 @@ const gobalTempMapVoList = ref([
} }
]); // 地图临时数据 ]); // 地图临时数据
const router = useRouter(); const router = useRouter();
const years = ref(['2024', '2023', '2022']); // 年份列表 const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份 const selectedYear = ref('2024'); // 当前选中的年份
// endregion // endregion
@ -246,24 +245,36 @@ const option = ref({
<li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li> <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
<li>信访投诉问题 <span>${dataItem.mailPro}</span></li> <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
<li>民意感知问题 <span>${dataItem.policePro}</span></li> <li>民意感知问题 <span>${dataItem.policePro}</span></li>
<li>审计督察问题 <span>${dataItem.reviewPro}</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
} else { } else {
return `<div class="tooltip"> return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div> <div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul""> <ul class="tooltip-ul"">
<li>问题总数 <span>0</span></li> <li>问题总数 <span>0000</span></li>
<li>督察问题 <span>0</span></li> <li>督察问题 <span>0000</span></li>
<li>案件核查问题 <span>0</span></li> <li>案件核查问题 <span>0000</span></li>
<li>信访投诉问题 <span>0</span></li> <li>信访投诉问题 <span>0000</span></li>
<li>民意感知问题 <span>0</span></li> <li>民意感知问题 <span>0000</span></li>
<li>审计督察问题 <span>0000</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",
@ -309,16 +320,20 @@ const option = ref({
// 问题趋势线状图 // 问题趋势线状图
const proTrend = ref({ const proTrend = ref({
grid: { grid: {
left: '10%', // 图表距离容器左边的距离 left: '5%', // 图表距离容器左边的距离
right: '10%', // 图表距离容器右边的距离 right: '2%', // 图表距离容器右边的距离
top: '10%', // 图表距离容器上边的距离 top: '10%', // 图表距离容器上边的距离
bottom: '20%', // 图表距离容器下边的距离 bottom: '20%', // 图表距离容器下边的距离
containLabel: false // 是否包含坐标轴的标签 containLabel: false // 是否包含坐标轴的标签
}, },
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false,
data: [], data: [],
boundaryGap: true,
axisTick: {
// 去掉X轴刻度线
show: false
},
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -380,8 +395,12 @@ function getData() {
overview.value = res.overview; overview.value = res.overview;
}); });
getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => { getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => {
proTrend.value.xAxis.data = res.monthList; const gobalRecentlyTrendList = res.gobalRecentlyTrendList;
proTrend.value.series[0].data = res.totalList; const categories = gobalRecentlyTrendList.map(item => item.name);
const values = gobalRecentlyTrendList.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}); });
getStrongProblemRate(time.value).then((res) => { getStrongProblemRate(time.value).then((res) => {
tcwtlist.value = res.tcwtlist; tcwtlist.value = res.tcwtlist;
@ -448,8 +467,12 @@ onMounted(() => {
const handleCommand = (year) => { const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份 selectedYear.value = year; // 更新当前选中的年份
getGobalRecentlyTrendByMonth(year).then(res => { getGobalRecentlyTrendByMonth(year).then(res => {
proTrend.value.xAxis.data = res.monthList; const gobalRecentlyTrendList = res.gobalRecentlyTrendList;
proTrend.value.series[0].data = res.totalList; const categories = gobalRecentlyTrendList.map(item => item.name);
const values = gobalRecentlyTrendList.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}); });
}; };
watch(time, () => { watch(time, () => {
@ -458,7 +481,6 @@ watch(time, () => {
// endregion // endregion
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@ -483,77 +505,72 @@ const colors = [
// 弹框整体 // 弹框整体
.tooltip { .tooltip {
position: relative; position: relative;
width: 169.88px; width: 160px;
height: 168px; height: 194px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
border: 1px solid #4E8FFF; border: 1px solid #4E8FFF;
margin: -10px -10px -10px -10px; margin: -10px -10px -10px -10px;
} }
//浏阳市局 ////浏阳市局
.tooltip-title { .tooltip-title {
width: 169.88px; width: 160px;
height: 43px; height: 43px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
box-shadow: inset 0px -1px 0px 0px #253755;
display: flex; display: flex;
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
text-align: center; /* 水平居中 */
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px;
border-bottom: 1px solid #253755; /* 设置下边框 */ border-bottom: 1px solid #253755; /* 设置下边框 */
} }
.tooltip-content { .tooltip-content {
width: 170px; width: 160px;
height: 130px; height: 150px;
//font-size: 11px; background: linear-gradient(180deg, #010457 0%, #031577 100%)
margin-top: -12px;
background: linear-gradient(180deg, #010457 0%, #031577 100%);
} }
.tooltip-content ul { .tooltip-content ul {
list-style-type: none; /* 移除默认的小圆点 */ list-style-type: none; /* 移除默认的小圆点 */
padding: 0; padding-left: 5px;
margin: 0;
} }
.tooltip-content ul li { .tooltip-content ul li {
margin-left: 5px; height: 24px;
height: 25px;
color: #597AE9; color: #597AE9;
font-size: 13px; font-weight: 400;
font-size: 14px;
} }
// 数字的span //// 数字的span
.tooltip-ul span { .tooltip-ul span {
float: right; float: right;
width: 50px; width: 55px;
text-align: right;
margin-right: 35px;
color: #fff; color: #fff;
font-size: 13px; font-size: 14px;
} text-align: center; /* 水平居中 */
/* 小尖角 */
.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; /* 右边颜色，与背景颜色相同 */
} }
///* 小尖角 */
//.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 { .test {

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

@ -317,7 +317,7 @@ const option = ref({
<li>信访总件数 <span>${dataItem.total}</span></li> <li>信访总件数 <span>${dataItem.total}</span></li>
<li>国家信访 <span>${dataItem.countryTotal}</span></li> <li>国家信访 <span>${dataItem.countryTotal}</span></li>
<li>公安部信访 <span>${dataItem.policeTotal}</span></li> <li>公安部信访 <span>${dataItem.policeTotal}</span></li>
<li>局长信箱 <span>${dataItem.policeTotal}</span></li>
<li>12337信访 <span>${dataItem.numTotal}</span></li> <li>12337信访 <span>${dataItem.numTotal}</span></li>
</ul> </ul>
</div> </div>
@ -681,77 +681,56 @@ const colors = [
// 弹框整体 // 弹框整体
.tooltip { .tooltip {
position: relative; position: relative;
width: 169.88px; width: 160px;
height: 178px; height: 178px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
border: 1px solid #4E8FFF; border: 1px solid #4E8FFF;
margin: -10px -10px -10px -10px; margin: -10px -10px -10px -10px;
} }
//浏阳市局 ////浏阳市局
.tooltip-title { .tooltip-title {
width: 169.88px; width: 160px;
height: 43px; height: 43px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
box-shadow: inset 0px -1px 0px 0px #253755;
display: flex; display: flex;
justify-content: center; /* 水平居中 */ justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
text-align: center; /* 水平居中 */
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px;
border-bottom: 1px solid #253755; /* 设置下边框 */ border-bottom: 1px solid #253755; /* 设置下边框 */
} }
.tooltip-content { .tooltip-content {
width: 170px; width: 160px;
height: 132px; height: 133px;
//font-size: 11px; background: linear-gradient(180deg, #010457 0%, #031577 100%)
margin-top: -12px;
background: linear-gradient(180deg, #010457 0%, #031577 100%);
} }
.tooltip-content ul { .tooltip-content ul {
list-style-type: none; /* 移除默认的小圆点 */ list-style-type: none; /* 移除默认的小圆点 */
padding: 0; padding-left: 5px;
margin: 0;
} }
.tooltip-content ul li { .tooltip-content ul li {
margin-left: 5px; height: 26px;
height: 25px;
color: #597AE9; color: #597AE9;
font-size: 13px; font-weight: 400;
font-size: 14px;
} }
// 数字的span
.tooltip-ul span { .tooltip-ul span {
float: right; float: right;
width: 30px; width: 55px;
text-align: right;
margin-right: 15px;
color: #fff; color: #fff;
font-size: 13px; font-size: 14px;
} text-align: center; /* 水平居中 */
/* 小尖角 */
.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; /* 右边颜色，与背景颜色相同 */
} }
} }

1218
src/views/datav/SceneInsp.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save