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

fix:区县总览大屏：1、总览数及地图详情参考市级大屏修改（现场督察、数字督察、案件核查、局长信箱、信访投诉、审计项目），2、其它统计图统一维度; fix:1、大屏名称改“监督管理” ;fix:1、隐藏“办结率” 2、右上角新增“登录客户端”入口，链接参考首页的视频督察 3、视频做轮播效果 4、总览数据参考市局大屏

main
pengwei 6 months ago
parent
14a7de0ec6
commit
9b7ad19a22
7 changed files with 170 additions and 153 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. 2
      src/components/datav/header.vue
  2. 8
      src/components/datav/statistic.vue
  3. 36
      src/views/datav/Global.vue
  4. 27
      src/views/datav/Jwpy.vue
  5. 29
      src/views/datav/VideoInsp.vue
  6. 105
      src/views/datav/subonedatav/SubOneGlobal.vue
  7. 116
      src/views/datav/subonedatav/SubOneVideoInsp.vue

2
src/components/datav/header.vue
Unescape View File

@ -7,7 +7,7 @@
<img :src="isActive ? Img2 : Img1" alt=""/> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/sceneInsp" v-slot="{ isActive }"> <router-link to="/datav/sceneInsp" v-slot="{ isActive }">
<span>督导检查</span> <span>监督管理</span>
<img :src="isActive ? Img2 : Img1" alt=""/> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/caseVerif" v-slot="{ isActive }"> <router-link to="/datav/caseVerif" v-slot="{ isActive }">

8
src/components/datav/statistic.vue
Unescape View File

