unicom
/
jtjsc-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

交畅智汇

master
ygs 4 months ago
parent
2b0c9e7a58
commit
e85f3c8555
1 changed files with 378 additions and 190 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 568
      src/views/jxzt/Jczh.vue

568
src/views/jxzt/Jczh.vue
View File

@ -1,162 +1,166 @@
<template> <template>
<div class="all"> <scale-box class="scale-box" :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="true">
<!--左侧--> <div class="all">
<div class="left-all"> <!--左侧-->
<div class="left-all-wai"><!--外层--> <div class="left-all">
<div class="left-title"></div> <div class="left-all-wai"><!--外层-->
<div class="left-conent"><!--内容--> <div class="left-title"></div>
<div class="left-title-gjzc"> <div class="left-conent"><!--内容-->
<!-- 国家政策 --> <div class="left-title-gjzc">
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> <!-- 国家政策 -->
<div style="Position: fixed;" class="left-guoJzc"></div> <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
<div style="margin-top: -3%;" class="ckgd"></div> <div style="Position: fixed;" class="left-guoJzc"></div>
</div> <div style="margin-top: -3%;" class="ckgd" @click="checkAll('')"></div>
<div v-for="(item,index) in left1Data" style="width: 100%;top:50px;"> </div>
<div style="width: 50%; float:left;"> <div v-for="(item,index) in left1Data" style="width: 100%;top:50px;">
<div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;"> <div style="width: 50%; float:left;">
{{ item.name }} <div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
</div> {{ item.name }}
<div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div> </div>
<div class="left-content-detail"> <div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div>
{{ item.content != null ? item.content : "" }} <div class="left-content-detail">
{{ item.content != null ? item.content : "" }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="left-title-gjzc"> <div class="left-title-gjzc">
<!-- 省级政策 --> <!-- 省级政策 -->
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
<div style="Position: fixed;" class="left-sJzc"></div> <div style="Position: fixed;" class="left-sJzc"></div>
<div style="margin-top: -3%;" class="ckgd"></div> <div style="margin-top: -3%;" class="ckgd" @click="checkAll('')"></div>
</div> </div>
<div v-for="(item,index) in left2Data" style="width: 100%;top:50px;"> <div v-for="(item,index) in left2Data" style="width: 100%;top:50px;">
<div style="width: 50%; float:left;"> <div style="width: 50%; float:left;">
<div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;"> <div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
{{ item.name }} {{ item.name }}
</div> </div>
<div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div> <div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div>
<div class="left-content-detail"> <div class="left-content-detail">
{{ item.content != null ? item.content : "" }} {{ item.content != null ? item.content : "" }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="left-title-gjzc"> <div class="left-title-gjzc">
<!-- 本厅政策 --> <!-- 本厅政策 -->
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
<div style="Position: fixed;" class="left-benTzd"></div> <div style="Position: fixed;" class="left-benTzd"></div>
<div style="margin-top: -3%;" class="ckgd"></div> <div style="margin-top: -3%;" class="ckgd" @click="checkAll('')"></div>
</div> </div>
<div v-for="(item,index) in left3Data" style="width: 100%;top:50px;"> <div v-for="(item,index) in left3Data" style="width: 100%;top:50px;">
<div style="width: 50%; float:left;"> <div style="width: 50%; float:left;">
<div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;"> <div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
{{ item.name }} {{ item.name }}
</div> </div>
<div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div> <div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div>
<div class="left-content-detail"> <div class="left-content-detail">
{{ item.content != null ? item.content : "" }} {{ item.content != null ? item.content : "" }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!--中间-->
<div class=" " style="width: 30%; height: 100%; float:left; margin-left: 2%; margin-right:2%;">
<div style="width: 100%; height: 100%; float:left;">
<div class="center-content"></div>
<div id="conterChart" style="width: 100%; height: 50%;"></div> <!--中间-->
<div class=" " style="width: 30%; height: 100%; float:left; margin-left: 2%; margin-right:2%;">
<div style="width: 100%; height: 100%; float:left;">
<div class="center-content"></div>
<div <div class="select_time">
style="width: 100%; height: 35%;background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);box-sizing: border-box;border: 1px solid;border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;"> <span v-bind:class="{ active: isActive }" @click="monthClick">月</span>
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> <span v-bind:class="{ active: isNotActive }" @click="yearClick">年</span>
<div class="left-yeWzy"></div>
<div style="margin-top: -4%;" class="ckgd"></div>
</div> </div>
<div style="width: 100%; height: 80%;"> <div id="conterChart" style="width: 100%; height: 50%;"></div>
<div>
<div class=" ">
<span class=" ">省政府</span>
<span class=" ">市场监督管理局</span>
<span class=" ">省公安厅</span>
</div>
<div class="z-content">
<div style="width: 100%; height: 10%; float:left; margin:1% 0 1% 0">
<div class="left-yeWzy"></div>
<div style="margin-top: -4%;" class="ckgd" @click="checkAll('')"></div>
</div>
<div style="float:left; width: 100%; height: 80%;">
<div class="ywzy">
<span v-bind:class="{ active: isDept }" @click="businessDept">省政府</span>
<span v-bind:class="{ active: isMarket }" @click="businessMarket">市场监督管理局</span>
<span v-bind:class="{ active: isPolice }" @click="businessPolice">省公安厅</span>
</div>
<div style="width: 100%;height: 95%;float: left;">
<div style="float: left;font-size: calc(100vw*12/1920);color: #FFFFFF;margin: 1% 2%">{{ ywData.time }}</div>
<div style="white-space: pre-wrap; float: left;font-size: calc(100vw*12/1920);color: #84ACE8;margin: 0 2%;text-align: left;">{{ ywData.content }}</div>
</div>
</div> </div>
</div> </div>
</div>
<div class="z-file"> <div class="z-file">
<div class="z-file-t"> <div class="z-file-t" style="margin-left: 0.5%">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/cxlwt.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/cxlwt.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">畅行瞭望台</div> <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">畅行瞭望台</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/ssjh.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/ssjh.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">三省交辉</div> <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">三省交辉</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/stlj.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/stlj.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">省途亮绩</div> <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">省途亮绩</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jczh.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jczh.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">交畅智汇</div> <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">交畅智汇</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/yjlh.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/yjlh.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">应急领航</div> <div style="float: left;width: 100%;height: 20%; font-size:calc(100vw*14/1920);">应急领航</div>
</div> </div>
<div class="z-file-t"> <div class="z-file-t">
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jwjd.png"></div> <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jwjd.png"></div>
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">吉问吉答</div> <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">吉问吉答</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!--右侧--> <!--右侧-->
<div style="width: 32%; height: 100%; float:left; margin-right: 1%"> <div style="width: 32%; height: 100%; float:left; margin-right: 1%">
<div style="width: 100%; height: 100%; float:left;"> <div style="width: 100%; height: 100%; float:left;">
<div class="right-content"></div> <div class="right-content"></div>
<div class="right-echarts"> <div class="right-echarts">
<div class="right-echarts-child"> <div class="right-echarts-child">
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/rx.png"></div> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/rx.png">
<div id="right1Chart" style="width:100%; height: 75%"></div> </div>
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> <div id="right1Chart" style="width:100%; height: 75%"></div>
</div> <div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
<div class="right-echarts-child"> </div>
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/rxs.png"></div> <div class="right-echarts-child">
<div id="right2Chart" style="width:100%; height: 75%"></div> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/rxs.png"></div>
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> <div id="right2Chart" style="width:100%; height: 75%"></div>
<div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
</div>
</div> </div>
</div>
<div class="right-echarts"> <div class="right-echarts">
<div class="right-echarts-child"> <div class="right-echarts-child">
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/tjzxx.png"></div> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/tjzxx.png"></div>
<div id="right3Chart" style="width:100%; height: 75%"></div> <div id="right3Chart" style="width:100%; height: 75%"></div>
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> <div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
</div> </div>
<div class="right-echarts-child"> <div class="right-echarts-child">
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/wlyq.png"></div> <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/wlyq.png"></div>
<div id="right4Chart" style="width:100%; height: 75%"></div> <div id="right4Chart" style="width:100%; height: 75%"></div>
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> <div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
</div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</scale-box>
</div>
</template> </template>
<script> <script>
@ -168,6 +172,11 @@ export default {
components: {getEchartInstance}, components: {getEchartInstance},
data() { data() {
return { return {
isActive: true,//月
isNotActive: false,//年
isDept: true,//省政府
isMarket: false,//市场监督管理局
isPolice: false,//省公安厅
left1Data: [ left1Data: [
{ {
name: '四好农村路', name: '四好农村路',
@ -204,22 +213,14 @@ export default {
content: ' 根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n' content: ' 根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n'
}, },
], ],
right1Chart: [ ywData:{
{value: 1048, name: '已处理'}, time:'2024/6/11',
{value: 735, name: '未处理'}, content:'对省十四届人大三次会议第0233号代表建议的答复\n'+
], '徐凤娟代表：\n' +
right2Chart: [ ' 您在省十四届人大三次会议上提出的《关于延长出租车驾驶员从业年龄的建议》收悉，经认真研究，现答复如下：\n' +
{value: 1048, name: '已处理'}, ' 首先，感谢您对出租汽车驾驶员从业资格管理工作的关心和支持。近年来，省委省政府、省交通运输厅高度重视道路运输从业资格“放管服”工作，于2023年，在全国率先实施出租汽车驾驶员从业资格考试省内异地约考，破解驾驶员报名难、考试难问题。拟于2024年7月1日前，实施出租汽车驾驶员巡游和网络预约从业资格“两考合一”，方便出租汽车驾驶员在巡游和网络预约两种业态之间从事经营活动，为人民群众在道路运输从业、就业、创业、择业创造良好环境。\n' +
{value: 735, name: '未处理'}, ''
], },
right3Chart: [
{value: 1048, name: '已处理回复'},
{value: 735, name: '未处理'},
],
right4Chart: [
{value: 1048, name: '已处理回复'},
{value: 735, name: '未处理'},
],
} }
}, },
created() { created() {
@ -238,37 +239,113 @@ export default {
this.rightThreeChart(); this.rightThreeChart();
this.rightFourChart(); this.rightFourChart();
}, },
conterChart() { //查询年数据
yearClick() {
this.isActive = false;
this.isNotActive = true;
this.conterChart('year');//数据回显
},
//查询月数据
monthClick() {
this.isActive = true;
this.isNotActive = false;
this.conterChart('month');//数据回显
},
businessDept() {
this.isDept = true;//省政府
this.isMarket = false;//市场监督管理局
this.isPolice = false;//省公安厅
this.getYwData('szf');
},
businessMarket() {
this.isDept = false;//省政府
this.isMarket = true;//市场监督管理局
this.isPolice = false;//省公安厅
this.getYwData('sjj');
},
businessPolice() {
this.isDept = false;//省政府
this.isMarket = false;//市场监督管理局
this.isPolice = true;//省公安厅
this.getYwData('gat');
},
//获取业务摘要信息
getYwData(item){
if (item === 'szf'){
//调用方法获取数据给ywData赋值
this.ywData.time = '2024-06-11';
// this.ywData.content = '';
}else if (item === 'sjj'){
//调用方法获取数据给ywData赋值
this.ywData.time = '2024/06/11';
// this.ywData.content = '';
}else{
//调用方法获取数据给ywData赋值
this.ywData.time = '2024-06-11';
// this.ywData.content = '';
}
},
conterChart(item) {
function fontSize(res){
let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontSize = (clientWidth/1920);
return res*fontSize;
}
let myChart = getEchartInstance("conterChart"); let myChart = getEchartInstance("conterChart");
let data = [];//年月
let zfData = [];//省政府
let sjjData = [];//市场监督管理局
let gatData = [];//省公安厅
if (item === 'year'){
//调用查询年数据方法
//给data，zfData，sjjData，gatData赋值
data = ['2019年', '2020', '2021年', '2022年', '2023年', '2024年']
zfData = [150, 232, 201, 154, 190, 330]
sjjData = [320, 332, 301, 334, 390, 230]
gatData = [120, 132, 101, 134, 190, 130]
}else{
//调用查询月数据方法
//给data，zfData，sjjData，gatData赋值
data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
zfData = [150, 232, 201, 154, 190, 230, 410, 201, 254, 290, 230, 410]
sjjData = [320, 332, 301, 334, 390, 330, 320, 301, 354, 390, 330, 210]
gatData = [120, 132, 101, 134, 290, 130, 130, 101, 154, 190, 130, 140]
}
let option = { let option = {
title: { title: {
text: '件', text: '件',
textStyle:{ textStyle: {
// color:'#ccc',//'red'，字体颜色 // color:'#ccc',//'red'，字体颜色
// fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格 // fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
// fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细 // fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
fontSize:14,//字体大小 fontSize: fontSize(18),//字体大小
lineHeight:18,//字体行高 lineHeight: 18,//字体行高
color:'#84ACE8',
}, },
textAlign:'auto',//整体（包括 text 和 subtext）的水平对齐 textAlign: 'auto',//整体（包括 text 和 subtext）的水平对齐
textVerticalAlign:'auto',//整体（包括 text 和 subtext）的垂直对齐 textVerticalAlign: 'auto',//整体（包括 text 和 subtext）的垂直对齐
padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距 padding: 0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
left:'auto',//'5' | '5%'，title 组件离容器左侧的距离 left: '5%',//'5' | '5%'，title 组件离容器左侧的距离
right:'auto',//'title 组件离容器右侧的距离 right: 'auto',//'title 组件离容器右侧的距离
top:'auto',//title 组件离容器上侧的距离 top: '5%',//title 组件离容器上侧的距离
bottom:'auto',//title 组件离容器下侧的距离 bottom: 'auto',//title 组件离容器下侧的距离
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['省政府', '市场监督管理局', '省公安厅'] data: ['省政府', '市场监督管理局', '省公安厅'],
textStyle:{
color:'#84ACE8',
fontSize: fontSize(12),//字体大小
},
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true,
}, },
toolbox: { toolbox: {
feature: { feature: {
@ -278,13 +355,24 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#84ACE8",
}
},
data: data
}, },
yAxis: { yAxis: {
splitLine:{ axisLabel: {//y轴文字的配置
show:true, textStyle: {
lineStyle:{ color: "#84ACE8",
type:'dashed'//Y轴坐标虚线 },
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'//Y轴坐标虚线
} }
}, },
type: 'value' type: 'value'
@ -294,26 +382,28 @@ export default {
name: '省政府', name: '省政府',
type: 'line', type: 'line',
// stack: 'Total', // stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410] data: zfData,
}, },
{ {
name: '市场监督管理局', name: '市场监督管理局',
type: 'line', type: 'line',
// stack: 'Total', // stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320, 201, 154, 190, 330, 210] data: sjjData
}, },
{ {
name: '省公安厅', name: '省公安厅',
type: 'line', type: 'line',
// stack: 'Total', // stack: 'Total',
data: [120, 132, 101, 134, 190, 130, 130, 101, 154, 190, 130, 140] data: gatData
} }
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
}, },
rightOneChart() { rightOneChart() {
let myChart = getEchartInstance("right1Chart"); let myChart = getEchartInstance("right1Chart");
let data = [ let data = [
{ {
name: "已处理", name: "已处理",
@ -343,7 +433,7 @@ export default {
// y: "40%" //距离上边的距离 // y: "40%" //距离上边的距离
// }, // },
//数据的颜色设置 //数据的颜色设置
color: ["#2BCB95", "#F6BD16"], color: ["#009862", "#5CC7A7"],
//鼠标移入显示的文字 //鼠标移入显示的文字
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
@ -355,11 +445,16 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 15, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center' left: 'center',
textStyle: {
color: "#84ACE8",
fontSize:10,
}
}, },
series: [ series: [
{ {
@ -374,7 +469,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 20, fontSize: 16,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -386,6 +481,7 @@ export default {
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
}, },
rightTwoChart() { rightTwoChart() {
let myChart = getEchartInstance("right2Chart"); let myChart = getEchartInstance("right2Chart");
@ -418,7 +514,7 @@ export default {
// y: "40%" //距离上边的距离 // y: "40%" //距离上边的距离
// }, // },
//数据的颜色设置 //数据的颜色设置
color: ["#F6BD16", "#FF3B30"], color: ["#DC8400", "#FFBF5F"],
//鼠标移入显示的文字 //鼠标移入显示的文字
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -431,11 +527,16 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 15, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center' left: 'center',
textStyle: {
color: "#84ACE8",
fontSize:10,
}
}, },
series: [ series: [
{ {
@ -451,7 +552,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 20, fontSize: 16,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -463,6 +564,7 @@ export default {
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
}, },
rightThreeChart() { rightThreeChart() {
let myChart = getEchartInstance("right3Chart"); let myChart = getEchartInstance("right3Chart");
@ -495,7 +597,7 @@ export default {
// y: "40%" //距离上边的距离 // y: "40%" //距离上边的距离
// }, // },
//数据的颜色设置 //数据的颜色设置
color: ["#365ADF", "#F6BD16"], color: ["#365ADF", "#6094E4"],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
@ -506,11 +608,16 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 15, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center' left: 'center',
textStyle: {
color: "#84ACE8",
fontSize:10,
}
}, },
series: [ series: [
{ {
@ -525,7 +632,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 20, fontSize: 16,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -537,6 +644,7 @@ export default {
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
}, },
rightFourChart() { rightFourChart() {
let myChart = getEchartInstance("right4Chart"); let myChart = getEchartInstance("right4Chart");
@ -569,7 +677,7 @@ export default {
// y: "40%" //距离上边的距离 // y: "40%" //距离上边的距离
// }, // },
//数据的颜色设置 //数据的颜色设置
color: ["#FD3F3F","#365ADF"], color: ["#FD3F3F", "#FF8B8B"],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
@ -580,11 +688,16 @@ export default {
// align: "left", // align: "left",
// itemGap: 20, //数据上下的距离 // itemGap: 20, //数据上下的距离
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
itemWidth: 15, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
// data: data, // data: data,
// top:'5%', // top:'5%',
bottom: '0%', bottom: '0%',
left: 'center' left: 'center',
textStyle: {
color: "#84ACE8",
fontSize:10,
}
}, },
series: [ series: [
{ {
@ -599,7 +712,7 @@ export default {
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 20, fontSize: 16,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
@ -611,13 +724,14 @@ export default {
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
}, },
//大屏跳转 //大屏跳转
toBigScreen(url) { checkAll(url) {
if (!url) { if (!url) {
return; return;
} }
this.$router.push(`/bigScreen/${url}`) this.$router.push(`/views/${url}`)
}, },
} }
@ -625,6 +739,13 @@ export default {
</script> </script>
<style scoped> <style scoped>
html, body{
width: 100%;
height: 1080px;
margin-top: 0;
}
.all { .all {
width: 100%; width: 100%;
height: calc(100vh - 80px); height: calc(100vh - 80px);
@ -658,7 +779,7 @@ export default {
.left-conent { .left-conent {
width: 100%; width: 100%;
height: 95%; height: 90%;
float: left; float: left;
} }
@ -668,7 +789,7 @@ export default {
float: left; float: left;
background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%); background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);
box-sizing: border-box; box-sizing: border-box;
border: 1px solid; border: calc(100vw*2/1920) solid;
border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2; border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;
} }
@ -708,15 +829,19 @@ export default {
} }
.left-content-detail { .left-content-detail {
white-space: pre-wrap;
margin-left: 2%; margin-left: 2%;
font-size: 8px; font-size: calc(100vw*12/1920);
color: #84ACE8; color: #84ACE8;
letter-spacing: 0em; letter-spacing: 0em;
text-overflow: -o-ellipsis-lastline; //text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
//-webkit-line-clamp: 4; //line-clamp: 12; -webkit-box-orient: vertical; line-height: 1.5em;
-webkit-line-clamp: 8;
//line-clamp: 12;
-webkit-box-orient: vertical;
} }
.ckgd { .ckgd {
@ -727,6 +852,7 @@ export default {
background-image: url('../../assets/img/ckgd.png'); background-image: url('../../assets/img/ckgd.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 80%; background-size: 100% 80%;
cursor:pointer;
} }
.center-content { .center-content {
@ -735,7 +861,7 @@ export default {
background-image: url('../../assets/img/hyxt.png'); background-image: url('../../assets/img/hyxt.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 18px; font-size: calc(100vw*20/1920);
} }
.right-content { .right-content {
@ -744,13 +870,13 @@ export default {
background-image: url('../../assets/img/bxjy.png'); background-image: url('../../assets/img/bxjy.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 18px; font-size: calc(100vw*20/1920);
} }
.right-echarts { .right-echarts {
float: left; float: left;
width: 100%; width: 100%;
height: 47%; height: 46%;
} }
.right-echarts-child { .right-echarts-child {
@ -762,13 +888,13 @@ export default {
.z-file { .z-file {
width: 100%; width: 100%;
height: 10%; height: 15%;
margin-bottom: 0px; margin-bottom: 0px;
} }
.z-file-t { .z-file-t {
float: left; float: left;
width: 16%; width: 16.5%;
height: 100%; height: 100%;
} }
@ -778,4 +904,66 @@ export default {
height: 70%; height: 70%;
} }
.z-content {
width: 100%;
height: 30%;
background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);
box-sizing: border-box;
border: calc(100vw*2/1920) solid;
border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;
}
.select_time {
cursor:pointer;
position:relative;
float: right;
background: #1e3d64;
margin-top: 2%;
//position: absolute;
z-index: 999;
border-radius: calc(100vh*2/1080) calc(100vh*2/1080);
border: #52A5E7 calc(100vw*1/1920) solid;
}
.select_time span {
display: block;
width: calc(100vw*30/1920);
height: calc(100vh*20/1080);
float: left;
text-align: center;
line-height: calc(100vh*20/1080);
color: #FFFFFF;
font-size: calc(100vw*14/1920);
}
.select_time .active {
background-color: #52A5E7;
color: #FFFFFF;
}
.ywzy {
cursor:pointer;
position:relative;
float: left;
z-index: 999;
color: #84ACE8;
width: 100%;
padding-bottom: 1%;
height: 2vh;
}
.ywzy span {
display: block;
float: left;
text-align: center;
color: #84ACE8;
font-size: calc(100vw*16/1920);
margin-left: 2%;
}
.ywzy .active {
color: #FFFFFF;
font-weight: bold;
border-bottom: #30AEF5 calc(100vw*2/1920) solid;
}
</style> </style>

Write Preview
Loading…
Cancel
Save