You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1490 lines
57 KiB
1490 lines
57 KiB
<template>
|
|
<!-- 村级大屏 -->
|
|
<div class="eb-container" ref="appRef">
|
|
<MainTitle class="title" :title="title"></MainTitle>
|
|
<div class="main">
|
|
<div class="left-box">
|
|
<div class="content-one">
|
|
<div class="title-box-samll">
|
|
<span>基本概况</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<div
|
|
class="base-item"
|
|
v-for="(item, index) in baseInfoList"
|
|
:key="index"
|
|
>
|
|
<img
|
|
:src="item.icon"
|
|
style="width: 60px; height: 60px"
|
|
/>
|
|
<div class="base-data-box">
|
|
<div class="base-data-title">
|
|
{{ item.label }}
|
|
</div>
|
|
<div class="base-data-text">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="Number(item.value)"
|
|
:duration="2000"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-two">
|
|
<div class="title-box-samll">
|
|
<span>民生服务</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
<div
|
|
class="data-item-box"
|
|
v-for="(item, index) in swNumList"
|
|
:key="index"
|
|
>
|
|
<div class="data-item-icon">
|
|
<img
|
|
:src="item.icon"
|
|
style="width: 56px; height: 50px"
|
|
/>
|
|
</div>
|
|
<div class="data-item-desc">
|
|
<div
|
|
class="data-item-title"
|
|
style="font-weight: bolder"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="data-item-number">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="item.number"
|
|
:duration="2000"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mini-title-box">
|
|
<div class="point"></div>
|
|
<div class="title-text">事件上报数据统计</div>
|
|
</div>
|
|
<div class="alarm-info-box">
|
|
<div
|
|
class="alarm-item"
|
|
v-for="(item, index) in alarmInfoList"
|
|
:key="index"
|
|
>
|
|
<div style="margin-top: 2px">
|
|
<img
|
|
:src="item.icon"
|
|
style="width: 48px; height: 50px"
|
|
/>
|
|
</div>
|
|
<div class="alarm-data-box">
|
|
<div
|
|
class="alarm-data-title"
|
|
:style="{ color: item.color }"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="alarm-data-text">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="item.number"
|
|
:duration="2000"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart2" id="chart2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center-box">
|
|
<div class="title-box-medium" style="width: 100%">
|
|
<span>宣传一览</span>
|
|
</div>
|
|
<div class="video-box" v-if="urlType == '0'">
|
|
<commonLivePlayer
|
|
:videoUrl="videoUrl"
|
|
:loop="true"
|
|
:muted="false"
|
|
></commonLivePlayer>
|
|
</div>
|
|
<Carousel v-else v-model="imgIndex" style="width: 880px; height: 495px;" loop>
|
|
<CarouselItem>
|
|
<img v-for="(item, index) in videoUrl" :key="index" :src="item" style="width: 880px; height: 495px;" />
|
|
</CarouselItem>
|
|
</Carousel>
|
|
<div class="center-bottom">
|
|
<div class="center-bottom-box">
|
|
<div class="title-box-samll" style="width: 100%">
|
|
<span>人员结构</span>
|
|
</div>
|
|
<div class="content-info" id="chart3"></div>
|
|
</div>
|
|
<div class="center-bottom-box">
|
|
<div class="title-box-samll" style="width: 100%">
|
|
<span>特殊人群</span>
|
|
</div>
|
|
<div class="content-info" id="chart4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<div class="content-three">
|
|
<div class="title-box-samll">
|
|
<span>组织概况</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<vue-seamless-scroll
|
|
:data="leaderList"
|
|
:class-option="leaderOption"
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
|
>
|
|
<div style="height: 100%; display: flex">
|
|
<div
|
|
class="data-item"
|
|
v-for="(item, index) in leaderList"
|
|
:key="index"
|
|
>
|
|
<img :src="item.image" />
|
|
<div class="info-box">
|
|
<span>姓名:</span>
|
|
<span>{{ item.name }}</span>
|
|
<span>职务:</span>
|
|
<span>{{ item.job }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
<div class="content-four">
|
|
<div class="title-box-samll">
|
|
<span>产业发展</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<div class="info-item">
|
|
<div class="item-value">
|
|
<countTo
|
|
class="number"
|
|
:startVal="startVal"
|
|
:endVal="
|
|
parseFloat(baseInfo.specialtyCatering)
|
|
"
|
|
:decimals="2"
|
|
:duration="2000"
|
|
></countTo>
|
|
</div>
|
|
<div>
|
|
<img
|
|
:src="
|
|
require('@/assets/largeScreen/nysc.png')
|
|
"
|
|
style="width: 75px"
|
|
/>
|
|
</div>
|
|
<div class="item-name">农业总产值(亿元)</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="item-value">
|
|
<countTo
|
|
class="number"
|
|
:startVal="startVal"
|
|
:endVal="
|
|
parseFloat(baseInfo.featuredHomestays)
|
|
"
|
|
:decimals="2"
|
|
:duration="2000"
|
|
></countTo>
|
|
</div>
|
|
<div>
|
|
<img
|
|
:src="
|
|
require('@/assets/largeScreen/gysc.png')
|
|
"
|
|
style="width: 75px"
|
|
/>
|
|
</div>
|
|
<div class="item-name">工业总产值(亿元)</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="item-value">
|
|
<countTo
|
|
class="number"
|
|
:startVal="startVal"
|
|
:decimals="2"
|
|
:endVal="parseFloat(baseInfo.scenicSpots)"
|
|
:duration="2000"
|
|
></countTo>
|
|
</div>
|
|
<div>
|
|
<img
|
|
:src="
|
|
require('@/assets/largeScreen/sysc.png')
|
|
"
|
|
style="width: 75px"
|
|
/>
|
|
</div>
|
|
<div class="item-name">商业总产值(亿元)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-five">
|
|
<div class="title-box-samll">
|
|
<span>最新公告</span>
|
|
</div>
|
|
<div class="content-info" @click="openContent($event)">
|
|
<vue-seamless-scroll
|
|
:data="newContentList"
|
|
:class-option="contentOption"
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
|
>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
"
|
|
>
|
|
<div
|
|
class="list-item"
|
|
v-for="(item, index) in newContentList"
|
|
:data-obj="index"
|
|
:key="index"
|
|
>
|
|
<img :src="item.coverImage" />
|
|
<div class="info-box">
|
|
<span class="title">{{
|
|
item.title
|
|
}}</span>
|
|
<span class="time">{{
|
|
item.publishTime
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-bottom-bg"></div>
|
|
<div class="page-left-bg"></div>
|
|
<div class="page-right-bg"></div>
|
|
<commonModal
|
|
v-model="detailModal"
|
|
:title="detailInfo.title"
|
|
@close="detailModal = false"
|
|
:width="1000"
|
|
>
|
|
<div class="content-box">
|
|
<!-- <div class="content-title">{{detailInfo.title}}</div>-->
|
|
<div style="display: flex">
|
|
<div style="font-size: 16px; margin-right: 20px">
|
|
发布时间：{{ detailInfo.publishTime }}
|
|
</div>
|
|
<div style="font-size: 16px">
|
|
发布单位：{{ detailInfo.createBy }}
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%" v-if="detailInfo.contentType == '0'">
|
|
<span
|
|
style="
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
"
|
|
>简介:</span
|
|
>
|
|
<div class="content-desc" v-html="detailInfo.content"></div>
|
|
</div>
|
|
<div style="width: 100%" v-if="detailInfo.contentType == '1'">
|
|
<span
|
|
style="
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
"
|
|
>图集:</span
|
|
>
|
|
<Carousel
|
|
style="width: 100%; height: 540px"
|
|
autoplay
|
|
v-model="imgListIndex"
|
|
loop
|
|
>
|
|
<CarouselItem
|
|
v-for="(item, index) in detailInfo.imageList"
|
|
:key="index"
|
|
>
|
|
<img
|
|
:src="item"
|
|
alt=""
|
|
style="width: 100%; height: 540px"
|
|
/>
|
|
</CarouselItem>
|
|
</Carousel>
|
|
</div>
|
|
<div style="width: 100%" v-if="detailInfo.contentType == '2'">
|
|
<span
|
|
style="
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
"
|
|
>视频:</span
|
|
>
|
|
<LivePlayer
|
|
:videoUrl="detailInfo.mediaUrl"
|
|
autoplay
|
|
:muted="false"
|
|
></LivePlayer>
|
|
</div>
|
|
</div>
|
|
</commonModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useIndex } from "../../utils/utilsDramAdmin";
|
|
import MainTitle from "./components/MainTitle.vue";
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import LivePlayer from "@liveqing/liveplayer";
|
|
import commonModal from "@/views/common-components/common-modal.vue";
|
|
import commonLivePlayer from "@/views/common-components/common-live-player.vue";
|
|
|
|
import * as echarts from "echarts";
|
|
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
|
|
|
|
import countTo from "vue-count-to";
|
|
|
|
export default {
|
|
name: "VillageScreen",
|
|
components: {
|
|
MainTitle,
|
|
vueSeamlessScroll,
|
|
LivePlayer,
|
|
countTo,
|
|
commonModal,
|
|
commonLivePlayer
|
|
},
|
|
data() {
|
|
return {
|
|
title: "示范村信息服务",
|
|
detailModal: false,
|
|
detailInfo: {},
|
|
areaCode: window.$localStorage.getItem("areaCode"),
|
|
videoUrl: "",
|
|
startVal: 0,
|
|
baseInfoList: [],
|
|
baseIconList: [
|
|
{
|
|
icon: require("@/assets/xczl/xczl-icon1.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/xczl/gdmj-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/xczl/zhs-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/xczl/zrk-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/xczl/hjrk-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/xczl/czrk-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/xczl/rjnsr-icon.png"),
|
|
},
|
|
],
|
|
swNumList: [
|
|
{
|
|
icon: require("@/assets/largeScreen/dwgk.png"),
|
|
name: "党务公开",
|
|
number: 0,
|
|
},
|
|
{
|
|
icon: require("@/assets/largeScreen/cunwgk.png"),
|
|
name: "村务公开",
|
|
number: 0,
|
|
},
|
|
{
|
|
icon: require("@/assets/largeScreen/caiwgk.png"),
|
|
name: "财务公开",
|
|
number: 0,
|
|
},
|
|
],
|
|
alarmInfoList: [
|
|
{
|
|
icon: require("@/assets/largeScreen/ycl.png"),
|
|
color: "green",
|
|
name: "已办理(项)",
|
|
number: "0",
|
|
},
|
|
{
|
|
icon: require("@/assets/largeScreen/wcl.png"),
|
|
color: "red",
|
|
name: "未办理(项)",
|
|
number: "0",
|
|
},
|
|
],
|
|
leaderList: [],
|
|
baseInfo: {
|
|
specialtyCatering: "0",
|
|
featuredHomestays: "0",
|
|
scenicSpots: "0",
|
|
},
|
|
newContentList: [],
|
|
leaderOption: {
|
|
step: 0.3, // 数值越大速度滚动越快
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
},
|
|
contentOption: {
|
|
step: 0.3, // 数值越大速度滚动越快
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
},
|
|
urlType: "0",
|
|
imgIndex: 0
|
|
};
|
|
},
|
|
computed: {},
|
|
created() {
|
|
let query = this.$route.query;
|
|
if (query) {
|
|
this.areaCode = query.areaCode;
|
|
this.title = query.areaName + "信息服务";
|
|
}
|
|
},
|
|
mounted() {
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
|
calcRate();
|
|
windowDraw();
|
|
this.getThreeOpenInfo();
|
|
// 获取基本信息
|
|
this.initDataInfo("villageBaseInfo", (data) => {
|
|
this.baseInfoList = data.map((item, index) => {
|
|
item.icon = this.baseIconList[index].icon;
|
|
return item;
|
|
});
|
|
});
|
|
// 获取产业发展
|
|
this.initDataInfo("villageDevlopment", (data) => {
|
|
if (data && data.length > 0) {
|
|
this.baseInfo.specialtyCatering = data[0].value;
|
|
this.baseInfo.featuredHomestays = data[1].value;
|
|
this.baseInfo.scenicSpots = data[2].value;
|
|
}
|
|
});
|
|
// 获取人员结构
|
|
this.initDataInfo("villagePerson", (data) => {
|
|
if (data && data.length > 0) {
|
|
let xdata = data.map((item) => item.label);
|
|
let ydata = data.map((item) => Number(item.value));
|
|
this.initChart3(xdata, ydata);
|
|
}
|
|
});
|
|
// 获取特殊人群
|
|
this.initDataInfo("villagePersonSpecial", (data) => {
|
|
if (data && data.length > 0) {
|
|
let xdata = data.map((item) => item.label);
|
|
let ydata = data.map((item) => {
|
|
return {
|
|
name: item.label,
|
|
value: Number(item.value),
|
|
};
|
|
});
|
|
let total = 0;
|
|
data.forEach((item) => {
|
|
total += Number(item.value);
|
|
});
|
|
this.initChart4(xdata, ydata, total);
|
|
}
|
|
});
|
|
this.getEventNum();
|
|
this.queryLeaderInfo();
|
|
this.queryContentInfo();
|
|
this.queryVideoInfo()
|
|
},
|
|
beforeDestroy() {
|
|
echartsClear();
|
|
},
|
|
methods: {
|
|
getVillOpen() {
|
|
let xdata = ["2024-07", "2024-08", "2024-09"];
|
|
let ydata1 = [10, 12, 11];
|
|
let ydata2 = [10, 12, 11];
|
|
let ydata3 = [10, 12, 11];
|
|
this.initChart2(xdata, ydata1, ydata2, ydata3);
|
|
},
|
|
getPersonData() {
|
|
let xdata = ["0-6岁", "7-17岁", "18-45岁", "46-59岁", "60岁及以上"];
|
|
let ydata = [100, 110, 200, 400, 300];
|
|
this.initChart3(xdata, ydata);
|
|
},
|
|
getSpecialPerson() {
|
|
let data = [
|
|
{
|
|
name: "优抚对象",
|
|
value: 337,
|
|
},
|
|
{
|
|
name: "城市地保人员",
|
|
value: 121,
|
|
},
|
|
{
|
|
name: "特困人员",
|
|
value: 280,
|
|
},
|
|
{
|
|
name: "一级残疾",
|
|
value: 213,
|
|
},
|
|
{
|
|
name: "低保人员",
|
|
value: 1077,
|
|
},
|
|
{
|
|
name: "二级残疾",
|
|
value: 391,
|
|
},
|
|
];
|
|
this.initChart4(data);
|
|
},
|
|
initChart2(xdata, ydata1, ydata2, ydata3) {
|
|
let myChart = echarts.init(document.getElementById("chart2"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: "2%",
|
|
right: "4%",
|
|
bottom: "4%",
|
|
top: "16%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
data: ["党务", "财务", "村务"],
|
|
right: 1,
|
|
top: 1,
|
|
textStyle: {
|
|
color: "#99A8BD",
|
|
fontSize: 12,
|
|
},
|
|
itemWidth: 14,
|
|
itemHeight: 10,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: xdata,
|
|
axisLine: {
|
|
lineStyle: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#6A989E",
|
|
},
|
|
},
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontFamily: "Microsoft YaHei",
|
|
color: "#ffffff", // x轴颜色
|
|
fontWeight: "normal",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
minInterval: 1,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(135,140,147,1)", //左侧显示线
|
|
type: "dashed",
|
|
width: 0.5,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
color: "#ffffff",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "党务",
|
|
type: "bar",
|
|
barWidth: "14",
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.7,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "blue",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#7EC0EE",
|
|
},
|
|
]
|
|
),
|
|
barBorderRadius: 0,
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: ["-18", "-18"],
|
|
color: "#00f8ff",
|
|
fontSize: 12,
|
|
},
|
|
data: ydata1,
|
|
},
|
|
{
|
|
name: "财务",
|
|
type: "bar",
|
|
barWidth: "14",
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.7,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#FF2246",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#FFC0CB",
|
|
},
|
|
]
|
|
),
|
|
barBorderRadius: 0,
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: ["18", "-18"],
|
|
color: "#00f8ff",
|
|
fontSize: 12,
|
|
},
|
|
data: ydata2,
|
|
},
|
|
{
|
|
name: "村务",
|
|
type: "bar",
|
|
barWidth: "14",
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.7,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#efbe0a",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#fff9c0",
|
|
},
|
|
]
|
|
),
|
|
barBorderRadius: 0,
|
|
},
|
|
},
|
|
data: ydata3,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xdata.length);
|
|
},
|
|
initChart3(xdata, ydata) {
|
|
let myChart = echarts.init(document.getElementById("chart3"));
|
|
let option = {
|
|
color: ["#3398DB"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
params[0].axisValue +
|
|
"<br/>人数：" +
|
|
params[0].data +
|
|
"人"
|
|
);
|
|
},
|
|
},
|
|
grid: {
|
|
left: "2%",
|
|
right: "5%",
|
|
bottom: "5%",
|
|
top: "7%",
|
|
containLabel: true,
|
|
z: 22,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(135,140,147,0.8)", //左侧显示线
|
|
type: "dashed",
|
|
width: 0.5,
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
],
|
|
yAxis: {
|
|
type: "category",
|
|
gridIndex: 0,
|
|
data: xdata,
|
|
inverse: true,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
formatter: "{value}",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "人数",
|
|
type: "bar",
|
|
barWidth: "12",
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 30,
|
|
color: new echarts.graphic.LinearGradient(
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(35, 165, 255, 1)",
|
|
},
|
|
{
|
|
offset: 0.5,
|
|
color: "rgba(35, 165, 255, 0.8)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "transparent",
|
|
},
|
|
]
|
|
),
|
|
},
|
|
},
|
|
data: ydata,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xdata.length);
|
|
},
|
|
initChart4(xdata, ydata, total) {
|
|
let myChart = echarts.init(document.getElementById("chart4"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
title: {
|
|
text: total + "人",
|
|
subtext: "总计",
|
|
textAlign: "center",
|
|
textVerticalAlign: "center",
|
|
x: "50%",
|
|
y: "55%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 26,
|
|
fontWeight: "normal",
|
|
},
|
|
subtextStyle: {
|
|
color: "#99A8BD",
|
|
fontSize: 20,
|
|
fontWeight: "normal",
|
|
align: "center",
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
},
|
|
icon: "circle",
|
|
top: "5%",
|
|
itemGap: 15,
|
|
data: xdata,
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
center: ["50%", "60%"],
|
|
radius: ["50%", "65%"],
|
|
hoverAnimation: false,
|
|
color: [
|
|
"#FEE449",
|
|
"#00FFFF",
|
|
"#00FFA8",
|
|
"#9F17FF",
|
|
"#FFE400",
|
|
"#F76F01",
|
|
"#01A4F7",
|
|
"#FE2C8A",
|
|
],
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: ydata,
|
|
},
|
|
{
|
|
type: "pie",
|
|
center: ["50%", "60%"],
|
|
radius: ["43%", "45%"],
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 78,
|
|
name: "人数",
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
type: "linear",
|
|
global: false,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#9F17FF",
|
|
},
|
|
{
|
|
offset: 0.2,
|
|
color: "#01A4F7",
|
|
},
|
|
{
|
|
offset: 0.5,
|
|
color: "#FE2C8A",
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: "#FEE449",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#00FFA8",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xdata.length);
|
|
},
|
|
// 获取三务公开统计图数据
|
|
getThreeOpenInfo() {
|
|
let params = {
|
|
areaCode: this.areaCode,
|
|
monthLength: 3,
|
|
typeCodeList: ["PARTY", "WEALTH", "OUTDOOR"],
|
|
};
|
|
this.$http
|
|
.post(
|
|
"content/getContentNumberByType",
|
|
this.common.request(params)
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
let data = res.data.data;
|
|
if (data && data.length > 0) {
|
|
this.getThreeOpenNumber(data);
|
|
}
|
|
this.renderChartData(data);
|
|
}
|
|
});
|
|
},
|
|
getThreeOpenNumber(data) {
|
|
if (data) {
|
|
data.forEach((monthData) => {
|
|
if (monthData.list && monthData.list.length > 0) {
|
|
monthData.list.forEach((item) => {
|
|
if (item.typeCode == "PARTY") {
|
|
this.swNumList[0].number += parseInt(
|
|
item.number
|
|
);
|
|
} else if (item.typeCode == "WEALTH") {
|
|
this.swNumList[1].number += parseInt(
|
|
item.number
|
|
);
|
|
} else if (item.typeCode == "OUTDOOR") {
|
|
this.swNumList[2].number += parseInt(
|
|
item.number
|
|
);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
renderChartData(data) {
|
|
if (data) {
|
|
let xdata = new Array(data.length).fill(""),
|
|
ydata1 = new Array(data.length).fill(0),
|
|
ydata2 = new Array(data.length).fill(0),
|
|
ydata3 = new Array(data.length).fill(0);
|
|
for (let i = 0; i < data.length; i++) {
|
|
let item = data[i];
|
|
xdata[i] = item.name;
|
|
for (
|
|
let dataIndex = 0;
|
|
dataIndex < item.list.length;
|
|
dataIndex++
|
|
) {
|
|
let dataItem = item.list[dataIndex];
|
|
if ("PARTY" == dataItem.typeCode) {
|
|
ydata1[i] = dataItem.number ? dataItem.number : 0;
|
|
} else if ("WEALTH" == dataItem.typeCode) {
|
|
ydata2[i] = dataItem.number ? dataItem.number : 0;
|
|
} else if ("OUTDOOR" == dataItem.typeCode) {
|
|
ydata3[i] = dataItem.number ? dataItem.number : 0;
|
|
}
|
|
}
|
|
}
|
|
this.initChart2(xdata, ydata1, ydata2, ydata3);
|
|
}
|
|
},
|
|
getEventNum() {
|
|
let params = {
|
|
areaCode: this.areaCode,
|
|
tagType: "event"
|
|
};
|
|
this.$http
|
|
.post("event/getHandleNum", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
let data = res.data.data;
|
|
if (data) {
|
|
this.alarmInfoList[0].number = data.handleNum;
|
|
this.alarmInfoList[1].number = data.unHandleNum;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 获取数据
|
|
initDataInfo(type, callback) {
|
|
let params = {
|
|
page: 1,
|
|
pageSize: 100,
|
|
areaCode: this.areaCode,
|
|
type,
|
|
};
|
|
this.$http
|
|
.post("screen/getScreenSurveyPage", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
let data = res.data.data.records;
|
|
callback(data);
|
|
}
|
|
});
|
|
},
|
|
// 查询领导班子信息
|
|
queryLeaderInfo() {
|
|
let params = {
|
|
areaCode: this.areaCode,
|
|
page: 1,
|
|
pageSize: 10,
|
|
};
|
|
this.$http
|
|
.post(
|
|
"/screen/queryLeaderInfoPage",
|
|
this.common.request(params)
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
this.leaderList = res.data.data.records;
|
|
} else {
|
|
this.$Message.error("查询领导班子数据有误");
|
|
}
|
|
});
|
|
},
|
|
queryContentInfo() {
|
|
this.$http
|
|
.post(
|
|
"/content/queryContentInfo",
|
|
this.common.request({
|
|
areaCode: this.areaCode,
|
|
hasParent: "0",
|
|
page: 1,
|
|
typeCode: "VILLAGEINFO",
|
|
pageSize: 100,
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
this.newContentList = res.data.data.records;
|
|
}
|
|
});
|
|
},
|
|
openContent(e) {
|
|
if (e.target.className != "list-item") return;
|
|
let index = e.target.dataset.obj;
|
|
let data = this.newContentList[index];
|
|
if (data.contentType == "3") {
|
|
this.common.openWindow(data);
|
|
} else {
|
|
this.detailInfo = data;
|
|
this.detailModal = true;
|
|
}
|
|
},
|
|
// 获取视频数据
|
|
queryVideoInfo() {
|
|
let params = {
|
|
areaCode: this.areaCode,
|
|
type: "village",
|
|
state: "0",
|
|
};
|
|
this.$http
|
|
.post("screen/getScreenVideoList", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
let data = res.data.data;
|
|
if (data && data.length > 0) {
|
|
let item = data[0];
|
|
if (item.urlType == 1) {
|
|
this.videoUrl = JSON.parse(item.urlList);
|
|
this.urlType = item.urlType;
|
|
} else {
|
|
this.videoUrl = item.urlList;
|
|
this.urlType = item.urlType;
|
|
}
|
|
} else {
|
|
this.$Message.warning("视频信息暂未配置");
|
|
}
|
|
} else {
|
|
this.$Message.error("查询视频信息有误");
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../styles/pbStyle.less";
|
|
.eb-container {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform: scale(var(--scale)) translate(-50%, -50%);
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background-image: url("../../assets/largeScreen/page-bg.png");
|
|
background-size: 100%;
|
|
|
|
.main {
|
|
width: 1820px;
|
|
height: 920px;
|
|
position: fixed;
|
|
top: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left-box {
|
|
width: 458px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.content-one {
|
|
width: 100%;
|
|
height: 388px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 42px));
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 49%);
|
|
gap: 10px 2%;
|
|
grid-template-rows: repeat(auto-fill, 70px);
|
|
|
|
.base-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
padding: 0 10px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.base-data-box {
|
|
margin-left: 5px;
|
|
flex: 1;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.base-data-title {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.base-data-text {
|
|
font-size: 22px;
|
|
line-height: 29px;
|
|
text-shadow: 0px 0px 4px #33c2ff;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-two {
|
|
width: 100%;
|
|
height: 532px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 42px));
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.data-item-box {
|
|
width: 33%;
|
|
height: 70px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 5px;
|
|
color: #ffffff;
|
|
|
|
.data-item-icon {
|
|
height: 70px;
|
|
padding-top: 7px;
|
|
}
|
|
|
|
.data-item-desc {
|
|
margin-left: 5px;
|
|
|
|
.data-item-title {
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.data-item-number {
|
|
font-size: 26px;
|
|
line-height: 40px;
|
|
color: #ffd15c;
|
|
font-family: Furore;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mini-title-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 24px;
|
|
margin-top: 10px;
|
|
|
|
.point {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-top: 8px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
#01ffff 0%,
|
|
#01a4ff 100%
|
|
);
|
|
box-shadow: 0px 0px 2px #1e85ff;
|
|
}
|
|
|
|
.title-text {
|
|
margin-left: 8px;
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
font-family: YouSheBiaoTiHei;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.alarm-info-box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 5px;
|
|
padding: 0 10px;
|
|
|
|
.alarm-item {
|
|
width: 180px;
|
|
height: 60px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
.alarm-data-box {
|
|
margin-left: 5px;
|
|
width: 240px;
|
|
height: 60px;
|
|
|
|
.alarm-data-title {
|
|
margin-top: 3px;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.alarm-data-text {
|
|
font-size: 20px;
|
|
line-height: 29px;
|
|
text-shadow: 0px 0px 4px #33c2ff;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart2 {
|
|
margin-top: 10px;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.center-box {
|
|
width: 880px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.video-box {
|
|
width: 880px;
|
|
}
|
|
.center-bottom {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 100%;
|
|
column-gap: 10px;
|
|
|
|
.center-bottom-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 42px));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-box {
|
|
width: 458px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.content-three {
|
|
width: 100%;
|
|
height: 194px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 42px));
|
|
padding: 10px;
|
|
.data-item {
|
|
margin-right: 20px;
|
|
width: 170px;
|
|
height: 126px;
|
|
display: flex;
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 90px;
|
|
}
|
|
.info-box {
|
|
margin-left: 5px;
|
|
height: 100%;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-four {
|
|
width: 100%;
|
|
height: 194px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 42px));
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.info-item {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.item-value {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
|
|
background: linear-gradient(
|
|
180deg,
|
|
#ecf4fe 100%,
|
|
#5982b5 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-fill-color: transparent;
|
|
}
|
|
|
|
.item-name {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
|
|
background: linear-gradient(
|
|
180deg,
|
|
#ecf4fe 100%,
|
|
#5982b5 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-fill-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-five {
|
|
width: 100%;
|
|
height: 532px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 42px));
|
|
padding: 10px;
|
|
|
|
.list-item {
|
|
width: 100%;
|
|
height: 100px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
|
|
img {
|
|
width: 160px;
|
|
height: 100px;
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.info-box {
|
|
flex: 1;
|
|
margin-left: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
pointer-events: none;
|
|
color: #ffffff;
|
|
|
|
.title {
|
|
pointer-events: none;
|
|
font-size: 16px;
|
|
}
|
|
.time {
|
|
pointer-events: none;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|