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

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

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

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

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

Write Preview
Loading…
Cancel
Save