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.
2013 lines
74 KiB
2013 lines
74 KiB
<template>
|
|
<!-- 县级大屏 -->
|
|
<div class="eb-container" ref="appRef">
|
|
<MainTitle class="title" :title="title" :show-menu="false"></MainTitle>
|
|
<div class="left">
|
|
<div class="min-title">
|
|
<span>基本概况</span>
|
|
</div>
|
|
<div class="left-top">
|
|
<div class="top-top-one">
|
|
<div
|
|
class="top-one1"
|
|
v-for="(item, index) in baseInfoList"
|
|
:key="index"
|
|
>
|
|
<countTo
|
|
class="number"
|
|
:startVal="0"
|
|
:endVal="parseFloat(item.value)"
|
|
:decimals="2"
|
|
:duration="3000"
|
|
>
|
|
</countTo>
|
|
<img
|
|
class="img"
|
|
:src="
|
|
require(`../../assets/welcome/Frame-${
|
|
index + 1
|
|
}.png`)
|
|
"
|
|
alt="图片加载失败"
|
|
/>
|
|
<p class="title">{{ item.label }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-icon-title">
|
|
<img
|
|
src="../../assets/welcome/sczzqs.png"
|
|
alt="图片加载失败"
|
|
/>
|
|
<span>生产总值趋势</span>
|
|
</div>
|
|
<!-- 图表 -->
|
|
<div class="top-chart" id="chartZone"></div>
|
|
</div>
|
|
<!-- 标题(广播电视) -->
|
|
<div class="min-title">
|
|
<span>广播电视</span>
|
|
</div>
|
|
<div class="left-bottom">
|
|
<div class="bottom-box">
|
|
<div
|
|
class="box-box"
|
|
v-for="(item, index) in radioList"
|
|
:key="index"
|
|
>
|
|
<div class="box-icon-title">
|
|
<img :src="item.icon" alt="图片加载失败" />
|
|
<span>{{ item.label }}</span>
|
|
</div>
|
|
<countTo
|
|
class="box-number"
|
|
:startVal="0"
|
|
:endVal="Number(item.value)"
|
|
:duration="3000"
|
|
>KM
|
|
</countTo>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<!-- 快捷入口 -->
|
|
<div class="min-title">
|
|
<span>智慧应用</span>
|
|
</div>
|
|
<div class="enter">
|
|
<div
|
|
class="enter-item"
|
|
@click="jumpSystem(item)"
|
|
v-for="(item, index) in itemList"
|
|
:key="index"
|
|
>
|
|
<span>{{ item.menuName }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 标题(公共文化场所分布) -->
|
|
<div class="min-title">
|
|
<span>公共文化场所分布</span>
|
|
</div>
|
|
<!-- 公共文化场所分布 -->
|
|
<div class="public-culture">
|
|
<div class="pieChart" id="pieChart"></div>
|
|
<div class="pieContent">
|
|
<vueSeamlessScroll
|
|
:data="analysisInfo"
|
|
:class-option="activityOption"
|
|
class="scrollBox"
|
|
>
|
|
<div class="datalist">
|
|
<div
|
|
class="contentItem"
|
|
v-for="(item, index) in analysisInfo"
|
|
:key="index"
|
|
>
|
|
<div class="line">
|
|
<div
|
|
class="dataline"
|
|
:style="{
|
|
backgroundColor: colorList[index],
|
|
}"
|
|
></div>
|
|
<div class="defaultline"></div>
|
|
</div>
|
|
<span class="name">{{ item.label }}</span>
|
|
<span class="num">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
</div>
|
|
<!-- 标题(各乡镇应急广播建设情况统计) -->
|
|
<div class="min-title">
|
|
<span>各乡镇应急广播建设情况统计</span>
|
|
</div>
|
|
<!-- 各乡镇应急广播建设情况统计 -->
|
|
<div class="emergency-broadcast" id="pieChart2"></div>
|
|
</div>
|
|
<img class="map-center" :src="require('@/assets/map.png')" />
|
|
<div class="page-bottom-bg"></div>
|
|
<div class="page-left-bg"></div>
|
|
<div class="page-right-bg"></div>
|
|
<Modal v-model="townModal" :footer-hide="true" width="1200">
|
|
<div class="turntable">
|
|
<div class="left"></div>
|
|
|
|
<div style="color: white">
|
|
<div class="page-left-left">
|
|
<img
|
|
src="../../assets/screenView/line.png"
|
|
alt=""
|
|
style="position: absolute; top: 270px; left: -100px"
|
|
/>
|
|
<div class="list">
|
|
<swiper :options="swiperOptions" ref="mySwiper">
|
|
<swiper-slide
|
|
v-for="(item, index) in menus"
|
|
:key="index"
|
|
class="item"
|
|
>
|
|
<div class="swiper-item">
|
|
{{ item.areaName }}
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="current">
|
|
<div
|
|
style="text-align: center; cursor: pointer"
|
|
@click="goTown"
|
|
>
|
|
<img
|
|
src="../../assets/ScreenView/currenttwon.png"
|
|
style="width: 70px; height: 60px"
|
|
/>
|
|
<div
|
|
style="
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
color: #fdb955;
|
|
margin-left: 10px;
|
|
"
|
|
>
|
|
{{ currentTwon.areaName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-container">
|
|
<div
|
|
style="text-align: center; cursor: pointer"
|
|
v-for="(item, index) in townData"
|
|
:key="index"
|
|
@click="toScreenPage(item)"
|
|
>
|
|
<img
|
|
src="../../assets/ScreenView/twon.png"
|
|
alt=""
|
|
style="width: 70px; height: 60px"
|
|
/>
|
|
<div
|
|
style="
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #fdb955;
|
|
"
|
|
>
|
|
{{ item.areaName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
<common-modal
|
|
v-model="appState"
|
|
:title="currentMenu.menuName"
|
|
width="600"
|
|
>
|
|
<div style="width: 100%; display: flex; flex-wrap: wrap">
|
|
<div
|
|
class="menu-item"
|
|
@click="toMenu(index)"
|
|
v-for="(item, index) in currentMenu.children"
|
|
:key="index"
|
|
>
|
|
<span>{{ item.menuItem }}</span>
|
|
</div>
|
|
</div>
|
|
</common-modal>
|
|
<common-modal
|
|
v-model="warringState"
|
|
:title="currentMenu.menuItem"
|
|
width="600"
|
|
>
|
|
<div style="width: 100%; display: flex; flex-wrap: wrap">
|
|
<div
|
|
class="menu-item"
|
|
@click="toWarring(item)"
|
|
v-for="(item, index) in currentMenu.children"
|
|
:key="index"
|
|
>
|
|
<span>{{ item.menuItem }}</span>
|
|
</div>
|
|
</div>
|
|
</common-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useIndex } from "../../utils/utilsDramAdmin";
|
|
import MainTitle from "./components/MainTitle.vue";
|
|
import ThreeView from "./components/three/three-view.vue";
|
|
import Rotation3D from "@/utils/rotation3D";
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
import * as echarts from "echarts";
|
|
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
|
|
import CommonModal from "@/views/common-components/common-modal.vue";
|
|
|
|
export default {
|
|
name: "CountyScreen",
|
|
components: {
|
|
MainTitle,
|
|
ThreeView,
|
|
vueSeamlessScroll,
|
|
Swiper,
|
|
SwiperSlide,
|
|
CommonModal,
|
|
},
|
|
data() {
|
|
let self = this;
|
|
return {
|
|
title: "翠屏区智慧广电示范区",
|
|
warringState: false,
|
|
areaCode: window.$localStorage.getItem("areaCode"),
|
|
videoUrl: "/localImage/home/home.mp4",
|
|
logUrl: "/localImage/smartserver/yj.glb",
|
|
itemList: [
|
|
{
|
|
menuName: "公共服务",
|
|
children: [
|
|
{
|
|
menuItem: "广电公服",
|
|
routerPath: "/publicService",
|
|
},
|
|
{
|
|
menuItem: "文娱场所",
|
|
routerPath: "/culture-place",
|
|
},
|
|
{
|
|
menuItem: "政务服务",
|
|
routerPath: "/govService",
|
|
},
|
|
{
|
|
menuItem: "基础数据",
|
|
routerPath: "/smart-radio-basic-data",
|
|
},
|
|
// {
|
|
// menuItem: "应急数据",
|
|
// routerPath: "/emergency-data",
|
|
// },
|
|
],
|
|
},
|
|
{
|
|
menuName: "社会治理",
|
|
children: [
|
|
{
|
|
menuItem: "应急广播",
|
|
routerPath: "/emergencyScreen",
|
|
},
|
|
// {
|
|
// menuItem: "值班系统",
|
|
// routerPath: "/duty-system",
|
|
// },
|
|
{
|
|
menuItem: "视频监控",
|
|
routerPath: "/video-monitor",
|
|
},
|
|
{
|
|
menuItem: "烟火预警",
|
|
routerPath: "/emergency-extend",
|
|
},
|
|
// {
|
|
// menuItem: "周界预警",
|
|
// routerPath: "/perimeter-screen",
|
|
// },
|
|
{
|
|
menuItem: "人流预警",
|
|
isShowTwon: true,
|
|
children: [
|
|
{
|
|
menuItem: "清华街",
|
|
areaCode: "511502000001",
|
|
},
|
|
{
|
|
menuItem: "合江门",
|
|
areaCode: "511502000002",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
menuItem: "车流预警",
|
|
isShowTwon: true,
|
|
children: [
|
|
{
|
|
menuItem: "合江门",
|
|
areaCode: "511502000003",
|
|
},
|
|
{
|
|
menuItem: "盐李路",
|
|
areaCode: "511502000004",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
menuItem: "视频结构化",
|
|
routerPath: "/video-structuring",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
menuName: "乡村振兴",
|
|
children: [
|
|
{
|
|
menuItem: "镇级",
|
|
routerPath: "/town-screen",
|
|
isShowTwon: true,
|
|
},
|
|
{
|
|
menuItem: "村级",
|
|
routerPath: "/village-screen",
|
|
isShowTwon: true,
|
|
},
|
|
{
|
|
menuItem: "乡村治理",
|
|
routerPath: "/village-governance-img",
|
|
isShowTwon: true,
|
|
},
|
|
{
|
|
menuItem: "乡村党建",
|
|
routerPath: "/party-screen",
|
|
},
|
|
{
|
|
menuItem: "网格管理",
|
|
routerPath: "/grid-manage",
|
|
isShowTwon: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
menuName: "文博图旅",
|
|
children: [
|
|
{
|
|
menuItem: "文化馆",
|
|
routerPath: "/cultural-center",
|
|
},
|
|
{
|
|
menuItem: "博物馆",
|
|
routerPath: "/museum-center",
|
|
},
|
|
{
|
|
menuItem: "图书馆",
|
|
routerPath: "/library-center",
|
|
},
|
|
{
|
|
menuItem: "全域旅游",
|
|
routerPath: "/global-travel",
|
|
},
|
|
{
|
|
menuItem: "智慧旅游态势",
|
|
routerPath: "/smart-travel",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
menuName: "媒体融合",
|
|
children: [
|
|
{
|
|
menuItem: "媒体融合",
|
|
routerPath: "/new-media",
|
|
},
|
|
{
|
|
menuItem: "三江翠屏",
|
|
routerPath: "/mediaBigScreen",
|
|
},
|
|
{
|
|
menuItem: "人人通",
|
|
routerPath: "/rrt-screen",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
menuName: "平台应用",
|
|
children: [
|
|
{
|
|
menuItem: "视听资源",
|
|
url: "http://60.255.186.185:9024/cp-stzy/#/",
|
|
},
|
|
{
|
|
menuItem: "数据管理",
|
|
url: "http://60.255.186.185:9024/cp-web/#/",
|
|
},
|
|
{
|
|
menuItem: "运维运控",
|
|
url: "http://60.255.186.185:9999",
|
|
},
|
|
{
|
|
menuItem: "动态表单",
|
|
url: "http://60.255.186.185:9024/cp-form/#/",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
baseInfoList: [],
|
|
radioList: [],
|
|
radioIconList: [
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
{
|
|
icon: require("@/assets/welcome/icon/gbz-icon.png"),
|
|
},
|
|
],
|
|
cTravelList: [],
|
|
analysisInfo: [], //公共文化列表
|
|
colorList: [
|
|
"#00ffff",
|
|
"#006ced",
|
|
"#ffe000",
|
|
"#ffa800",
|
|
"#ff5b00",
|
|
"#ff3000",
|
|
],
|
|
open: [false, false, false, false, false],
|
|
rotationInstance: null,
|
|
swiperOptions: {
|
|
on: {
|
|
slideChangeTransitionEnd: function () {
|
|
self.changeIndex(Number(this.realIndex));
|
|
},
|
|
touchEnd: function () {
|
|
self.changeIndex(Number(this.realIndex));
|
|
},
|
|
},
|
|
|
|
grabCursor: true,
|
|
mousewheel: true,
|
|
slideToClickedSlide: true,
|
|
direction: "vertical",
|
|
autoplay: false,
|
|
loop: false,
|
|
loopedSlides: 22,
|
|
effect: "coverflow",
|
|
slidesPerView: "auto",
|
|
centeredSlides: true,
|
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
|
observeParents: true, //修改swiper的父元素时，自动初始化swiper
|
|
coverflowEffect: {
|
|
rotate: 0,
|
|
stretch: 0,
|
|
depth: 66,
|
|
modifier: 2,
|
|
slideShadows: false,
|
|
},
|
|
},
|
|
menus: [],
|
|
currentTwon: {},
|
|
townModal: false,
|
|
townData: [],
|
|
currentType: "",
|
|
enterList: [
|
|
{
|
|
icon: require("@/assets/largeScreen/stzy.png"),
|
|
url: "http://60.255.186.185:9024/county-file/#/Login",
|
|
text: "视听资源",
|
|
},
|
|
{
|
|
icon: require("@/assets/largeScreen/sjgl.png"),
|
|
url: "http://60.255.186.185:9024/xy-web/",
|
|
text: "数据管理",
|
|
},
|
|
{
|
|
icon: require("@/assets/largeScreen/ywyk.png"),
|
|
url: "http://60.255.186.185:9999/login/toLogin",
|
|
text: "运维运控",
|
|
},
|
|
{
|
|
icon: require("@/assets/largeScreen/dtbd.png"),
|
|
url: "http://60.255.186.185:9024/county-form/",
|
|
text: "动态表单",
|
|
},
|
|
],
|
|
appState: false,
|
|
currentMenu: {},
|
|
};
|
|
},
|
|
computed: {
|
|
activityOption() {
|
|
return {
|
|
step: 0.4, // 数值越大速度滚动越快
|
|
limitMoveNum: this.analysisInfo.length, // 开始无缝滚动的数据量 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)
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
|
calcRate();
|
|
windowDraw();
|
|
this.rotationInstance = new Rotation3D({
|
|
id: "#rotation3D",
|
|
farScale: 0.8,
|
|
// farScale: 1,
|
|
xRadius: 50, //x半径压缩
|
|
yRadius: 0, //y半径压缩
|
|
autoPlay: false,
|
|
autoPlayDelay: 6000,
|
|
});
|
|
|
|
// 基本概况
|
|
this.initDataInfo("countyBaseInfo", (data) => {
|
|
this.baseInfoList = data;
|
|
});
|
|
// 生产总值
|
|
this.initDataInfo("productionTrends", (data) => {
|
|
let y = data.map((item) => item.label);
|
|
let x = data.map((item) => Number(item.value));
|
|
this.queryProductionValue(x, y);
|
|
});
|
|
// 广电信息
|
|
this.initDataInfo("radioInformation", (data) => {
|
|
this.radioList = data.map((item, index) => {
|
|
item.icon = this.radioIconList[index].icon;
|
|
return item;
|
|
});
|
|
});
|
|
// 文化旅游
|
|
this.initDataInfo("culturalTourism", (data) => {
|
|
this.cTravelList = data;
|
|
});
|
|
// 文化场所
|
|
this.initDataInfo("PCTLocated", (data) => {
|
|
this.analysisInfo = data;
|
|
|
|
let x = data.map((item) => item.label);
|
|
let y = data.map((item) => Number(item.value));
|
|
this.initChartPie(x, y);
|
|
});
|
|
// 文化场所
|
|
this.initDataInfo("broadcastConstruction", (data) => {
|
|
let resData = data.map((item) => {
|
|
return {
|
|
name: item.label,
|
|
num: Number(item.value),
|
|
};
|
|
});
|
|
this.queryChart2(resData);
|
|
});
|
|
this.getTownMemu();
|
|
},
|
|
methods: {
|
|
toWarring(item) {
|
|
switch (this.currentType) {
|
|
case "person":
|
|
this.$router.push({
|
|
path: "/person-warring",
|
|
query: {
|
|
areaName: item.menuItem,
|
|
areaCode: item.areaCode,
|
|
},
|
|
});
|
|
break;
|
|
case "car":
|
|
this.$router.push({
|
|
path: "/car-warring",
|
|
query: {
|
|
areaName: item.menuItem,
|
|
areaCode: item.areaCode,
|
|
},
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
jumpSystem(item) {
|
|
this.currentMenu = item;
|
|
this.appState = true;
|
|
},
|
|
// 获取数据
|
|
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);
|
|
}
|
|
});
|
|
},
|
|
queryProductionValue(x, y) {
|
|
let myChart = echarts.init(document.getElementById("chartZone"));
|
|
var color = ["#80bdff", "#07f8a0"];
|
|
|
|
const dataX = y;
|
|
const dataBar = x;
|
|
const dataNowY = [10, 17, 13, 24, 15];
|
|
var option = {
|
|
color: color,
|
|
title: {
|
|
text: "单位:亿元",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "rgba(33,56,77,1)",
|
|
borderColor: "rgba(33,56,77,1)",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: "rgba(0,133,255,0)",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
right: "4%",
|
|
data: ["增长率", "生产总值"],
|
|
itemGap: 20,
|
|
itemWidth: 20,
|
|
itemHeight: 10,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
grid: {
|
|
top: "20%",
|
|
left: "4%",
|
|
height: "80%",
|
|
width: "auto",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: ["0", "20%"],
|
|
data: dataX,
|
|
axisLabel: {
|
|
// interval: 0,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false, // 去除刻度线
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
// min: 0,
|
|
// max: 200,
|
|
// interval: 50,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
axisTick: { show: false },
|
|
axisLine: { show: false },
|
|
},
|
|
{
|
|
// type: "value",
|
|
min: 0,
|
|
max: 50,
|
|
interval: 10,
|
|
axisLabel: {
|
|
show: false, // 不显示坐标轴上的文字
|
|
},
|
|
boundaryGap: ["0", "20%"],
|
|
axisTick: { show: false },
|
|
axisLine: { show: false },
|
|
splitLine: { show: false },
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "Max",
|
|
type: "bar",
|
|
barGap: "-76.5%",
|
|
barWidth: "70%",
|
|
silent: true,
|
|
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(17, 24, 40, 0.1)",
|
|
borderWidth: 0,
|
|
borderColor: "rgba(17, 24, 40, 0.1)",
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
borderWidth: 2,
|
|
borderColor: "rgba(19,255,241,1)",
|
|
},
|
|
},
|
|
// data: 250,
|
|
z: 9,
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
name: "生产总值",
|
|
type: "bar",
|
|
barWidth: "40%",
|
|
stack: "one",
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(21,255,157, 0.1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(21,255,157, 0.6)",
|
|
},
|
|
]
|
|
),
|
|
},
|
|
data: dataBar,
|
|
},
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
barWidth: "40%",
|
|
stack: "one",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(21, 255, 157,1)",
|
|
},
|
|
},
|
|
data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
},
|
|
// {
|
|
// name: "增长率",
|
|
// type: "line",
|
|
// yAxisIndex: 1,
|
|
// symbolSize: 8,
|
|
// // 设置拐点颜色以及边框
|
|
// itemStyle: {
|
|
// color: "rgba(255, 209, 92,1)",
|
|
// },
|
|
// data: dataNowY,
|
|
// },
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, dataNowY.length);
|
|
},
|
|
initChartPie(xdata, ydata) {
|
|
let myChart = echarts.init(document.getElementById("pieChart"));
|
|
let num = 0;
|
|
ydata.forEach((item) => {
|
|
num = num + Number(item);
|
|
});
|
|
let img =
|
|
"data:image/png;base64,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";
|
|
let data = [];
|
|
let color = this.colorList;
|
|
for (let i = 0; i < ydata.length; i++) {
|
|
data.push(
|
|
{
|
|
value: ydata[i],
|
|
name: xdata[i],
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 1,
|
|
shadowBlur: 20,
|
|
borderColor: color[i],
|
|
shadowColor: color[i],
|
|
},
|
|
},
|
|
}
|
|
// {
|
|
// value: 2,
|
|
// name: "",
|
|
// itemStyle: {
|
|
// normal: {
|
|
// label: {
|
|
// show: false,
|
|
// },
|
|
// labelLine: {
|
|
// show: false,
|
|
// },
|
|
// color: "rgba(0, 0, 0, 0)",
|
|
// borderColor: "rgba(0, 0, 0, 0)",
|
|
// borderWidth: 0,
|
|
// },
|
|
// },
|
|
// }
|
|
);
|
|
}
|
|
var seriesOption = [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
clockWise: false,
|
|
center: ["50%", "50%"],
|
|
radius: [70, 84],
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
position: "outside",
|
|
color: "#ddd",
|
|
formatter: function (params) {
|
|
var percent = 0;
|
|
var total = 0;
|
|
for (var i = 0; i < ydata.length; i++) {
|
|
total += ydata[i];
|
|
}
|
|
percent = (
|
|
(params.value / total) *
|
|
100
|
|
).toFixed(0);
|
|
if (params.name !== "") {
|
|
return (
|
|
"文化场所" +
|
|
params.name +
|
|
"\n" +
|
|
"\n" +
|
|
"占百分比：" +
|
|
percent +
|
|
"%"
|
|
);
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
},
|
|
labelLine: {
|
|
length: 30,
|
|
length2: 100,
|
|
show: true,
|
|
color: "#00ffff",
|
|
},
|
|
},
|
|
},
|
|
data: data,
|
|
},
|
|
];
|
|
let option = {
|
|
color: color,
|
|
title: [
|
|
{
|
|
text:
|
|
"{name|" +
|
|
num +
|
|
"个" +
|
|
"}\n{val|" +
|
|
"文化场所" +
|
|
"}",
|
|
top: "center",
|
|
left: "center",
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
color: "#fff",
|
|
padding: [0, 0, 5, 0],
|
|
},
|
|
val: {
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
color: "#fff",
|
|
padding: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
graphic: {
|
|
elements: [
|
|
{
|
|
type: "image",
|
|
z: 3,
|
|
style: {
|
|
image: img,
|
|
width: 110,
|
|
height: 110,
|
|
},
|
|
left: "center",
|
|
top: "center",
|
|
position: [100, 100],
|
|
},
|
|
],
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
},
|
|
series: seriesOption,
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xdata.length);
|
|
},
|
|
// 各乡镇应急广播建设情况统计
|
|
queryChart2(data) {
|
|
var chartDom = document.getElementById("pieChart2");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var xdata = data.map((v) => v.name);
|
|
var data = data.map((v) => v.num);
|
|
option = {
|
|
// backgroundColor: "rgba(2, 12, 44, 1)", //背景色
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
params[0].name +
|
|
"<br>" +
|
|
"统计数 ：" +
|
|
params[0].value
|
|
);
|
|
},
|
|
},
|
|
grid: {
|
|
left: "4%",
|
|
right: "4%",
|
|
top: "5%",
|
|
width: "auto",
|
|
height: "100%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
data: xdata,
|
|
triggerEvent: true,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
// rotate: 45,
|
|
formatter: function (value) {
|
|
let txtArry = value.split("");
|
|
let rs = "";
|
|
for (let i = 0; i < txtArry.length; i++) {
|
|
rs += txtArry[i] + "\n"; // 在每个字后面加上换行符，使每个字都竖着显示
|
|
}
|
|
return rs;
|
|
},
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: "#fff",
|
|
// fontSize: 10,
|
|
// color: "rgba(255, 255, 255, 1)",
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
triggerEvent: true,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
// color: "rgba(255, 255, 255, 1)",
|
|
// fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "订单数",
|
|
barMinHeight: 10,
|
|
type: "pictorialBar",
|
|
barCategoryGap: "60%",
|
|
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
|
itemStyle: {
|
|
normal: {
|
|
//渐变色
|
|
color: "rgb(215,210,34)",
|
|
},
|
|
},
|
|
data: data,
|
|
z: 10,
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xdata.length);
|
|
},
|
|
toMenu(index) {
|
|
let item = this.currentMenu.children[index];
|
|
if (item.routerPath && !item.isShowTwon) {
|
|
this.$router.push(item.routerPath);
|
|
} else if (item.isShowTwon) {
|
|
console.log(item);
|
|
switch (item.menuItem) {
|
|
case "镇级":
|
|
this.currentType = "town";
|
|
this.townModal = true;
|
|
break;
|
|
case "村级":
|
|
this.currentType = "village";
|
|
this.townModal = true;
|
|
break;
|
|
case "乡村治理":
|
|
this.currentType = "governance";
|
|
this.townModal = true;
|
|
break;
|
|
case "网格管理":
|
|
this.currentType = "grid";
|
|
this.townModal = true;
|
|
break;
|
|
case "人流预警":
|
|
this.currentType = "person";
|
|
this.appState = false;
|
|
this.currentMenu = item;
|
|
this.warringState = true;
|
|
break;
|
|
case "车流预警":
|
|
this.currentType = "car";
|
|
this.appState = false;
|
|
this.currentMenu = item;
|
|
this.warringState = true;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
} else if (item.url) {
|
|
window.open(item.url);
|
|
}
|
|
},
|
|
goTown() {
|
|
if (this.currentType != "town") {
|
|
return;
|
|
}
|
|
if (this.currentTwon.areaName != "李庄镇") {
|
|
this.$message.info("除李庄镇外,其余尚未建设!");
|
|
return;
|
|
}
|
|
this.townModal = false;
|
|
this.$router.push({
|
|
name: "town-screen",
|
|
query: {
|
|
townName: this.currentTwon.areaName,
|
|
areaCode: this.currentTwon.areaCode,
|
|
},
|
|
});
|
|
},
|
|
toScreenPage(item) {
|
|
if (this.currentType == "person") {
|
|
this.$router.push({
|
|
name: "person-warring",
|
|
query: {
|
|
areaName: item.areaName,
|
|
areaCode: item.areaCode,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
if (this.currentType == "car") {
|
|
this.$router.push({
|
|
name: "car-warring",
|
|
query: {
|
|
areaName: item.areaName,
|
|
areaCode: item.areaCode,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
if (item.areaName != "高桥村") {
|
|
this.$message.info("除高桥村,其余尚未建设！");
|
|
return;
|
|
}
|
|
if (this.currentType == "village") {
|
|
this.$router.push({
|
|
name: "village-screen",
|
|
query: {
|
|
areaName: item.areaName,
|
|
areaCode: item.areaCode,
|
|
},
|
|
});
|
|
} else if (this.currentType == "governance") {
|
|
this.$router.push({
|
|
name: "village-governance-img",
|
|
query: {
|
|
areaName: item.areaName,
|
|
areaCode: item.areaCode,
|
|
},
|
|
});
|
|
} else if (this.currentType == "grid") {
|
|
this.$router.push({
|
|
name: "grid-manage",
|
|
query: {
|
|
areaName: item.areaName,
|
|
areaCode: item.areaCode,
|
|
},
|
|
});
|
|
}
|
|
this.townModal = false;
|
|
},
|
|
changeIndex(index) {
|
|
this.currentTwon = this.menus[index];
|
|
this.townData = [];
|
|
this.getVill(this.menus[index].areaCode);
|
|
},
|
|
getTownMemu() {
|
|
this.$http
|
|
.post(
|
|
"base/areaInfo/queryAreaInfoByParentId",
|
|
this.common.request({
|
|
parentCode: "511502000000",
|
|
hasOpen: "1",
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
if (res.data.data && res.data.data[0]) {
|
|
this.menus = res.data.data;
|
|
this.currentTwon = this.menus[0];
|
|
this.getVill(this.menus[0].areaCode);
|
|
}
|
|
} else {
|
|
this.$Message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
getVill(code) {
|
|
this.$http
|
|
.post(
|
|
"base/areaInfo/queryAreaInfoByParentId",
|
|
this.common.request({
|
|
parentCode: code,
|
|
hasOpen: "1",
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
if (res.data.data && res.data.data[0]) {
|
|
this.townData = res.data.data;
|
|
}
|
|
} else {
|
|
this.$Message.error("查询数据失败");
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$Message.error("查询数据失败");
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../styles/pbStyle.less";
|
|
@import "../../../static/css/rotation3D.css";
|
|
|
|
.menu-item {
|
|
cursor: pointer;
|
|
width: 100px;
|
|
height: 67px;
|
|
background: url("../../assets/largeScreen/enter-box.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0 20px 20px 0;
|
|
span {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.map-center {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 1350px;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.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/screenView/bg.png");
|
|
background-size: 100%;
|
|
|
|
.bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
background: url("../../assets/largeScreen/index-bg.png") no-repeat;
|
|
background-size: 100%;
|
|
z-index: -90;
|
|
}
|
|
|
|
.three-box {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
left: 50%;
|
|
transform: translateX(-50% - 1.8px);
|
|
top: 200px;
|
|
width: 500px;
|
|
height: 300px;
|
|
}
|
|
|
|
.change-box {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%- 4px);
|
|
top: 650px;
|
|
width: 89px;
|
|
height: 50px;
|
|
background: url("../../assets/largeScreen/quan.png") no-repeat;
|
|
background-size: 100%;
|
|
transform-style: preserve-3d;
|
|
animation: change 6s linear infinite;
|
|
}
|
|
|
|
@keyframes change {
|
|
0% {
|
|
transform: rotateX(45deg) translateX(-50%- 4px) scale(1);
|
|
}
|
|
25% {
|
|
transform: rotateX(45deg) translateX(-50%- 4px) scale(5);
|
|
}
|
|
50% {
|
|
transform: rotateX(45deg) translateX(-50%- 4px) scale(9);
|
|
}
|
|
75% {
|
|
transform: rotateX(45deg) translateX(-50%- 4px) scale(5);
|
|
}
|
|
100% {
|
|
transform: rotateX(45deg) translateX(-50%- 4px) scale(1);
|
|
}
|
|
}
|
|
|
|
.center-bottom-contain {
|
|
position: absolute;
|
|
width: 1100px;
|
|
height: 400px;
|
|
top: 450px;
|
|
left: 50%;
|
|
font-family: "YouSheBiaoTiHei";
|
|
transform: translateX(-50%- 2px);
|
|
|
|
.menu-name {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url("../../../static/images/qiu.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-style: normal;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.children-list {
|
|
width: 0;
|
|
height: 0;
|
|
top: 73px;
|
|
left: 73px;
|
|
position: absolute;
|
|
|
|
.children-item {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url("../../assets/largeScreen/qiu.png") no-repeat;
|
|
background-size: 100%;
|
|
transition: 0.2s 0.1s;
|
|
position: absolute;
|
|
font-size: 23px;
|
|
z-index: 2;
|
|
top: -50px;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.children-list.open {
|
|
& .children-item.oy-menu-item_1 {
|
|
left: -170px;
|
|
top: 0px;
|
|
}
|
|
|
|
& .children-item.oy-menu-item_2 {
|
|
left: -152px;
|
|
top: -106px;
|
|
}
|
|
|
|
& .children-item.oy-menu-item_3 {
|
|
left: -92px;
|
|
top: -206px;
|
|
}
|
|
|
|
& .children-item.oy-menu-item_4 {
|
|
left: 0px;
|
|
top: -256px;
|
|
}
|
|
|
|
& .children-item.oy-menu-item_5 {
|
|
left: 92px;
|
|
top: -206px;
|
|
}
|
|
|
|
& .children-item.oy-menu-item_6 {
|
|
left: 152px;
|
|
top: -106px;
|
|
}
|
|
& .children-item.oy-menu-item_7 {
|
|
left: 170px;
|
|
top: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 标题样式
|
|
.min-title {
|
|
width: 348px;
|
|
height: 38px;
|
|
background-image: url("../../assets/largeScreen/title-bg-310.png");
|
|
background-size: 100% 100%;
|
|
padding-left: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
span {
|
|
font-family: "ShiShangZhongHeiJianTi";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
/* identical to box height */
|
|
display: inline-block;
|
|
color: #ffffff;
|
|
// margin-left: 28px;
|
|
text-shadow: 0px 0px 4px #83e1ff;
|
|
}
|
|
}
|
|
|
|
.left {
|
|
position: absolute;
|
|
top: 90px;
|
|
left: 58px;
|
|
width: 348px;
|
|
height: 920px;
|
|
|
|
.min-title {
|
|
span {
|
|
}
|
|
}
|
|
|
|
// 南溪区基本介绍
|
|
.left-top {
|
|
width: 348px;
|
|
height: 478px;
|
|
background: url("../../assets/welcome/left-top.png") no-repeat;
|
|
background-size: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12px 0 8px 0;
|
|
margin-bottom: 16px;
|
|
|
|
// 内部样式开始
|
|
.number {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 26px;
|
|
/* identical to box height */
|
|
display: flex;
|
|
align-items: flex-end;
|
|
text-align: center;
|
|
|
|
background: linear-gradient(180deg, #ffffff 0%, #a7ddff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|
|
|
|
.img {
|
|
width: 72px;
|
|
height: 64px;
|
|
}
|
|
|
|
.title {
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
/* identical to box height */
|
|
display: flex;
|
|
align-items: flex-end;
|
|
text-align: center;
|
|
|
|
background: linear-gradient(180deg, #ffffff 0%, #a7ddff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|
|
|
|
//内部样式结束
|
|
|
|
.top-top-one {
|
|
width: 100%;
|
|
height: 260px;
|
|
display: flex;
|
|
align-items: space-between;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
.top-one1 {
|
|
width: 150px;
|
|
height: 126px;
|
|
background: url("../../assets/welcome/box.png") no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.top-icon-title {
|
|
width: 108px;
|
|
height: 22px;
|
|
// margin-top: 22px;
|
|
margin: 12px 0 0 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
span {
|
|
margin-left: 4px;
|
|
font-family: "Source Han Sans CN";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
color: #b4c0cc;
|
|
}
|
|
}
|
|
|
|
// 图表
|
|
.top-chart {
|
|
width: 319px;
|
|
height: 157px;
|
|
margin-left: 12px;
|
|
|
|
// .chartZone {
|
|
// width: 319px;
|
|
// height: 157px;
|
|
// }
|
|
}
|
|
}
|
|
|
|
// 广播电视
|
|
.left-bottom {
|
|
width: 348px;
|
|
height: 335px;
|
|
box-sizing: border-box;
|
|
// padding: 20px 14px 20px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
background: url("../../assets/welcome/gbds-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.bottom-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: space-between;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
|
|
.box-box {
|
|
width: 154px;
|
|
height: 52px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
padding-left: 23px;
|
|
background: url("../../assets/welcome/gb-icon.png")
|
|
no-repeat;
|
|
background-size: 100%;
|
|
|
|
.box-icon-title {
|
|
width: 100%;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
span {
|
|
margin-left: 10px;
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
/* identical to box height */
|
|
display: flex;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.box-number {
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: right;
|
|
color: #ffffff;
|
|
text-shadow: 0px 0px 4px #00a3ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
top: 90px;
|
|
right: 58px;
|
|
width: 348px;
|
|
height: 920px;
|
|
|
|
// 文化旅游
|
|
.cultural-tourism {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
width: 348px;
|
|
height: 174px;
|
|
margin-bottom: 16px;
|
|
background: url("../../assets/welcome/whlv-bg.png") no-repeat;
|
|
background-size: 100%;
|
|
|
|
.cultural-content {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
align-items: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.content-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 103px;
|
|
height: 73px;
|
|
|
|
.box-number {
|
|
font-family: "Furore";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
line-height: 28px;
|
|
/* identical to box height */
|
|
text-align: center;
|
|
color: #ffffff;
|
|
text-shadow: 0px 0px 8px #1e85ff;
|
|
}
|
|
|
|
.box-title {
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
/* identical to box height */
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 快捷入口
|
|
.enter {
|
|
width: 348px;
|
|
height: 174px;
|
|
background: url("../../assets/welcome/whlv-bg.png") no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 10px 10px;
|
|
margin-bottom: 10px;
|
|
|
|
.enter-item {
|
|
cursor: pointer;
|
|
width: 100px;
|
|
height: 67px;
|
|
background: url("../../assets/largeScreen/enter-box.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
span {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
// 公共文化场所分布
|
|
.public-culture {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 348px;
|
|
height: 374px;
|
|
background: url("../../assets/welcome/ggwhcs-bg.png") no-repeat;
|
|
background-size: 100%;
|
|
margin-bottom: 16px;
|
|
|
|
.pieChart {
|
|
width: 348px;
|
|
height: 200px;
|
|
}
|
|
|
|
.pieContent {
|
|
width: 335px;
|
|
height: 130px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.scrollBox {
|
|
// 内容两排显示
|
|
overflow: hidden;
|
|
}
|
|
|
|
.datalist {
|
|
width: 453px;
|
|
height: 130px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
align-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
.contentItem {
|
|
width: 145px;
|
|
height: 55px;
|
|
// margin-bottom: 16px;
|
|
margin-right: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
|
|
.line {
|
|
display: flex;
|
|
|
|
.dataline {
|
|
height: 4px;
|
|
width: 24px;
|
|
margin-right: 5px;
|
|
// background-color: #19cd17;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.defaultline {
|
|
height: 4px;
|
|
flex: 1;
|
|
background-color: #1b424f;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-family: "PingFang SC";
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
letter-spacing: 0em;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
margin: 4px 0 2px;
|
|
}
|
|
|
|
.num {
|
|
font-family: "Furore";
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 23px;
|
|
letter-spacing: 0em;
|
|
color: #ffffff;
|
|
// text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 各乡镇应急广播建设情况统计
|
|
.emergency-broadcast {
|
|
width: 348px;
|
|
height: 210px;
|
|
background: url("../../assets/welcome/qktj-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.turntable {
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 600px;
|
|
background-image: url("../../assets/ScreenView/turntable.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid #8eddff;
|
|
border-radius: 8px;
|
|
|
|
.blue {
|
|
color: #01dbff;
|
|
}
|
|
|
|
.orange {
|
|
color: #ffa901;
|
|
}
|
|
|
|
.cyan {
|
|
color: #01f4ba;
|
|
}
|
|
|
|
.purple {
|
|
color: #d505dc;
|
|
}
|
|
|
|
.left {
|
|
margin-top: 50px;
|
|
margin-left: 70px;
|
|
width: 200px;
|
|
height: 80%;
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
right: 50px;
|
|
top: 20px;
|
|
width: 340px;
|
|
height: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.current {
|
|
width: 100%;
|
|
height: 150px;
|
|
border-bottom: 2px dashed #ffd28f;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
> div {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.menu-container {
|
|
background-color: transparent !important;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 70%;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
> div {
|
|
width: 45%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-left-left {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 450px;
|
|
height: 100%;
|
|
width: 373px;
|
|
z-index: 11;
|
|
}
|
|
|
|
.list {
|
|
font-family: "YouSheBiaoTiHei";
|
|
width: 230px;
|
|
height: 700px;
|
|
/*padding-top: 22px;*/
|
|
overflow: hidden;
|
|
margin-top: 80px;
|
|
|
|
.swiper-container {
|
|
height: 60% !important;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
height: 100px !important;
|
|
line-height: 100px;
|
|
color: #f5f5f5;
|
|
font-size: 40px;
|
|
/*margin-top: 60px;*/
|
|
/*margin-bottom: 60px;*/
|
|
letter-spacing: 1px;
|
|
|
|
.swiper-item {
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: flex-end;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//选中时swiper-item的样式
|
|
/deep/ .swiper-slide-active {
|
|
font-size: 40px !important;
|
|
background: linear-gradient(180deg, #fff5d3 0%, #ffd056 100%),
|
|
linear-gradient(0deg, #ffffff, #ffffff);
|
|
/*background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);*/
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/deep/ .ivu-modal-close {
|
|
margin: 10px 10px 0 0;
|
|
|
|
.ivu-icon-ios-close-empty {
|
|
color: #fff !important;
|
|
font-size: 36px !important;
|
|
}
|
|
}
|
|
|
|
/deep/ .ivu-modal-content {
|
|
background-color: transparent !important;
|
|
}
|
|
</style>
|
|
|