suzhou-jichuang-lanhai
/
tcZz-big
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

清朗专项行动动态模块首行缩进

Browse Source
main
许宏杰 3 months ago
parent ed0e3957b6
commit bf02bd7c35
1 changed files with 245 additions and 234 deletions
Show Stats Download Patch File Download Diff File

405
src/views/privateOrder/ecosphere/components/componentRight.vue
Unescape View File

@ -160,10 +160,15 @@
</template> </template>
<script> <script>
window.JSZip = require('jszip') window.JSZip = require("jszip");
import { qlzxdtData } from './json' import { qlzxdtData } from "./json";
import { getreportNum } from '@/api/common' import { getreportNum } from "@/api/common";
import { zhuanxiang, managescreen, zhuanxiangInfo, reportbyyear } from '@/api/zongzhi/manage.js' import {
zhuanxiang,
managescreen,
zhuanxiangInfo,
reportbyyear,
} from "@/api/zongzhi/manage.js";
import { import {
listJbsjndfltj, listJbsjndfltj,
listQlzxxddt, listQlzxxddt,
@ -171,62 +176,62 @@ import {
listQlzxxdsjtj, listQlzxxdsjtj,
screenqinglang, screenqinglang,
} from "@/api/netManage/index.js"; } from "@/api/netManage/index.js";
import { echartsJump } from '../../../../../public/static/echartsJump' import { echartsJump } from "../../../../../public/static/echartsJump";
import { download } from "@/utils/safesoft" import { download } from "@/utils/safesoft";
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from "vue-seamless-scroll";
import image from '../../../../assets/ecosphere/饼图标注.png' import image from "../../../../assets/ecosphere/饼图标注.png";
import ModuleTitle from '../../common/ModuleTitle.vue' import ModuleTitle from "../../common/ModuleTitle.vue";
export default { export default {
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
ModuleTitle ModuleTitle,
}, },
data() { data() {
var ndate = new Date(); var ndate = new Date();
var nmonth = ndate.getMonth(); var nmonth = ndate.getMonth();
return { return {
imgList: [ imgList: [
{ url: require('@/assets/ecosphere/清朗专项行动图/1-1.png') }, { url: require("@/assets/ecosphere/清朗专项行动图/1-1.png") },
{ url: require('@/assets/ecosphere/清朗专项行动图/1-2.png') }, { url: require("@/assets/ecosphere/清朗专项行动图/1-2.png") },
{ url: require('@/assets/ecosphere/清朗专项行动图/1-3.png') }, { url: require("@/assets/ecosphere/清朗专项行动图/1-3.png") },
{ url: require('@/assets/ecosphere/清朗专项行动图/1-4.png') } { url: require("@/assets/ecosphere/清朗专项行动图/1-4.png") },
], ],
qlzxdtList: [], qlzxdtList: [],
number: 0, number: 0,
reportingTimer: null, reportingTimer: null,
pieData: [ pieData: [
{ value: 25, name: '上级下发' }, { value: 25, name: "上级下发" },
{ value: 4, name: '部门转办' }, { value: 4, name: "部门转办" },
{ value: 8, name: '小程序' }, { value: 8, name: "小程序" },
{ value: 4, name: '无效' } { value: 4, name: "无效" },
], ],
qlzfDataStatistics: [ qlzfDataStatistics: [
{ {
title: '处理有害信息数量(条)', title: "处理有害信息数量(条)",
data: [ data: [
{ {
name: nmonth + '月', name: nmonth + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 1) + '月', name: nmonth - 1 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 2) + '月', name: nmonth - 2 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 3) + '月', name: nmonth - 3 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 4) + '月', name: nmonth - 4 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 5) + '月', name: nmonth - 5 + "月",
num: 0 num: 0,
}, },
// { // {
// name: '8月', // name: '8月',
@ -252,35 +257,34 @@ export default {
// name: '3月', // name: '3月',
// num: 0 // num: 0
// } // }
],
]
}, },
{ {
title: '关闭直播平台违规账号(个)', title: "关闭直播平台违规账号(个)",
data: [ data: [
{ {
name: nmonth + '月', name: nmonth + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 1) + '月', name: nmonth - 1 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 2) + '月', name: nmonth - 2 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 3) + '月', name: nmonth - 3 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 4) + '月', name: nmonth - 4 + "月",
num: 0 num: 0,
}, },
{ {
name: (nmonth - 5) + '月', name: nmonth - 5 + "月",
num: 0 num: 0,
}, },
// { // {
// name: '8月', // name: '8月',
@ -306,9 +310,8 @@ export default {
// name: '3月', // name: '3月',
// num: 0 // num: 0
// } // }
],
] },
}
], ],
qlzfDialogFlag: false, qlzfDialogFlag: false,
eldialogData: null, eldialogData: null,
@ -316,7 +319,7 @@ export default {
wgptTotal: 0, wgptTotal: 0,
imgUrl: null, imgUrl: null,
zhuanxiangTotal: 0, zhuanxiangTotal: 0,
} };
}, },
computed: { computed: {
classOption() { classOption() {
@ -328,23 +331,23 @@ export default {
openWatch: true, // 开启数据实时监控刷新dom openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms) waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
} };
} },
}, },
created() {}, created() {},
destroyed() { destroyed() {
clearInterval(this.reportingTimer) clearInterval(this.reportingTimer);
clearInterval(this.time) clearInterval(this.time);
}, },
mounted() { mounted() {
// this.qlzxdtList = qlzxdtDatas // this.qlzxdtList = qlzxdtDatas
this.imgUrl = process.env.VUE_APP_BASE_API2 this.imgUrl = process.env.VUE_APP_BASE_API2;
// 开启定时器旋转 // 开启定时器旋转
this.reportingProcessTimer() this.reportingProcessTimer();
this.zhuanxiangList() // 清朗专项行动动态 this.zhuanxiangList(); // 清朗专项行动动态
this.managescreenData() // 行动数据统计 this.managescreenData(); // 行动数据统计
this.reportbyyearDate() // 举报事件年度分类统计 this.reportbyyearDate(); // 举报事件年度分类统计
// getreportNum().then(res => { // getreportNum().then(res => {
// this.pieData[0].value = res.data.reportTotalCount - 12 // this.pieData[0].value = res.data.reportTotalCount - 12
@ -355,63 +358,66 @@ export default {
async itemClick(e) { async itemClick(e) {
// console.log(this.qlzxdtList[e.target.dataset.curdata]) // console.log(this.qlzxdtList[e.target.dataset.curdata])
// let data = await zhuanxiangInfo(this.qlzxdtList[e.target.dataset.curdata].id) // let data = await zhuanxiangInfo(this.qlzxdtList[e.target.dataset.curdata].id)
getQlzxxddt(this.qlzxdtList[e.target.dataset.curdata].id).then(data=>{ getQlzxxddt(this.qlzxdtList[e.target.dataset.curdata].id).then((data) => {
let eldialogData = JSON.parse(JSON.stringify(data.data)) let eldialogData = JSON.parse(JSON.stringify(data.data));
eldialogData.imageUrl = eldialogData.imageUrl.split(',') eldialogData.imageUrl = eldialogData.imageUrl.split(",");
this.eldialogData = eldialogData this.eldialogData = eldialogData;
this.qlzfDialogFlag = true this.qlzfDialogFlag = true;
}) });
}, },
changeImg(item, index) { changeImg(item, index) {
item.index = index item.index = index;
}, },
// 清朗专项行动动态 // 清朗专项行动动态
async zhuanxiangList() { async zhuanxiangList() {
// let res = await zhuanxiang(); // let res = await zhuanxiang();
listQlzxxddt({isStatus:1}).then(res=>{ listQlzxxddt({ isStatus: 1 }).then((res) => {
let imgArr let imgArr;
this.qlzxdtList = JSON.parse(JSON.stringify(res.rows)) this.qlzxdtList = JSON.parse(JSON.stringify(res.rows));
for (let i = 0; i < this.qlzxdtList.length; i++) { for (let i = 0; i < this.qlzxdtList.length; i++) {
imgArr = this.qlzxdtList[i].imageUrl imgArr = this.qlzxdtList[i].imageUrl;
imgArr = imgArr.split(',') imgArr = imgArr.split(",");
this.qlzxdtList[i].imageUrl = imgArr[0] this.qlzxdtList[i].imageUrl = imgArr[0];
} }
}) });
}, },
// 行动数据统计 // 行动数据统计
async managescreenData() { async managescreenData() {
// let res = await managescreen() // let res = await managescreen()
screenqinglang().then(res=>{ screenqinglang()
let data1 = res.data .then((res) => {
let arr1 = [],arr2 = []; let data1 = res.data;
data1.forEach(item=>{ let arr1 = [],
arr2 = [];
data1.forEach((item) => {
let obj = {}; let obj = {};
let objTwo = {}; let objTwo = {};
obj.name = this.getDate(item.dateTime) obj.name = this.getDate(item.dateTime);
obj.num = item.count2; obj.num = item.count2;
objTwo.name = this.getDate(item.dateTime) objTwo.name = this.getDate(item.dateTime);
objTwo.num = item.count1; objTwo.num = item.count1;
arr2.push(obj) arr2.push(obj);
arr1.push(objTwo) arr1.push(objTwo);
});
return { arr1, arr2 };
}) })
return {arr1,arr2} .then((res) => {
}).then((res)=>{
// console.log(res,'res') // console.log(res,'res')
this.qlzfDataStatistics[1].data.map((item) => { this.qlzfDataStatistics[1].data.map((item) => {
res.arr2.map((arr) => { res.arr2.map((arr) => {
if (item.name == arr.name) { if (item.name == arr.name) {
item.num = arr.num item.num = arr.num;
} }
}) });
}) });
this.qlzfDataStatistics[0].data.map((item) => { this.qlzfDataStatistics[0].data.map((item) => {
res.arr1.map((arr) => { res.arr1.map((arr) => {
if (item.name == arr.name) { if (item.name == arr.name) {
item.num = arr.num item.num = arr.num;
} }
}) });
}) });
}) });
// listQlzxxdsjtj({isStatus:1}).then(res=>{ // listQlzxxdsjtj({isStatus:1}).then(res=>{
// let data = res.rows || [] // let data = res.rows || []
// let arr1 = [],arr2 = [] // let arr1 = [],arr2 = []
@ -448,8 +454,9 @@ export default {
async reportbyyearDate() { async reportbyyearDate() {
// let data = await reportbyyear(); // let data = await reportbyyear();
// let arr = [{name:'上级下发',value:''},{name:'部门转发',value:''},{name:'无效',value:''},{name:'小程序',value:''}] // let arr = [{name:'上级下发',value:''},{name:'部门转发',value:''},{name:'无效',value:''},{name:'小程序',value:''}]
let arr = [] let arr = [];
listJbsjndfltj().then(data=>{ listJbsjndfltj()
.then((data) => {
data.rows.forEach((item, index) => { data.rows.forEach((item, index) => {
// arr.forEach(item2=>{ // arr.forEach(item2=>{
// if(item.type == item2.name) { // if(item.type == item2.name) {
@ -459,15 +466,18 @@ export default {
let obj = {}; let obj = {};
obj.value = item.count; obj.value = item.count;
obj.name = item.type; obj.name = item.type;
arr.push(obj) arr.push(obj);
}) });
arr = arr.sort((a, b) => a.value < b.value ? 1 : a.value > b.value ? -1 : 0) arr = arr.sort((a, b) =>
a.value < b.value ? 1 : a.value > b.value ? -1 : 0
);
// obj.value = value; // obj.value = value;
// obj.name = '上级下发'; // obj.name = '上级下发';
}).then(res=>{
this.pieData = arr;
this.inItPie()
}) })
.then((res) => {
this.pieData = arr;
this.inItPie();
});
// let arr = [] // let arr = []
// for(let i = 0; i < data.data.length; i++){ // for(let i = 0; i < data.data.length; i++){
// let obj = {} // let obj = {}
@ -480,39 +490,39 @@ export default {
getDate(date) { getDate(date) {
// 2023-10-17 15:14:07 截取月份 // 2023-10-17 15:14:07 截取月份
// const result = /-(\d{2})-/.exec(date); // const result = /-(\d{2})-/.exec(date);
const result = date.split("-") const result = date.split("-");
if (result !== null && result.length > 1) { if (result !== null && result.length > 1) {
const month = result[1]; const month = result[1];
switch (month) { switch (month) {
case '01': case "01":
return '1月'; return "1月";
case '02': case "02":
return '2月'; return "2月";
case '03': case "03":
return '3月'; return "3月";
case '04': case "04":
return '4月'; return "4月";
case '05': case "05":
return '5月'; return "5月";
case '06': case "06":
return '6月'; return "6月";
case '07': case "07":
return '7月'; return "7月";
case '08': case "08":
return '8月'; return "8月";
case '09': case "09":
return '9月'; return "9月";
case '10': case "10":
return '10月'; return "10月";
case '11': case "11":
return '11月'; return "11月";
case '12': case "12":
return '12月'; return "12月";
default: default:
break; break;
} }
} else { } else {
console.log('没有找到月份'); console.log("没有找到月份");
} }
}, },
// 计算时间 // 计算时间
@ -548,51 +558,51 @@ export default {
// }, // },
// 饼图 // 饼图
inItPie() { inItPie() {
const chartDom = document.getElementById('pie') const chartDom = document.getElementById("pie");
const myChart = this.$echarts.init(chartDom) const myChart = this.$echarts.init(chartDom);
const optionSecond = { const optionSecond = {
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
emphasis: { emphasis: {
show: true, show: true,
formatter: '{fz41|{a}\n{az24|{b}个}', formatter: "{fz41|{a}\n{az24|{b}个}",
textStyle: { textStyle: {
rich: { rich: {
fz41: { fz41: {
fontSize: 41, fontSize: 41,
padding: [0, 5, 0, 0] padding: [0, 5, 0, 0],
}, },
fz24: { fz24: {
fontSize: 24 fontSize: 24,
}
}
}
}, },
color: ['#6bd3ff', '#2590fd', '#f6ff00', '#ffd616'], },
},
},
color: ["#6bd3ff", "#2590fd", "#f6ff00", "#ffd616"],
legend: { legend: {
orient: 'vertical', orient: "vertical",
icon: 'circle', icon: "circle",
left: '55%', left: "55%",
top: '10%', top: "10%",
itemGap: 50, itemGap: 50,
padding: 5, padding: 5,
formatter: (name) => { formatter: (name) => {
const data = this.pieData const data = this.pieData;
let target let target;
data.forEach((v) => { data.forEach((v) => {
if (v.name === name) { if (v.name === name) {
target = v.value + '件' target = v.value + "件";
} }
}) });
const arr = [ const arr = [
`{a|${name}}{b|${String(target).replace( `{a|${name}}{b|${String(target).replace(
/(\d)(?=(\d{3})+$)/g, /(\d)(?=(\d{3})+$)/g,
'$1,' "$1,"
)}}` )}}`,
] ];
return arr.join('\n') return arr.join("\n");
}, },
textStyle: { textStyle: {
rich: { rich: {
@ -600,96 +610,96 @@ export default {
width: 180, width: 180,
fontSize: 28, fontSize: 28,
// fontWeight: 'bold', // fontWeight: 'bold',
color: '#ffffff' color: "#ffffff",
}, },
b: { b: {
fontSize: 28, fontSize: 28,
color: 'rgba(251,232,79)', color: "rgba(251,232,79)",
backgroundColor: { backgroundColor: {
image: image image: image,
},
align: "center",
}, },
align: 'center'
}
}, },
fontSize: 18, fontSize: 18,
color: 'rgba(255, 255, 255, .5)' color: "rgba(255, 255, 255, .5)",
} },
}, },
series: [ series: [
{ {
name: '举报事件年度分类统计', name: "举报事件年度分类统计",
type: 'pie', type: "pie",
radius: ['55%', '78%'], radius: ["55%", "78%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
center: ['24%', '48%'], center: ["24%", "48%"],
label: { label: {
show: false, show: false,
position: 'center', position: "center",
formatter: (params) => { formatter: (params) => {
return `{a| ${params.name}} \n {b|${params.value}}` return `{a| ${params.name}} \n {b|${params.value}}`;
}, },
rich: { rich: {
a: { a: {
fontFamily: 'SourceHanSansCN-Regular', fontFamily: "SourceHanSansCN-Regular",
color: '#ffffff', color: "#ffffff",
fontSize: 28 fontSize: 28,
}, },
b: { b: {
fontFamily: 'DIN-Medium', fontFamily: "DIN-Medium",
color: '#6ddefb', color: "#6ddefb",
fontSize: 32, fontSize: 32,
lineHeight: 50 lineHeight: 50,
} },
} },
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: '25', fontSize: "25",
fontWeight: 'bold' fontWeight: "bold",
} },
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data: this.pieData data: this.pieData,
} },
] ],
} };
myChart.setOption(optionSecond, true) myChart.setOption(optionSecond, true);
echartsJump(myChart, optionSecond) echartsJump(myChart, optionSecond);
}, },
// 定时器旋转+字体颜色变 // 定时器旋转+字体颜色变
reportingProcessTimer() { reportingProcessTimer() {
let index = 0 let index = 0;
this.reportingTimer = setInterval(() => { this.reportingTimer = setInterval(() => {
this.number += 60 this.number += 60;
const content = document.getElementById('processRotate') const content = document.getElementById("processRotate");
content.style.transform = 'rotateZ(' + this.number + 'deg)' content.style.transform = "rotateZ(" + this.number + "deg)";
if (index === 5) { if (index === 5) {
document.getElementsByClassName( document.getElementsByClassName(
'processIcon' "processIcon"
)[0].children[0].children[1].style.color = '#fbe84f' )[0].children[0].children[1].style.color = "#fbe84f";
document.getElementsByClassName( document.getElementsByClassName(
'processIcon' "processIcon"
)[0].children[5].children[1].style.color = '#ffffff' )[0].children[5].children[1].style.color = "#ffffff";
} else { } else {
document.getElementsByClassName('processIcon')[0].children[ document.getElementsByClassName("processIcon")[0].children[
index + 1 index + 1
].children[1].style.color = '#fbe84f' ].children[1].style.color = "#fbe84f";
document.getElementsByClassName('processIcon')[0].children[ document.getElementsByClassName("processIcon")[0].children[
index index
].children[1].style.color = '#ffffff' ].children[1].style.color = "#ffffff";
} }
if (index > 4) { if (index > 4) {
index = 0 index = 0;
} else { } else {
index++ index++;
}
}, 4000)
}
}
} }
}, 4000);
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -1051,6 +1061,7 @@ export default {
margin-left: 61px; margin-left: 61px;
overflow: auto; overflow: auto;
text-align: justify; text-align: justify;
text-indent: 2em;
width: 736px; width: 736px;
padding-right: 23px; padding-right: 23px;
height: 528px; height: 528px;

Write Preview
Loading…
Cancel
Save