@ -28,8 +28,12 @@ const props = defineProps({
}); });
const value = ref(props.value); const value = ref(props.value);
console.log(
value
)
watch(() => props.value, (val) => { watch(() => props.value, (val) => {
value.value = val; value.value = val || 0;
}) })
const outputValue = useTransition(value, { const outputValue = useTransition(value, {
duration: 1500, duration: 1500,
@ -77,4 +81,4 @@ const outputValue = useTransition(value, {
font-size: 27px; font-size: 27px;
} }
} }
</style> </style>

36
src/views/datav/Global.vue
Unescape View File

@ -296,31 +296,29 @@ const option = ref({
<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>${dataItem.totalPro}</span></li> <li>现场督察 <span>${dataItem.supervisePro || 0}</span></li>
<li>现场督导检查问题 <span>${dataItem.supervisePro}</span></li> <li>数字督察 <span>${dataItem.numSupervisionPro || 0}</span></li>
<li>数字督察检查问题<span>${dataItem.numSupervisePro}</span></li> <li>案件核查<span>${dataItem.caseVerificationPro || 0}</span></li>
<li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li> <li>局长信箱 <span>${dataItem.mailboxNumber || 0}</span></li>
<li>信访投诉问题 <span>${dataItem.mailPro}</span></li> <li>信访投诉 <span>${dataItem.complaintPro || 0}</span></li>
<li>民意感知问题 <span>${dataItem.policePro}</span></li> <li>审计项目 <span>${dataItem.auditPro || 0}</span></li>
<li>审计监督问题 <span>${dataItem.reviewPro}</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
} else { }
else {
return ` return `
<div class="tooltip"> <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>0000</span></li> <li>现场督察 <span>-</span></li>
<li>现场督导检查问题 <span>0000</span></li> <li>数字督察 <span>-</span></li>
<li>数字督导检查问题 <span>0000</span></li> <li>案件核查<span>-</span></li>
<li>案件核查问题 <span>0000</span></li> <li>局长信箱 <span>-</span></li>
<li>信访投诉问题 <span>0000</span></li> <li>信访投诉 <span>-</span></li>
<li>民意感知问题 <span>0000</span></li> <li>审计项目 <span>-</span></li>
<li>审计监督问题 <span>0000</span></li> </ul>
</ul>
</div> </div>
</div>`; </div>`;
} }
@ -461,6 +459,7 @@ const getAllGlobalCountData = async (timeValue = time.value) => {
const getGlobalMapData = async (timeValue = time.value) => { const getGlobalMapData = async (timeValue = time.value) => {
const res = await getGlobalMap(timeValue); const res = await getGlobalMap(timeValue);
const mappedData = mapOrgNameMapping(res.globalTempMapVoList, "totalPro"); const mappedData = mapOrgNameMapping(res.globalTempMapVoList, "totalPro");
console.log('mappedData',mappedData)
// 所有问题总数 // 所有问题总数
const maxItem = mappedData.reduce( const maxItem = mappedData.reduce(
(max, item) => (Number(item.value) > Number(max.value) ? item : max), (max, item) => (Number(item.value) > Number(max.value) ? item : max),
@ -470,6 +469,7 @@ const getGlobalMapData = async (timeValue = time.value) => {
const range80Percent = maxItem.value * 0.8; // 不用取整，小数也可以 const range80Percent = maxItem.value * 0.8; // 不用取整，小数也可以
globalTempMapVoList.value = mappedData; globalTempMapVoList.value = mappedData;
option.value.series[0].data = mappedData; option.value.series[0].data = mappedData;
console.log('mappedData',mappedData)
option.value.visualMap.pieces = [ option.value.visualMap.pieces = [
{ {
gte: 0, gte: 0,

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

@ -252,6 +252,7 @@
<v-charts <v-charts
:option="option4" :option="option4"
autoresize autoresize
ref="xmxfqk"
/> />
</div> </div>
</datav-card> </datav-card>
@ -268,19 +269,22 @@
<script setup> <script setup>
import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json"; import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import vCharts from "vue-echarts";
import { import {
GetBMYYBQS, GetCustomOffLineSonPeriodSet, GetBMYYBQS,
GetCustomOffLineSonPeriodSet,
GetDCQK, GetDCQK,
GetDITU, GetDITU,
GetDXFX, GetDXFX,
GetGLFW, GetGLFW,
GetMyPeriod, GetOffLineStatisticsSetList, GetMyPeriod,
GetOffLineStatisticsSetList,
GetRCSQQK, GetRCSQQK,
GetZHMYLPM, GetZHMYLPM,
GetZRSJXF, qx_get GetZRSJXF,
qx_get
} from "@/api/screen/jwpy.ts"; } from "@/api/screen/jwpy.ts";
import moment from "moment/moment"; import moment from "moment/moment";
import {selectDistribution} from "@/api/datav"; import {selectDistribution} from "@/api/datav";
@ -326,13 +330,12 @@ const time = ref([
]); ]);
const getDistributionFun = async()=>{ const getDistributionFun = async()=>{
console.log('---------') console.log('---------')
console.log("time",time.value)
const res = await selectDistribution(time.value); const res = await selectDistribution(time.value);
option4.value.series[0].data=res.total; option4.value.series[0].data=res.total;
option4.value.series[1].data=res.processing; option4.value.series[1].data=res.processing;
option4.value.series[2].data=res.total; // option4.value.series[2].data=res.checkStatus;
option4.value.yAxis.data=res.name; option4.value.yAxis.data=res.name;
console.log('option4',option4.value)
} }
@ -769,8 +772,9 @@ const option4 = ref({
// region 初始化 // region 初始化
onMounted(async () => { onMounted(async () => {
console.log('--------------')
await getDistributionFun(); await getDistributionFun();
console.log('-----end-------')
// 年 // 年
const resYears = await GetMyPeriod(); const resYears = await GetMyPeriod();
years.value = resYears.map(item => ({ years.value = resYears.map(item => ({
@ -863,11 +867,11 @@ async function getData() {
] ]
let groupData =temp.filter(item => item.SetName === "(省)县市考评" || item.SetName === "(省)区"); let groupData =temp.filter(item => item.SetName === "(省)县市考评" || item.SetName === "(省)区");
groupData= filterAndSortObjectsByName(groupData,orgSortArray) groupData = filterAndSortObjectsByName(groupData,orgSortArray)
tableData2.value=groupData; tableData2.value=groupData;
// tableData2.value = group2 // tableData2.value = group2
// tableData3.value = group3 // tableData3.value = group3
console.log('综合满意度排名.value', tableData1.value) console.log('综合满意度排名.value', tableData2.value)
}); });
// 不满意样本趋势 // 不满意样本趋势
@ -938,8 +942,7 @@ const filterAndSortObjectsByName = (objects, keywords) => {
return keywordIndexMap[keywordA] - keywordIndexMap[keywordB]; return keywordIndexMap[keywordA] - keywordIndexMap[keywordB];
}; };
// 对过滤后的对象数组进行排序 // 对过滤后的对象数组进行排序
const sortedObjects = filteredObjects.sort(sortFunction); return filteredObjects.sort(sortFunction);
return sortedObjects;
}; };
// endregion // endregion

29
src/views/datav/VideoInsp.vue
Unescape View File

@ -107,12 +107,6 @@
title="问责人次" title="问责人次"
style="width: 20%" style="width: 20%"
/> />
<!-- <datav-statistic-->
<!-- :value="overview.completionRate"-->
<!-- value-unit="%"-->
<!-- title="办结率"-->
<!-- style="width: 20%"-->
<!-- />-->
</div> </div>
<v-charts <v-charts
style="height: 420px" style="height: 420px"
@ -863,22 +857,21 @@ img {
list-style-type: none; /* 移除默认的小圆点 */ list-style-type: none; /* 移除默认的小圆点 */
padding: 0; padding: 0;
} }
.tooltip-content ul li { .tooltip-content ul li {
margin-left: 5px; display: flex;
height: 25px; justify-content: space-around;
color: #597ae9; height: 26px;
font-size: 13px; color: #597AE9;
font-weight: 400;
font-size: 14px;
} }
// 数字的span
.tooltip-ul span { .tooltip-ul span {
float: right; display: inline-block;
width: 30px; float: right;
text-align: right; color: #fff;
margin-right: 15px; font-size: 14px;
color: #fff; //text-align: center; /* 水平居中 */
font-size: 13px;
} }
/* 小尖角 */ /* 小尖角 */

105
src/views/datav/subonedatav/SubOneGlobal.vue
Unescape View File

@ -44,39 +44,39 @@
/> />
</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">
<datav-statistic <datav-statistic
:value="overview.totalPro" :value="overviewData.supervisionPro"
title="问题总数" :title="`现场督察`"
style="width: 13.66%; margin-left: 20px" style="width: 20%;"
/> />
<datav-statistic <datav-statistic
:value="overview.supervisionPro" :value="overviewData.numSupervisionPro"
title="督导检查问题" :title="`数字督察`"
style="width: 13.66%; margin-left: 30px" style="width: 20%;"
/> />
<datav-statistic <datav-statistic
:value="overview.caseVerificationPro" :value="overviewData.caseVerificationPro"
title="案件核查问题" :title="`案件核查`"
style="width: 13.66%; margin-left: 30px" style="width: 20%; margin-left: 10px"
/> />
<datav-statistic <datav-statistic
:value="overview.complaintPro" :value="overviewData.mailboxNumber"
title="信访投诉问题" :title="`局长信箱`"
style="width: 13.66%; margin-left: 30px" style="width: 20%; margin-left: 10px"
/> />
<datav-statistic <datav-statistic
:value="overview.talkPro" :value="overviewData.complaintPro"
title="民意感知问题" :title="`信访投诉`"
style="width: 13.66%; margin-left: 30px" style="width: 20%; margin-left: 10px"
/> />
<datav-statistic <datav-statistic
:value="overview.auditPro" :value="overviewData.auditPro"
title="审计监督问题" :title="`审计项目`"
style="width: 13.66%; margin-left: 10px" style="width: 20%; margin-left: 10px"
/> />
</div> </div>
<div id="map"> <div id="map">
@ -172,15 +172,17 @@ const fxsjlist = ref([]); // 分县市区机构问题排名
const jsdwlist = ref([]); // 局属单位机构问题排名 const jsdwlist = ref([]); // 局属单位机构问题排名
const ywzblist = ref([]); // 业务类型占比 const ywzblist = ref([]); // 业务类型占比
const wtlxlist = ref([]); // 问题涉及方面分布 const wtlxlist = ref([]); // 问题涉及方面分布
const tcwtlist = ref([]); // 突出问题排名 const tcwtlist = ref([]);// 突出问题排名
const overview = ref({ let overviewData = ref({
totalPro: 0, totalPro: 0,
supervisionPro: 0, supervisionPro: 0,
numSupervisionPro:0,
caseVerificationPro: 0, caseVerificationPro: 0,
complaintPro: 0, complaintPro: 0,
talkPro: 0, talkPro: 0,
auditPro: 0, auditPro: 0,
}); // 中央的概况数据 mailboxNumber: 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"),
@ -189,7 +191,7 @@ const globalTempMapVoList = ref([]); // 地图临时数据
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份 const selectedYear = ref('2025'); // 当前选中的年份
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@ -261,19 +263,19 @@ const option = ref({
position: 'bottom', position: 'bottom',
formatter: function (params) { formatter: function (params) {
const dataItem = globalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项 const dataItem = globalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
// console.log("Data item:", dataItem); console.log("Data item:", dataItem);
if (dataItem.name === params.name) { if (dataItem.name === params.name) {
return ` return `
<div class="tooltip"> <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>${dataItem.totalPro}</span></li> <li>现场督察 <span>${dataItem.supervisePro || 0}</span></li>
<li>督导检查问题 <span>${dataItem.supervisePro}</span></li> <li>数字督察 <span>${dataItem.numSupervisionPro || 0}</span></li>
<li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li> <li>案件核查<span>${dataItem.caseVerificationPro || 0}</span></li>
<li>信访投诉问题 <span>${dataItem.mailPro}</span></li> <li>局长信箱 <span>${dataItem.mailboxNumber || 0}</span></li>
<li>民意感知问题 <span>${dataItem.policePro}</span></li> <li>信访投诉 <span>${dataItem.complaintPro || 0}</span></li>
<li>审计监督问题 <span>${dataItem.reviewPro}</span></li> <li>审计项目 <span>${dataItem.auditPro || 0}</span></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -283,13 +285,13 @@ const option = ref({
<div class="tooltip"> <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>-</span></li> <li>现场督察 <span>-</span></li>
<li>督导检查问题 <span>-</span></li> <li>数字督察 <span>-</span></li>
<li>案件核查问题 <span>-</span></li> <li>案件核查<span>-</span></li>
<li>信访投诉问题 <span>-</span></li> <li>局长信箱 <span>-</span></li>
<li>民意感知问题 <span>-</span></li> <li>信访投诉 <span>-</span></li>
<li>审计监督问题 <span>-</span></li> <li>审计项目 <span>-</span></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -429,11 +431,11 @@ const getOrganizationProRankData = async (departId = currentDepartId, timeValue
} }
const getBusinessRateData = async (departId = currentDepartId, timeValue = time.value) => { const getBusinessRateData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneBusinessRate(departId, timeValue); const res = await getSubOneBusinessRate(departId, timeValue);
ywzblist.value = res.ywzblist; ywlxPieOption.value.series[0].data = res.ywzblist;
} }
const getAllGlobalCountData = async (departId = currentDepartId, timeValue = time.value) => { const getAllGlobalCountData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneAllCount(departId, timeValue); const res = await getSubOneAllCount(departId, timeValue);
overview.value = res.overview; overviewData.value = res.overview;
} }
const getSubOneGlobalMapIcon = async (departId = currentDepartId, timeValue = time.value) => { const getSubOneGlobalMapIcon = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneGlobalMap(departId, timeValue) const res = await getSubOneGlobalMap(departId, timeValue)
@ -443,10 +445,12 @@ const getSubOneGlobalMapIcon = async (departId = currentDepartId, timeValue = ti
value: item.totalPro, value: item.totalPro,
}; };
}); });
const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]); const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]);
const range60Percent = maxItem.value * 0.6 // 不用取整，小数也可以 const range60Percent = maxItem.value * 0.6 // 不用取整，小数也可以
const range80Percent = maxItem.value * 0.8 // 不用取整，小数也可以 const range80Percent = maxItem.value * 0.8 // 不用取整，小数也可以
globalTempMapVoList.value = mappedData; globalTempMapVoList.value = mappedData;
console.log('globalTempMapVoList', globalTempMapVoList.value)
option.value.series[0].data = globalTempMapVoList; option.value.series[0].data = globalTempMapVoList;
option.value.visualMap.pieces = [ option.value.visualMap.pieces = [
{gte: 0, lte: range60Percent, label: "低于最大问题的60%", color: "#4987F6"}, {gte: 0, lte: range60Percent, label: "低于最大问题的60%", color: "#4987F6"},
@ -497,11 +501,14 @@ const handleMouseLeave = () => {
}, 3000); }, 3000);
}; };
// 业务类型占比环形图 //todo 业务类型占比环形图
const subOneYwlxzbCircularAnimation = () => { const subOneYwlxzbCircularAnimation = () => {
const ywlxzbOptionTemp = subOneYwlxzbOption?.value?.chart; const ywlxzbOptionTemp = subOneYwlxzbOption?.value?.chart;
// ywzblist.value
if (!ywlxzbOptionTemp) return; if (!ywlxzbOptionTemp) return;
const length = ywlxPieOption.value.series[0].data.length; const length = ywlxPieOption.value.series[0].data.length;
const randomNum = Math.floor(Math.random() * length); const randomNum = Math.floor(Math.random() * length);
ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0}); ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0});
ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
@ -562,6 +569,7 @@ subOneWtlxPieCircularIntervalId = setInterval(subOneWtlxzbCircularAnimation, 200
onMounted(() => { onMounted(() => {
getData(); getData();
setupEventListeners(); setupEventListeners();
selectedYear.value= currentYear.toString()
}); });
// endregion // endregion
@ -663,8 +671,9 @@ const handleClick = (params) => {
.tooltip-content { .tooltip-content {
width: 160px; width: 160px;
height: 150px; height: 155px;
background: linear-gradient(180deg, #010457 0%, #031577 100%) background: linear-gradient(180deg, #010457 0%, #031577 100%);
} }
.tooltip-content ul { .tooltip-content ul {
@ -672,23 +681,21 @@ const handleClick = (params) => {
padding-left: 5px; padding-left: 5px;
margin: 0; margin: 0;
} }
.tooltip-content ul li { .tooltip-content ul li {
height: 24px; display: flex;
justify-content: space-around;
height: 26px;
color: #597AE9; color: #597AE9;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
//// 数字的span
.tooltip-ul span { .tooltip-ul span {
display: inline-block;
float: right; float: right;
width: 55px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
text-align: center; /* 水平居中 */ //text-align: center; /* 水平居中 */
} }

116
src/views/datav/subonedatav/SubOneVideoInsp.vue
Unescape View File

@ -5,7 +5,7 @@
<main> <main>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="内部视频"> <datav-card title="内部视频" sub-title="登录客户端" :titleClick="titleClickFun">
<div class="row mt-4 mb-20"> <div class="row mt-4 mb-20">
<div class="col col-8"> <div class="col col-8">
<label>视频总数</label> <label>视频总数</label>
@ -76,34 +76,33 @@
<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">
<datav-statistic <datav-statistic
:value="overview.discoverProblem" :value="overview.total"
title="发现问题数" title="问题数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="overview.completionProblem" :value="overview.completionProblem"
title="办结问题数" title="办结问题数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="overview.relativeOrg" :value="overview.discoverProblem"
title="涉及单位数" title="查实问题数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="overview.relativePer" :value="overview.relativeOrg"
title="涉及人数" title="问责单位数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="overview.completionRate" :value="overview.relativePer"
value-unit="%" title="问责人次"
title="办结率" style="width: 20%"
style="width: 20%" />
/> </div>
</div>
<v-charts <v-charts
style="height: 420px" style="height: 420px"
:option="option" :option="option"
@ -200,7 +199,7 @@ import {
getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemRank,
getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseProblemTypeRate,
getSubOneVideoSuperviseTrend, getSubOneVideoSuperviseTrend,
} from "@/api/screen/subScreen/subOneVideoSupervise.ts"; } from "@/api/screen/subScreen/subOneVideoSupervise.ts";
import { import {
getVideoStatus, getVideoStatus,
@ -357,11 +356,10 @@ const option = ref({
<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>${dataItem.discoverProblem}</span></li> <li>查实问题数 <span>${dataItem.discoverProblem || 0}</span></li>
<li>办结问题数 <span>${dataItem.completionProblem}</span></li> <li>办结问题数 <span>${dataItem.completionProblem || 0}</span></li>
<li>涉及单位数 <span>${dataItem.relativeOrg}</span></li> <li>涉及单位数 <span>${dataItem.relativeOrg || 0}</span></li>
<li>涉及人数 <span>${dataItem.relativePer}</span></li> <li>涉及人数 <span>${dataItem.relativePer || 0}</span></li>
<li>办结率 <span>${dataItem.completionRate}%</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
@ -370,11 +368,10 @@ const option = ref({
<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>-</span></li> <li>查实问题数 <span>-</span></li>
<li>办结问题数 <span>-</span></li> <li>办结问题数 <span>-</span></li>
<li>涉及单位数 <span>-</span></li> <li>涉及单位数 <span>-</span></li>
<li>涉及人数 <span>-</span></li> <li>涉及人数 <span>-</span></li>
<li>办结率 <span>-</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
@ -466,6 +463,10 @@ const getSubOneAllVideoSuperviseCountData = async (departId, timeValue) => {
const res = await getSubOneAllVideoSuperviseCount(departId, timeValue); const res = await getSubOneAllVideoSuperviseCount(departId, timeValue);
overview.value = res.overview; overview.value = res.overview;
}; };
//跳转客户端
const titleClickFun =()=>{
window.open("http://65.47.26.34")
}
const getSubOneVideoSuperviseMapData = async (departId, timeValue) => { const getSubOneVideoSuperviseMapData = async (departId, timeValue) => {
const res = await getSubOneVideoSuperviseMap(departId, timeValue); const res = await getSubOneVideoSuperviseMap(departId, timeValue);
const mappedData = res.videoSuperviseMapIconVoList.map((item) => { const mappedData = res.videoSuperviseMapIconVoList.map((item) => {
@ -724,11 +725,20 @@ onMounted(() => {
}) })
}); });
const activeVideoIndex = ref(0); const activeVideoIndex = ref(0);
function handlePlay(item, index) { function handlePlay(item, index) {
activeVideoIndex.value = index; activeVideoIndex.value = index;
activeUrl.value = item.videoUrl; activeUrl.value = item.videoUrl;
} }
//视频循环
setInterval(()=>{
activeVideoIndex.value = (parseInt(activeVideoIndex.value) % videos.value.length + 1) || 0
activeUrl.value=videos?.value[parseInt(activeVideoIndex.value) % videos.value.length - 1].videoUrl;
},3000)
const videoInspections = ref([]); const videoInspections = ref([]);
async function getVideoInspection() { async function getVideoInspection() {
@ -863,22 +873,22 @@ img {
padding: 0; padding: 0;
} }
.tooltip-content ul li { .tooltip-content ul li {
margin-left: 5px; display: flex;
height: 25px; justify-content: space-around;
color: #597ae9; height: 26px;
font-size: 13px; color: #597AE9;
} font-weight: 400;
font-size: 14px;
}
// 数字的span .tooltip-ul span {
.tooltip-ul span { display: inline-block;
float: right; float: right;
width: 30px; color: #fff;
text-align: right; font-size: 14px;
margin-right: 15px; //text-align: center; /* 水平居中 */
color: #fff; }
font-size: 13px;
}
/* 小尖角 */ /* 小尖角 */
.tooltip::before { .tooltip::before {
@ -919,4 +929,4 @@ img {
width: 90px; width: 90px;
color: #fff; color: #fff;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save