修复大屏样式
parent
60b880930a
commit
e7b424885a
|
|
@ -124,6 +124,32 @@ body {
|
|||
height: 54px;
|
||||
line-height: 54px;
|
||||
}
|
||||
.el-pagination {
|
||||
line-height: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.el-pagination .el-pagination__total {
|
||||
font-size: 24px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
.el-pagination span {
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.el-pagination button,
|
||||
.el-pagination .number {
|
||||
font-size: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-pagination .el-icon {
|
||||
font-size: 24px !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 2561px) {
|
||||
.w-scroll::-webkit-scrollbar {
|
||||
|
|
@ -172,6 +198,38 @@ body {
|
|||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.el-pagination {
|
||||
line-height: 48px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.el-pagination .el-pagination__total {
|
||||
font-size: 30px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
.el-pagination span {
|
||||
font-size: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.el-pagination button,
|
||||
.el-pagination .number {
|
||||
font-size: 30px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.el-pagination .el-icon {
|
||||
font-size: 30px !important;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
align-items: center;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
.el-date-editor * {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.el-picker-panel__body-wrapper * {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
.img-openwin {
|
||||
position: absolute;
|
||||
|
|
@ -842,6 +900,28 @@ table {
|
|||
left: 172px;
|
||||
background: url("../images/run_circle.png") no-repeat center / 100% 100%;
|
||||
}
|
||||
.chart-text {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 172px;
|
||||
z-index: 10;
|
||||
display: inline-flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.chart-text .chart-text-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #0dd2fd;
|
||||
}
|
||||
.chart-text .chart-text-sub-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #a5b5f0;
|
||||
}
|
||||
.chart-gif {
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 1s;
|
||||
|
|
|
|||
|
|
@ -133,6 +133,34 @@ body{
|
|||
height: 54px;
|
||||
line-height: 54px;
|
||||
}
|
||||
.el-pagination {
|
||||
line-height: 30px;
|
||||
margin-top: 40px;
|
||||
.el-pagination__total {
|
||||
font-size: 24px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
span {
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button,
|
||||
.number {
|
||||
font-size: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 24px !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -184,6 +212,44 @@ body{
|
|||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
line-height: 48px;
|
||||
margin-top: 40px;
|
||||
.el-pagination__total {
|
||||
font-size: 30px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
span {
|
||||
font-size: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button,
|
||||
.number {
|
||||
font-size: 30px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 30px !important;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
align-items: center;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
}
|
||||
.el-date-editor{
|
||||
*{
|
||||
font-size:16px !important;
|
||||
}
|
||||
}
|
||||
.el-picker-panel__body-wrapper{
|
||||
* {
|
||||
font-size: 16px !important; }
|
||||
}
|
||||
}
|
||||
.img-openwin{
|
||||
position: absolute;
|
||||
|
|
@ -840,6 +906,29 @@ table{
|
|||
left: 172px;
|
||||
background: url("../images/run_circle.png") no-repeat center/100% 100%;
|
||||
}
|
||||
.chart-text {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 172px;
|
||||
z-index: 10;
|
||||
display: inline-flex;
|
||||
display: inline-flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.chart-text-title{
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #0dd2fd;
|
||||
}
|
||||
.chart-text-sub-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #a5b5f0;
|
||||
}
|
||||
}
|
||||
.chart-gif{
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 1s;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,34 @@
|
|||
<template>
|
||||
<div :style="{ 'height': height + 'px' }" ref="chart">
|
||||
|
||||
</div>
|
||||
<div :style="{ 'height': height + 'px' }" ref="chart"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
data: {
|
||||
type: Array,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option:{},
|
||||
|
||||
option: {},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
init() {
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
getChartData() {
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.chart);
|
||||
this.echart(chChart,this.data)
|
||||
var chChart = echarts.init(this.$refs.chart)
|
||||
this.echart(chChart, this.data)
|
||||
},
|
||||
echart(chChart,chartData){
|
||||
echart(chChart, chartData) {
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
|
@ -50,30 +47,31 @@ export default {
|
|||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
prop.push(((value[j] / total) * 100).toFixed(1))
|
||||
}
|
||||
|
||||
let is1K = this.$dpi() == '1K'
|
||||
let is2K = this.$dpi() == '2K'
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "-10%",
|
||||
top: "2%",
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '-10%',
|
||||
top: '2%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
type: 'value',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "14",
|
||||
color: '#cbdaff',
|
||||
fontSize: is1K ? 14 : is2K ? 18 : 20,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -88,24 +86,24 @@ export default {
|
|||
data: text,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "16",
|
||||
color: '#cbdaff',
|
||||
fontSize: is1K ? 16 : is2K ? 20 : 30,
|
||||
},
|
||||
formatter: function(params,i){
|
||||
var text = "{a|" + value[i] + "}{a| "+ prop[i]+ "%}";
|
||||
return text;
|
||||
formatter: function (params, i) {
|
||||
var text = '{a|' + value[i] + '}{a| ' + prop[i] + '%}'
|
||||
return text
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: '16px',
|
||||
color: "#cbdaff",
|
||||
fontSize: is1K ? 16 : is2K ? 20 : 30,
|
||||
color: '#cbdaff',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -114,39 +112,39 @@ export default {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
type: 'bar',
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
color: '#6ab9fe',
|
||||
},
|
||||
},
|
||||
barWidth: 8,
|
||||
barWidth: is1K ? 8 : is2K ? 12 : 16,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
barGap: "-100%",
|
||||
type: 'bar',
|
||||
barWidth: is1K ? 8 : is2K ? 12 : 16,
|
||||
barGap: '-100%',
|
||||
data: bgd,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
color: 'rgba(24,31,68,1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
chChart.setOption(this.option)
|
||||
window.onresize = chChart.resize
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
data: function (n,o) {
|
||||
watch: {
|
||||
data: function (n, o) {
|
||||
this.getChartData(this.data)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -337,12 +337,14 @@ export default {
|
|||
margin-right: 60px !important;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
width: 260px !important;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-sel-project-pop {
|
||||
transform: scale(1.5);
|
||||
width: 200px;
|
||||
width: 330px;
|
||||
min-width: unset !important;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
|
@ -383,12 +385,14 @@ export default {
|
|||
margin-right: 100px !important;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
width: 273px !important;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-sel-project-pop {
|
||||
transform: scale(2);
|
||||
width: 200px;
|
||||
width: 300px;
|
||||
min-width: unset !important;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<div class='project-overview-chart' style="position: relative" @click="doClick">
|
||||
<div :style="'height:'+height+'px;'+(width?('width:'+width+'px;'):'')" ref="warningPieChart">
|
||||
|
||||
</div>
|
||||
<div class="project-overview-chart" style="position: relative" @click="doClick">
|
||||
<div :style="'height:'+height+'px;'+(width?('width:'+width+'px;'):'')" ref="warningPieChart"></div>
|
||||
<div class="chart-gif chart-overview-gif" :style="'top:'+gifTop"></div>
|
||||
<div v-if="htmlShow" class="chart-text" :style="'top:'+gifTop">
|
||||
<div class="chart-text-title">{{title1 }}</div>
|
||||
<div class="chart-text-sub-title">{{subTitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -12,167 +14,178 @@ export default {
|
|||
name: 'JhbigscreenProjectOverviewChart',
|
||||
|
||||
props: {
|
||||
txtTop:{
|
||||
type:String,
|
||||
default:'0'
|
||||
htmlShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
gifTop:{
|
||||
type:String,
|
||||
default:'63px'
|
||||
txtTop: {
|
||||
type: String,
|
||||
default: '0',
|
||||
},
|
||||
fn:{
|
||||
type:Function
|
||||
gifTop: {
|
||||
type: String,
|
||||
default: '63px',
|
||||
},
|
||||
typedata:{
|
||||
fn: {
|
||||
type: Function,
|
||||
},
|
||||
typedata: {
|
||||
type: Array,
|
||||
},
|
||||
width:{
|
||||
type:Number
|
||||
width: {
|
||||
type: Number,
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
height: {
|
||||
type: Number,
|
||||
},
|
||||
text:{
|
||||
type:String
|
||||
text: {
|
||||
type: String,
|
||||
},
|
||||
legendOpt:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
legendOpt: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
maintitle:{
|
||||
type:[String,Number],
|
||||
default:''
|
||||
maintitle: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
sp: {
|
||||
type: String,
|
||||
default: '\n',
|
||||
},
|
||||
sp:{
|
||||
type:String,
|
||||
default:"\n"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active:0,
|
||||
option:{}
|
||||
active: 0,
|
||||
option: {},
|
||||
title1: '',
|
||||
subTitle: '',
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
doClick(){
|
||||
this.$emit("clickme");
|
||||
doClick() {
|
||||
this.$emit('clickme')
|
||||
},
|
||||
init(){
|
||||
init() {
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
getChartData() {
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.warningPieChart);
|
||||
this.echartPie(chChartPie,this.typedata)
|
||||
var chChartPie = echarts.init(this.$refs.warningPieChart)
|
||||
this.echartPie(chChartPie, this.typedata)
|
||||
},
|
||||
echartPie(chChart,chartData){
|
||||
echartPie(chChart, chartData) {
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var total_datas = 0;
|
||||
var data = [];
|
||||
var legendData = [];
|
||||
var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef']
|
||||
for (let i = 0; i <chartData.length ; i++) {
|
||||
total_datas += Number(chartData[i].value);
|
||||
var total_datas = 0
|
||||
var data = []
|
||||
var legendData = []
|
||||
var color = ['#4974ff', '#52aef7', '#6863d7', '#1d5d89', '#20e6ff', '#67feef']
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
total_datas += Number(chartData[i].value)
|
||||
legendData.push(chartData[i].name)
|
||||
data.push(
|
||||
{
|
||||
data.push({
|
||||
value: chartData[i].value,
|
||||
name: chartData[i].name,
|
||||
itemStyle: {
|
||||
//颜色渐变
|
||||
color: color[i]
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
/* let total = chartData.reduce((a, b) => {
|
||||
return a + b.value;
|
||||
}, 0);*/
|
||||
|
||||
let is1K = this.$dpi() == '1K'
|
||||
let is2K = this.$dpi() == '2K'
|
||||
let legendOption = {
|
||||
top: 'center',
|
||||
|
||||
top: "center",
|
||||
|
||||
orient: "vertical",
|
||||
icon: "circle",
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
itemWidth: 12,
|
||||
itemGap: 8,
|
||||
textStyle: {
|
||||
color: "#c3dbfd",
|
||||
fontSize: 14,
|
||||
color: '#c3dbfd',
|
||||
fontSize: is1K ? 14 : is2K ? 18 : 24,
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
color: '#c3dbfd',
|
||||
fontSize: is1K ? 14 : is2K ? 18 : 24,
|
||||
padding: [10, 5, 20, 5],
|
||||
},
|
||||
percent: {
|
||||
color: "#18DB9F",
|
||||
fontSize: 16,
|
||||
color: '#18DB9F',
|
||||
fontSize: is1K ? 16 : is2K ? 24 : 32,
|
||||
padding: [0, 5, 0, 5],
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (name) =>{
|
||||
let res = chartData.filter((v) => v.name === name);
|
||||
let percent = ((res[0].value * 100) / total_datas).toFixed(1);
|
||||
if(total_datas==0){
|
||||
percent=0;
|
||||
formatter: (name) => {
|
||||
let res = chartData.filter((v) => v.name === name)
|
||||
let percent = ((res[0].value * 100) / total_datas).toFixed(1)
|
||||
if (total_datas == 0) {
|
||||
percent = 0
|
||||
}
|
||||
return "{name| " + name + "}"+this.sp+"{val|" + res[0].value + "} {percent|" + percent + "%}";
|
||||
return '{name| ' + name + '}' + this.sp + '{val|' + res[0].value + '} {percent|' + percent + '%}'
|
||||
},
|
||||
};
|
||||
let opt={...legendOption,...(this.legendOpt||{})};
|
||||
}
|
||||
let opt = { ...legendOption, ...(this.legendOpt || {}) }
|
||||
this.title1 = this.maintitle || total_datas
|
||||
this.subTitle = this.text
|
||||
this.option = {
|
||||
title: {
|
||||
text: this.maintitle||total_datas,
|
||||
show: !this.htmlShow,
|
||||
text: this.maintitle || total_datas,
|
||||
subtext: this.text,
|
||||
textAlign:'center',
|
||||
top:this.txtTop,
|
||||
itemGap :10,
|
||||
textAlign: 'center',
|
||||
top: this.txtTop,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: "#0dd2fd",
|
||||
color: '#0dd2fd',
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
align: "center",
|
||||
fontWeight: 'bold',
|
||||
align: 'center',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#a5b5f0",
|
||||
color: '#a5b5f0',
|
||||
fontSize: 12,
|
||||
align: "center",
|
||||
align: 'center',
|
||||
},
|
||||
padding:[95,0,0,110],
|
||||
left:'left'
|
||||
|
||||
padding: [95, 0, 0, 110],
|
||||
left: 'left',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} <br/>{c} ({d}%)"
|
||||
formatter: '{b} <br/>{c} ({d}%)',
|
||||
textStyle: {
|
||||
fontSize: is1K ? 14 : is2K ? 18 : 24,
|
||||
},
|
||||
},
|
||||
|
||||
legend: [
|
||||
{
|
||||
right: 10,
|
||||
data: legendData,
|
||||
align: "left",
|
||||
align: 'left',
|
||||
...opt,
|
||||
},
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "品类金额占比",
|
||||
type: "pie",
|
||||
center: ["25%", "50%"],
|
||||
radius: ["46%", "63%"],
|
||||
name: '品类金额占比',
|
||||
type: 'pie',
|
||||
center: ['25%', '50%'],
|
||||
radius: ['46%', '63%'],
|
||||
data: data,
|
||||
label: {
|
||||
show: false,
|
||||
|
|
@ -180,18 +193,17 @@ export default {
|
|||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 5,
|
||||
borderColor: "#051a36"
|
||||
}
|
||||
borderColor: '#051a36',
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
name: "外边框",
|
||||
type: "pie",
|
||||
name: '外边框',
|
||||
type: 'pie',
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
center: ["25%", "50%"],
|
||||
radius: ["70%", "70%"],
|
||||
center: ['25%', '50%'],
|
||||
radius: ['70%', '70%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
|
|
@ -200,11 +212,11 @@ export default {
|
|||
data: [
|
||||
{
|
||||
value: 9,
|
||||
name: "",
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 3,
|
||||
borderColor: "#152c65",
|
||||
borderColor: '#152c65',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -212,13 +224,13 @@ export default {
|
|||
},
|
||||
],
|
||||
}
|
||||
if(this.fn){
|
||||
this.option=this.fn(this.option);
|
||||
if (this.fn) {
|
||||
this.option = this.fn(this.option)
|
||||
}
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
chChart.setOption(this.option)
|
||||
window.onresize = chChart.resize
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,41 @@
|
|||
<template>
|
||||
<div class="project-ai-warning main-page">
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="今日预警" style="position: relative">
|
||||
<div class="project-ai-warning main-page h100">
|
||||
<el-col :span="6" class="h100">
|
||||
<module-one-1-1 label="今日预警" style="position: relative" class="chart-box1">
|
||||
<project-overview-chart
|
||||
:key="'ai1' + overviewDay"
|
||||
:key="'ai1' + overviewDay+chartKey"
|
||||
:sp="''"
|
||||
:htmlShow="true"
|
||||
:maintitle="overviewTotalDay"
|
||||
:legend-opt="legendOpt1"
|
||||
:typedata="typeDistributionDataDay"
|
||||
:text="overviewTextDay"
|
||||
:height="230"
|
||||
:height="chart1Height"
|
||||
></project-overview-chart>
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="预警概况" style="position: relative">
|
||||
<module-one-1-1 label="预警概况" style="position: relative" class="chart-box2">
|
||||
<project-overview-chart
|
||||
:key="'ai2' + overview"
|
||||
:key="'ai2' + overview+chartKey"
|
||||
:sp="''"
|
||||
:fn="changeChart2"
|
||||
:htmlShow="true"
|
||||
:maintitle="overviewTotal"
|
||||
:legend-opt="legendOpt2"
|
||||
:typedata="typeDistributionData"
|
||||
:text="overviewText"
|
||||
:height="230"
|
||||
:height="chart2Height"
|
||||
></project-overview-chart>
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="每日预警趋势">
|
||||
<trend-chart-line :height="280" :data="warningData"></trend-chart-line>
|
||||
<trend-chart-line :height="chart3Height" :key="chartKey" :data="warningData"></trend-chart-line>
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-col :span="18" class="h100 right-box">
|
||||
<module-one-1-3 label="今日预警详情" :key="todayKey" style="position: relative">
|
||||
<div class="today-list ai-list" v-if="todayList.length > 0">
|
||||
<div v-for="(it, idx) in todayList" :key="idx" class="today-item ai-item">
|
||||
<div class="item-left">
|
||||
<el-image
|
||||
style="width: 180px; height: 100px"
|
||||
:src="it.imageUrl + '.min.jpg'"
|
||||
:preview-src-list="[it.imageUrl]"
|
||||
>
|
||||
</el-image>
|
||||
<el-image :src="it.imageUrl + '.min.jpg'" :preview-src-list="[it.imageUrl]"></el-image>
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="item-row">
|
||||
|
|
@ -64,8 +62,8 @@
|
|||
|
||||
<div v-if="todayList.length == 0" class="not-data">暂无预警数据</div>
|
||||
</module-one-1-3>
|
||||
<module-one-2-3 label="预警概况明细" style="position: relative">
|
||||
<div style="position: absolute; right: 0px; top: 4px">
|
||||
<module-one-2-3 label="预警概况明细" style="position: relative" class="ai-list-box">
|
||||
<div style="position: absolute; right: 0px; top: -22px;z-index: 9999;">
|
||||
<el-date-picker
|
||||
class="bg-date-picker"
|
||||
v-model="selDate"
|
||||
|
|
@ -81,40 +79,25 @@
|
|||
></el-date-picker>
|
||||
</div>
|
||||
<div class="ai-nav">
|
||||
<div
|
||||
class="nav-item ai-content-nav-con ai-content-nav"
|
||||
:class="selType == 0 ? 'active' : ''"
|
||||
@click="doSelType(0)"
|
||||
>
|
||||
全部
|
||||
</div>
|
||||
<div class="nav-item ai-content-nav-con ai-content-nav" :class="selType == 0 ? 'active' : ''" @click="doSelType(0)">全部</div>
|
||||
<div
|
||||
class="nav-item ai-content-nav-con ai-content-nav"
|
||||
v-for="(it, idx) in aiTypes"
|
||||
:class="selType == it.value ? 'active' : ''"
|
||||
@click="doSelType(it.value)"
|
||||
:key="it.value"
|
||||
>
|
||||
{{ it.label }}
|
||||
</div>
|
||||
>{{ it.label }}</div>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<div class="ai-list" v-if="listDatas.length > 0">
|
||||
<div v-for="(it, idx) in listDatas" :key="idx" class="today-item ai-item">
|
||||
<div class="item-left">
|
||||
<el-image
|
||||
style="width: 180px; height: 100px"
|
||||
:src="it.imageUrl + '.min.jpg'"
|
||||
:preview-src-list="[it.imageUrl]"
|
||||
>
|
||||
</el-image>
|
||||
<el-image :src="it.imageUrl + '.min.jpg'" :preview-src-list="[it.imageUrl]"></el-image>
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="item-row">
|
||||
<div>预警名称:</div>
|
||||
<div style="color: rgba(1, 169, 255, 1)">
|
||||
{{ it.alarmTypeName }}
|
||||
</div>
|
||||
<div style="color: rgba(1, 169, 255, 1)">{{ it.alarmTypeName }}</div>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div>预警时间:</div>
|
||||
|
|
@ -143,64 +126,20 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartKey: 0,
|
||||
chart1Height: 230,
|
||||
chart2Height: 230,
|
||||
chart3Height: 280,
|
||||
dpi: '',
|
||||
overview: 0,
|
||||
overviewDay: 0,
|
||||
overviewTotal: 0,
|
||||
legendOpt1: {
|
||||
icon: "rect",
|
||||
orient: "horizontal",
|
||||
itemWidth: "50%",
|
||||
left: 240,
|
||||
right: "10%",
|
||||
itemWidth: 20,
|
||||
itemGap: 20,
|
||||
itemHeight: 20,
|
||||
textStyle: {
|
||||
padding: [0, 0, 0, 0],
|
||||
fontSize: 10,
|
||||
color: "#c3dbfd",
|
||||
align: "center",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
padding: [5, 2, 5, 2],
|
||||
},
|
||||
percent: {
|
||||
color: "#4676FD",
|
||||
padding: [0, 2, 0, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
legendOpt2: {
|
||||
icon: "rect",
|
||||
orient: "horizontal",
|
||||
itemWidth: "50%",
|
||||
left: 240,
|
||||
right: "10%",
|
||||
itemWidth: 20,
|
||||
itemGap: 20,
|
||||
itemHeight: 20,
|
||||
textStyle: {
|
||||
padding: [0, 0, 2, 0],
|
||||
fontSize: 10,
|
||||
color: "#c3dbfd",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
padding: [5, 2, 5, 2],
|
||||
},
|
||||
percent: {
|
||||
color: "#4676FD",
|
||||
padding: [0, 2, 0, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
overviewText: "累计预警",
|
||||
legendOpt1: {},
|
||||
legendOpt2: {},
|
||||
overviewText: '累计预警',
|
||||
//预警概况
|
||||
typeDistributionData: [],
|
||||
overviewTextDay: "今日预警",
|
||||
overviewTextDay: '今日预警',
|
||||
overviewTotalDay: 0,
|
||||
typeDistributionDataDay: [],
|
||||
todayPage: {
|
||||
|
|
@ -222,100 +161,188 @@ export default {
|
|||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
intervalTimes: null,
|
||||
warningData: [],
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch("ChangeNav", 310);
|
||||
this.$bus.$on("projectChange", (prj) => {
|
||||
this.selProject = prj;
|
||||
this.init();
|
||||
});
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
this.init();
|
||||
this.$store.dispatch('ChangeNav', 310)
|
||||
this.$bus.$on('projectChange', (prj) => {
|
||||
this.selProject = prj
|
||||
this.init()
|
||||
})
|
||||
this.selProject = this.$store.getters.selProject
|
||||
this.init()
|
||||
this.dpi = this.$dpi()
|
||||
this.resize()
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.dpi != this.$dpi()) {
|
||||
this.dpi = this.$dpi()
|
||||
this.resize()
|
||||
}
|
||||
})
|
||||
this.setOpts()
|
||||
},
|
||||
methods: {
|
||||
setOpts() {
|
||||
let is1K = this.$dpi() == '1K'
|
||||
let is2K = this.$dpi() == '2K'
|
||||
this.legendOpt1 = {
|
||||
icon: 'rect',
|
||||
orient: 'horizontal',
|
||||
itemWidth: '50%',
|
||||
left: 240,
|
||||
right: '10%',
|
||||
itemWidth: 20,
|
||||
itemGap: 20,
|
||||
itemHeight: 20,
|
||||
textStyle: {
|
||||
padding: [0, 0, 0, 0],
|
||||
fontSize: is1K ? 10 : is2K ? 14 : 16,
|
||||
color: '#c3dbfd',
|
||||
align: 'center',
|
||||
rich: {
|
||||
name: {
|
||||
color: '#c3dbfd',
|
||||
fontSize: is1K ? 10 : is2K ? 14 : 16,
|
||||
padding: [5, 2, 5, 2],
|
||||
},
|
||||
percent: {
|
||||
color: '#4676FD',
|
||||
fontSize: is1K ? 10 : is2K ? 14 : 16,
|
||||
padding: [0, 2, 0, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
this.legendOpt2 = {
|
||||
icon: 'rect',
|
||||
orient: 'horizontal',
|
||||
itemWidth: '50%',
|
||||
left: 240,
|
||||
right: '10%',
|
||||
itemWidth: is1K ? 20 : is2K ? 30 : 40,
|
||||
itemGap: 20,
|
||||
itemHeight: is1K ? 20 : is2K ? 30 : 40,
|
||||
textStyle: {
|
||||
padding: [0, 0, 2, 0],
|
||||
fontSize: is1K ? 10 : is2K ? 14 : 18,
|
||||
color: '#c3dbfd',
|
||||
rich: {
|
||||
name: {
|
||||
color: '#c3dbfd',
|
||||
fontSize: is1K ? 10 : is2K ? 14 : 16,
|
||||
padding: [5, 2, 5, 2],
|
||||
},
|
||||
percent: {
|
||||
color: '#4676FD',
|
||||
fontSize: is1K ? 10 : is2K ? 14 : 16,
|
||||
padding: [0, 2, 0, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
changeChart2(opt) {
|
||||
console.log(opt)
|
||||
if (this.$dpi() == '1K') {
|
||||
return opt
|
||||
} else if (this.$dpi() == '2K') {
|
||||
opt.legend[0].left = 360
|
||||
return opt
|
||||
} else {
|
||||
opt.legend[0].left = 500
|
||||
return opt
|
||||
}
|
||||
},
|
||||
resize() {
|
||||
this.chartKey++
|
||||
let is1K = this.$dpi() == '1K'
|
||||
let is2K = this.$dpi() == '2K'
|
||||
this.chart1Height = is1K ? 230 : is2K ? 300 : 500
|
||||
this.chart2Height = is1K ? 230 : is2K ? 300 : 500
|
||||
this.chart3Height = is1K ? 250 : is2K ? 300 : 500
|
||||
},
|
||||
init() {
|
||||
if (!this.selProject) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.$api.dict("aibox_alarm_type").then((d) => {
|
||||
this.aiTypes = d || [];
|
||||
});
|
||||
this.loadList();
|
||||
this.loadTodayList();
|
||||
this.getAiVideoAlertorTypeCount();
|
||||
this.daysTrendView();
|
||||
this.$api.dict('aibox_alarm_type').then((d) => {
|
||||
this.aiTypes = d || []
|
||||
})
|
||||
this.loadList()
|
||||
this.loadTodayList()
|
||||
this.getAiVideoAlertorTypeCount()
|
||||
this.daysTrendView()
|
||||
},
|
||||
doSelType(n) {
|
||||
if (this.selType != n) {
|
||||
this.selType = n;
|
||||
this.listPage.pageIndex = 1;
|
||||
this.loadList();
|
||||
this.selType = n
|
||||
this.listPage.pageIndex = 1
|
||||
this.loadList()
|
||||
}
|
||||
},
|
||||
dtChange(init) {
|
||||
this.listPage.pageIndex = 1;
|
||||
this.loadList();
|
||||
this.listPage.pageIndex = 1
|
||||
this.loadList()
|
||||
},
|
||||
handleTodayCurrentChange(n) {
|
||||
this.todayPage.pageIndex = n;
|
||||
this.loadTodayList();
|
||||
this.todayPage.pageIndex = n
|
||||
this.loadTodayList()
|
||||
},
|
||||
handleListCurrentChange(n) {
|
||||
this.listPage.pageIndex = n;
|
||||
this.loadList();
|
||||
this.listPage.pageIndex = n
|
||||
this.loadList()
|
||||
},
|
||||
loadList() {
|
||||
let postData = {
|
||||
pageNum: this.listPage.pageIndex,
|
||||
pageSize: this.listPage.pageSize,
|
||||
projectId: this.selProject.id,
|
||||
};
|
||||
}
|
||||
if (this.selDate.length > 0) {
|
||||
let _params = {
|
||||
beginTime: this.selDate[0],
|
||||
endTime: this.selDate[1],
|
||||
};
|
||||
postData.params = _params;
|
||||
}
|
||||
postData.params = _params
|
||||
}
|
||||
if (this.selType != 0) {
|
||||
postData.alarmType = this.selType;
|
||||
postData.alarmType = this.selType
|
||||
}
|
||||
this.$api.aiWarning.list(postData).then((d) => {
|
||||
this.listPage.total = d.total || 0;
|
||||
this.listDatas = d.rows || [];
|
||||
this.listKey++;
|
||||
});
|
||||
this.listPage.total = d.total || 0
|
||||
this.listDatas = d.rows || []
|
||||
this.listKey++
|
||||
})
|
||||
},
|
||||
loadTodayList() {
|
||||
let postData = {
|
||||
|
|
@ -323,75 +350,72 @@ export default {
|
|||
pageSize: this.todayPage.pageSize,
|
||||
projectId: this.selProject.id,
|
||||
params: {
|
||||
date: new Date().toLocaleDateString().replaceAll("/", "-"),
|
||||
date: new Date().toLocaleDateString().replaceAll('/', '-'),
|
||||
},
|
||||
};
|
||||
}
|
||||
this.$api.aiWarning.list(postData).then((d) => {
|
||||
this.todayPage.total = d.total || 0;
|
||||
this.todayList = d.rows || [];
|
||||
this.todayKey++;
|
||||
});
|
||||
this.todayPage.total = d.total || 80
|
||||
this.todayList = d.rows || []
|
||||
|
||||
this.todayKey++
|
||||
})
|
||||
},
|
||||
getAiVideoAlertorTypeCount() {
|
||||
//今日视图
|
||||
this.$api.aiWarning
|
||||
.groupCountByAlarmType(this.selProject.id, "Y")
|
||||
.then((response) => {
|
||||
this.$api.aiWarning.groupCountByAlarmType(this.selProject.id, 'Y').then((response) => {
|
||||
if (response.data) {
|
||||
let sum = 0;
|
||||
let sum = 0
|
||||
response.data.forEach((datum) => {
|
||||
sum += datum.value;
|
||||
});
|
||||
this.overviewTotalDay = sum;
|
||||
this.typeDistributionDataDay = response.data;
|
||||
this.overviewDay++;
|
||||
sum += datum.value
|
||||
})
|
||||
this.overviewTotalDay = sum
|
||||
this.typeDistributionDataDay = response.data
|
||||
this.overviewDay++
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
//累计视图
|
||||
this.$api.aiWarning
|
||||
.groupCountByAlarmType(this.selProject.id, "N")
|
||||
.then((response) => {
|
||||
this.$api.aiWarning.groupCountByAlarmType(this.selProject.id, 'N').then((response) => {
|
||||
if (response.data) {
|
||||
let sum = 0;
|
||||
let sum = 0
|
||||
response.data.forEach((datum) => {
|
||||
sum += datum.value;
|
||||
});
|
||||
this.overviewTotal = sum;
|
||||
this.typeDistributionData = response.data;
|
||||
this.overview++;
|
||||
sum += datum.value
|
||||
})
|
||||
this.overviewTotal = sum
|
||||
this.typeDistributionData = response.data
|
||||
this.overview++
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
daysTrendView() {
|
||||
this.$api.aiWarning.getDaysTrendView(this.selProject.id).then((response) => {
|
||||
if (response.data) {
|
||||
response.data.reverse();
|
||||
let _data1 = [];
|
||||
let _date8 = [];
|
||||
response.data.reverse()
|
||||
let _data1 = []
|
||||
let _date8 = []
|
||||
response.data.forEach((datum) => {
|
||||
_data1.push(datum.total);
|
||||
_date8.push(datum.create_time);
|
||||
});
|
||||
let _lineData = [];
|
||||
_lineData.push(_data1);
|
||||
let _color = ["#0078e7"];
|
||||
let _legend = ["预警总数"];
|
||||
_data1.push(datum.total)
|
||||
_date8.push(datum.create_time)
|
||||
})
|
||||
let _lineData = []
|
||||
_lineData.push(_data1)
|
||||
let _color = ['#0078e7']
|
||||
let _legend = ['预警总数']
|
||||
let _trendData = {
|
||||
lineData: _lineData,
|
||||
color: _color,
|
||||
legend: _legend,
|
||||
date: _date8,
|
||||
};
|
||||
this.warningData = _trendData;
|
||||
}
|
||||
});
|
||||
this.warningData = _trendData
|
||||
}
|
||||
})
|
||||
},
|
||||
initIntervalTimes() {
|
||||
this.intervalTimes = setInterval(this.init, 150000); // 每2.5分钟刷新一次
|
||||
this.intervalTimes = setInterval(this.init, 150000) // 每2.5分钟刷新一次
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scope>
|
||||
.project-ai-warning {
|
||||
|
|
@ -399,11 +423,15 @@ export default {
|
|||
top: 63px;
|
||||
left: 51px;
|
||||
}
|
||||
.chart-text {
|
||||
top: 63px;
|
||||
left: 51px;
|
||||
}
|
||||
.ai-list {
|
||||
padding: 0px 24px 8px;
|
||||
.ai-item {
|
||||
display: inline-flex;
|
||||
margin: 12px 12px 0px 0px;
|
||||
margin: 0px 12px 0px 0px;
|
||||
width: calc(33% - 12px);
|
||||
color: #ccc;
|
||||
line-height: 24px;
|
||||
|
|
@ -433,3 +461,144 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.project-ai-warning {
|
||||
.right-box {
|
||||
.screen-one-1-3 {
|
||||
height: calc(33% - 20px);
|
||||
}
|
||||
.screen-one-2-3 {
|
||||
height: calc(66% - 20px);
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
.ai-item {
|
||||
.el-image {
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-list-box {
|
||||
.module-ctx {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
.chart-box1 {
|
||||
.chart-gif,
|
||||
.chart-text {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
top: 80px !important;
|
||||
left: 74px !important;
|
||||
}
|
||||
.chart-text {
|
||||
.chart-text-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.chart-text-sub-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box2 {
|
||||
.chart-gif,
|
||||
.chart-text {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
top: 80px !important;
|
||||
left: 74px !important;
|
||||
}
|
||||
.chart-text {
|
||||
.chart-text-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.chart-text-sub-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
.ai-list {
|
||||
.ai-item {
|
||||
line-height: 30px;
|
||||
.el-image {
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-nav {
|
||||
padding: 20px 12px;
|
||||
.ai-content-nav-con {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 2561px) {
|
||||
.chart-box1 {
|
||||
.chart-gif,
|
||||
.chart-text {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
top: 138px !important;
|
||||
left: 112px !important;
|
||||
}
|
||||
.chart-text {
|
||||
.chart-text-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
.chart-text-sub-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box2 {
|
||||
.chart-gif,
|
||||
.chart-text {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
top: 138px !important;
|
||||
left: 112px !important;
|
||||
}
|
||||
.chart-text {
|
||||
.chart-text-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
.chart-text-sub-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
.ai-list {
|
||||
.ai-item {
|
||||
line-height: 40px;
|
||||
.el-image {
|
||||
width: 360px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-nav {
|
||||
padding: 40px 12px;
|
||||
.ai-content-nav-con {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<certificate-bar-chart :data="certificateData" :height="100"></certificate-bar-chart>
|
||||
<certificate-bar-chart :key="chart1Key" :data="certificateData" :height="chart1Height"></certificate-bar-chart>
|
||||
|
||||
<div class="rank-chart" style="height: calc(100% - 224px)">
|
||||
<div class="rank-chart">
|
||||
<div class="rank-chart-title">监控列表</div>
|
||||
<div class="list-max" style="height: calc(100% - 63px)">
|
||||
<div class="list-max">
|
||||
<div class="list-min" id="listMin" @mouseout="listMinMouseout" @mouseover="listMinMouseover">
|
||||
<div class="list-for" :key="i" v-for="(item, i) in listData" @click="onTowerCraneList(i)">
|
||||
<div :class="index == i ? 'list-con active' : 'list-con'">
|
||||
|
|
@ -92,10 +92,10 @@
|
|||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="18" class="h100">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-row style="height:66%">
|
||||
<el-col :span="16" class="h100">
|
||||
<div class="safe-height">
|
||||
<el-row>
|
||||
<el-row class="right-header">
|
||||
<el-col :span="6">
|
||||
<div class="screen-module">
|
||||
<div class="safe-small">
|
||||
|
|
@ -186,8 +186,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="analyse-max">
|
||||
<el-col :span="8" class="h100">
|
||||
<div class="analyse-max h100">
|
||||
<div class="analyse-min" style="height: auto">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">报警分析</div>
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
<div class="afoot-content safe-afoot-content">
|
||||
<div class="afoot-overflow safe-afoot-overflow" id="afootOverflow" @mouseout="warningListMinMouseout" @mouseover="warningListMinMouseover">
|
||||
<div v-if="warningData.length == 0" class="not-data">暂无预警数据</div>
|
||||
<div :key="idx" v-if="warningData.length > 0" class="afoot-con-for" style="height: 180px" v-for="(item,idx) in warningData">
|
||||
<div :key="idx" v-if="warningData.length > 0" class="afoot-con-for" style v-for="(item,idx) in warningData">
|
||||
<div class="afoot-machinery-nam safe-afoot-machinery-nam" v-cloak>{{ item.warn_context }}</div>
|
||||
<div class="afoot-machinery-info">
|
||||
<div class="afoot-machinery-img">
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="padding: 0 30px">
|
||||
<div style="padding: 0 30px" class="bottom-box">
|
||||
<div class="analyse-title analyse_title_blue" style="width: 450px">
|
||||
<div class="analyse-text">运行数据</div>
|
||||
</div>
|
||||
|
|
@ -443,6 +443,9 @@ import '@/components/dumbwaiter-2.js'
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
chart1Key: 0,
|
||||
chart1Height: 100,
|
||||
dpi: '',
|
||||
deviceToal: 4,
|
||||
deviceOnlineCount: 10,
|
||||
certificateData: [],
|
||||
|
|
@ -498,9 +501,23 @@ export default {
|
|||
})
|
||||
this.selProject = this.$store.getters.selProject
|
||||
this.init()
|
||||
this.dpi = this.$dpi()
|
||||
this.resize()
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.dpi != this.$dpi()) {
|
||||
this.dpi = this.$dpi()
|
||||
this.resize()
|
||||
}
|
||||
})
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
resize() {
|
||||
this.chart1Key++
|
||||
let is1K = this.$dpi() == '1K'
|
||||
let is2K = this.$dpi() == '2K'
|
||||
this.chart1Height = is1K ? 100 : is2K ? 120 : 160
|
||||
},
|
||||
init() {
|
||||
this.certificateData = JSON.parse('[{"text":"在线数量","value":5},{"text":"离线数量","value":1}]')
|
||||
this.listData = JSON.parse(
|
||||
|
|
@ -656,6 +673,31 @@ export default {
|
|||
|
||||
<style lang="less">
|
||||
.project-dumbwaiter {
|
||||
.el-col-6 {
|
||||
.screen-one-3-1 {
|
||||
height: calc(100% - 20px);
|
||||
.module-ctx {
|
||||
padding: 12px 4px;
|
||||
.czz-number {
|
||||
.survey_content_number {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.rank-chart {
|
||||
height: calc(100% - 224px);
|
||||
padding: 0px;
|
||||
.list-max {
|
||||
height: calc(100% - 63px);
|
||||
.list-min {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-enter {
|
||||
left: -100%;
|
||||
transform: translateX(-100%);
|
||||
|
|
@ -687,5 +729,293 @@ export default {
|
|||
.right-leave-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
.el-col-6 {
|
||||
.screen-one-3-1 {
|
||||
.module-ctx {
|
||||
padding: 12px 4px;
|
||||
.czz-number {
|
||||
font-size: 18px;
|
||||
.czz-number-img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 160px;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.survey_content_number {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.rank-chart {
|
||||
height: calc(100% - 297px);
|
||||
padding: 0px;
|
||||
.rank-chart-title {
|
||||
font-size: 20px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-size: 42px 56px;
|
||||
padding-left: 56px;
|
||||
}
|
||||
.list-max {
|
||||
height: calc(100% - 84px);
|
||||
.list-for {
|
||||
.list-con {
|
||||
font-size: 18px;
|
||||
.list-img {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
line-height: 120px;
|
||||
background-size: 100% 80px;
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.list-info {
|
||||
.list-info-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.list-details {
|
||||
padding: 12px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-height {
|
||||
font-size: 18px;
|
||||
.right-header {
|
||||
.screen-module {
|
||||
.safe-small {
|
||||
height: 120px;
|
||||
.safe-small-title {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.safe-small-details {
|
||||
font-size: 18px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.safe-tower-crane-max {
|
||||
position: relative;
|
||||
padding-top: 200px;
|
||||
.safe-tower-content-max {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-box {
|
||||
.analyse-title {
|
||||
height: 48px;
|
||||
width: 600px !important;
|
||||
.analyse-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.xhz-device-data-min {
|
||||
margin: 30px 0px;
|
||||
.survey_content {
|
||||
.xhz-education_bgd {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-size: 100px 60px;
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.xhz-current-value-data {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.analyse-max {
|
||||
* {
|
||||
font-size: 18px;
|
||||
}
|
||||
.analyse-text,
|
||||
.analyse-equipment {
|
||||
font-size: 24px;
|
||||
}
|
||||
.analyse-title {
|
||||
height: 60px;
|
||||
}
|
||||
.glr-login-number-red-bgd {
|
||||
background-size: 100% 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.analyse-login-numbe {
|
||||
top: 20px;
|
||||
}
|
||||
.analyse-number-max {
|
||||
height: 260px;
|
||||
}
|
||||
.analyse-min {
|
||||
height: 50% !important;
|
||||
}
|
||||
.analyse-map {
|
||||
height: 50%;
|
||||
.afoot-content {
|
||||
height: calc(100% - 160px);
|
||||
.afoot-overflow {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 2561px) {
|
||||
.el-col-6 {
|
||||
.screen-one-3-1 {
|
||||
.module-ctx {
|
||||
padding: 12px 4px;
|
||||
.czz-number {
|
||||
font-size: 24px;
|
||||
.czz-number-img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
line-height: 200px;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.survey_content_number {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.rank-chart {
|
||||
height: calc(100% - 388px);
|
||||
padding: 0px;
|
||||
.rank-chart-title {
|
||||
font-size: 32px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background-size: 60px 80px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.list-max {
|
||||
height: calc(100% - 100px);
|
||||
.list-for {
|
||||
.list-con {
|
||||
font-size: 24px;
|
||||
.list-img {
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
line-height: 160px;
|
||||
background-size: 100% 120px;
|
||||
img {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
.list-info {
|
||||
.list-info-name {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.list-details {
|
||||
padding: 12px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-height {
|
||||
font-size: 24px;
|
||||
.right-header {
|
||||
.screen-module {
|
||||
.safe-small {
|
||||
height: 160px;
|
||||
.safe-small-title {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.safe-small-details {
|
||||
font-size: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.safe-tower-crane-max {
|
||||
position: relative;
|
||||
padding-top: 400px;
|
||||
.safe-tower-content-max {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-box {
|
||||
.analyse-title {
|
||||
height: 80px;
|
||||
width: 900px !important;
|
||||
.analyse-text {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.xhz-device-data-min {
|
||||
margin: 40px 0px;
|
||||
.survey_content {
|
||||
.xhz-education_bgd {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background-size: 150px 100px;
|
||||
img {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.xhz-current-value-data {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.analyse-max {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
.analyse-text,
|
||||
.analyse-equipment {
|
||||
font-size: 32px;
|
||||
}
|
||||
.analyse-title {
|
||||
height: 100px;
|
||||
}
|
||||
.glr-login-number-red-bgd {
|
||||
background-size: 100% 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.analyse-login-numbe {
|
||||
top: 30px;
|
||||
}
|
||||
.analyse-number-max {
|
||||
height: 340px;
|
||||
}
|
||||
.analyse-min {
|
||||
height: 50% !important;
|
||||
}
|
||||
.analyse-map {
|
||||
height: 50%;
|
||||
.afoot-content {
|
||||
height: calc(100% - 160px);
|
||||
.afoot-overflow {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,52 +3,41 @@
|
|||
<el-col :span="4" class="h100">
|
||||
<module-one-1-3 label="视频监控列表" @headerClick="showAllVideo">
|
||||
<div v-if="videoMonitors.length == 0" style="text-align: center;margin-top: 20vh;">
|
||||
<img src="images/nodata.png" style="width: 240px;">
|
||||
<img src="images/nodata.png" style="width: 240px;" />
|
||||
<div style="text-align: center;">暂无数据</div>
|
||||
</div>
|
||||
<div class="video-list">
|
||||
<div v-for="it in videoMonitors" :key="it.id" class="video-item command"
|
||||
:class="it.active ? 'is-active' : ''" @click="doSelectItem(it)">
|
||||
<svg-icon class-name="video-icon" icon-class="video" /> {{ it.monitorName }}
|
||||
<div v-for="it in videoMonitors" :key="it.id" class="video-item command" :class="it.active ? 'is-active' : ''" @click="doSelectItem(it)">
|
||||
<svg-icon class-name="video-icon" icon-class="video" />
|
||||
{{ it.monitorName }}
|
||||
</div>
|
||||
</div>
|
||||
</module-one-1-3>
|
||||
</el-col>
|
||||
<el-col :span="20" class="h100">
|
||||
<div v-if="videoMonitors.length == 0" style="text-align: center;margin-top: 20vh;">
|
||||
<img src="images/nodata.png" style="width: 240px;">
|
||||
<img src="images/nodata.png" style="width: 240px;" />
|
||||
<div style="text-align: center;">暂无数据</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<template v-if="showMode == 'sigle'">
|
||||
<iframe v-if="selVideo" frameborder="0" :src="selVideo.iframeSrc" style="width:100%;height:100%;"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
<iframe v-if="selVideo" frameborder="0" :src="selVideo.iframeSrc" style="width:100%;height:100%;" allowfullscreen></iframe>
|
||||
</template>
|
||||
<div v-if="showMode == 'all'" style="height: 100%;" class="all-mode">
|
||||
<div class="all-header">
|
||||
<svg-icon class-name="icon-screen command" @click="changeSize(mode1)"
|
||||
:class="showSize == mode1 ? 'is-active' : ''" icon-class="4screen" />
|
||||
<svg-icon class-name="icon-screen command" @click="changeSize(mode2)"
|
||||
:class="showSize != mode1 ? 'is-active' : ''" icon-class="9screen" />
|
||||
<svg-icon class-name="icon-screen command" @click="changeSize(mode1)" :class="showSize == mode1 ? 'is-active' : ''" icon-class="4screen" />
|
||||
<svg-icon class-name="icon-screen command" @click="changeSize(mode2)" :class="showSize != mode1 ? 'is-active' : ''" icon-class="9screen" />
|
||||
</div>
|
||||
<div class="all-list" :class="showSize == mode1 ? 'mode1' : 'mode2'">
|
||||
<div class="all-item command" v-for="it in showList" :key="it.id">
|
||||
<iframe frameborder="0" :src="it.iframeSrc" style="width:100%;height:calc(100% - 30px);"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
<div class="command" @click="doSelectItem(it)"
|
||||
style="text-align: center;height: 30px; line-height: 30px;">
|
||||
{{ it.monitorName }}
|
||||
</div>
|
||||
<iframe frameborder="0" :src="it.iframeSrc" style="width:100%;height:calc(100% - 30px);" allowfullscreen></iframe>
|
||||
<div class="command" @click="doSelectItem(it)" style="text-align: center;height: 30px; line-height: 30px;">{{ it.monitorName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="all-pager">
|
||||
<el-pagination background :page-size="showSize" :current-page="showIndex"
|
||||
@current-change="handleCurrentChange" layout="prev, pager, next" :total="total" />
|
||||
<el-pagination background :page-size="showSize" :current-page="showIndex" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-col>
|
||||
</div>
|
||||
|
|
@ -56,7 +45,7 @@
|
|||
|
||||
<script>
|
||||
import debounce from 'lodash.debounce'
|
||||
import SvgIcon from '@/components/SvgIcon.vue';
|
||||
import SvgIcon from '@/components/SvgIcon.vue'
|
||||
export default {
|
||||
components: { SvgIcon },
|
||||
data() {
|
||||
|
|
@ -76,92 +65,98 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('ChangeNav', 309);
|
||||
this.dpi = this.$dpi();
|
||||
window.addEventListener("resize", () => {
|
||||
this.$store.dispatch('ChangeNav', 309)
|
||||
this.dpi = this.$dpi()
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.dpi != this.$dpi()) {
|
||||
this.dpi = this.$dpi();
|
||||
this.chartKey++;
|
||||
this.dpi = this.$dpi()
|
||||
this.chartKey++
|
||||
}
|
||||
});
|
||||
this.$bus.$on('projectChange', debounce(prj => {
|
||||
this.selProject = prj;
|
||||
this.init();
|
||||
}));
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
this.init();
|
||||
})
|
||||
this.$bus.$on(
|
||||
'projectChange',
|
||||
debounce((prj) => {
|
||||
this.selProject = prj
|
||||
this.init()
|
||||
})
|
||||
)
|
||||
this.selProject = this.$store.getters.selProject
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.selProject) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
let projectId = this.selProject.id;
|
||||
let comId = this.selProject.comId;
|
||||
this.$api.videoMonitor.listVideoMonitor({
|
||||
pageNum: 1, pageSize: 100,
|
||||
let projectId = this.selProject.id
|
||||
let comId = this.selProject.comId
|
||||
this.$api.videoMonitor
|
||||
.listVideoMonitor({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
projectId: projectId,
|
||||
comId: comId
|
||||
}).then(d => {
|
||||
this.total = d.total || 0;
|
||||
this.videoMonitors = (d.rows || []).map(it => {
|
||||
it.active = false;
|
||||
it.iframeSrc = "";
|
||||
it.accessToken = "";
|
||||
return it;
|
||||
});
|
||||
this.showAllVideo();
|
||||
});
|
||||
comId: comId,
|
||||
})
|
||||
.then((d) => {
|
||||
this.total = d.total || 0
|
||||
this.videoMonitors = (d.rows || []).map((it) => {
|
||||
it.active = false
|
||||
it.iframeSrc = ''
|
||||
it.accessToken = ''
|
||||
return it
|
||||
})
|
||||
this.showAllVideo()
|
||||
})
|
||||
},
|
||||
loadVideo(it) {
|
||||
this.$api.videoMonitor.getYsToken(it.id).then(d => {
|
||||
it.accessToken = d.msg;
|
||||
it.iframeSrc = 'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + (+new Date());
|
||||
|
||||
this.$api.videoMonitor.getYsToken(it.id).then((d) => {
|
||||
it.accessToken = d.msg
|
||||
it.iframeSrc =
|
||||
'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + +new Date()
|
||||
})
|
||||
},
|
||||
changeSize(n) {
|
||||
this.showSize = n;
|
||||
this.showIndex = 1;
|
||||
this.showAllData();
|
||||
this.showSize = n
|
||||
this.showIndex = 1
|
||||
this.showAllData()
|
||||
},
|
||||
doSelectItem(it) {
|
||||
if (it.active) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.showMode = "sigle";
|
||||
this.showMode = 'sigle'
|
||||
if (this.selVideo) {
|
||||
this.selVideo.active = false;
|
||||
this.selVideo.active = false
|
||||
}
|
||||
this.selVideo = it;
|
||||
this.selVideo.active = true;
|
||||
this.loadVideo(this.selVideo);
|
||||
this.selVideo = it
|
||||
this.selVideo.active = true
|
||||
this.loadVideo(this.selVideo)
|
||||
},
|
||||
showAllVideo() {
|
||||
if (this.selVideo) {
|
||||
this.selVideo.active = false;
|
||||
this.selVideo.active = false
|
||||
}
|
||||
this.selVideo = null;
|
||||
this.showMode = "all";
|
||||
this.showSize = this.mode1;
|
||||
this.showIndex = 1;
|
||||
this.showAllData();
|
||||
this.selVideo = null
|
||||
this.showMode = 'all'
|
||||
this.showSize = this.mode1
|
||||
this.showIndex = 1
|
||||
this.showAllData()
|
||||
},
|
||||
handleCurrentChange(n) {
|
||||
this.showIndex = n;
|
||||
this.showAllData();
|
||||
this.showIndex = n
|
||||
this.showAllData()
|
||||
},
|
||||
showAllData() {
|
||||
var start = (this.showIndex - 1) * this.showSize;
|
||||
var end = start + this.showSize;
|
||||
this.showList = [];
|
||||
var start = (this.showIndex - 1) * this.showSize
|
||||
var end = start + this.showSize
|
||||
this.showList = []
|
||||
for (var i = start; i < end && i < this.videoMonitors.length; i++) {
|
||||
this.showList.push(this.videoMonitors[i]);
|
||||
this.showList.push(this.videoMonitors[i])
|
||||
this.loadVideo(this.videoMonitors[i])
|
||||
}
|
||||
this.elKey++;
|
||||
}
|
||||
}
|
||||
this.elKey++
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -186,13 +181,13 @@ export default {
|
|||
.icon-screen {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: #BFC3C5;
|
||||
background: #bfc3c5;
|
||||
fill: #fff;
|
||||
margin-left: 10px;
|
||||
|
||||
&.is-active {
|
||||
background: #445A65;
|
||||
fill: #4D91FE;
|
||||
background: #445a65;
|
||||
fill: #4d91fe;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -206,17 +201,17 @@ export default {
|
|||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 50% 50%;
|
||||
|
||||
.all-item {}
|
||||
.all-item {
|
||||
}
|
||||
}
|
||||
|
||||
&.mode2 {
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
grid-template-rows: 33% 33% 33%;
|
||||
|
||||
.all-item {}
|
||||
.all-item {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.all-pager {
|
||||
|
|
@ -225,5 +220,59 @@ export default {
|
|||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
font-size: 18px;
|
||||
|
||||
.video-list {
|
||||
.video-item {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.el-pagination {
|
||||
line-height: 30px;
|
||||
margin-top: 40px;
|
||||
span {
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
.number {
|
||||
font-size: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 2561px) {
|
||||
font-size: 24px;
|
||||
|
||||
.video-list {
|
||||
.video-item {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.el-pagination {
|
||||
line-height: 48px;
|
||||
margin-top: 40px;
|
||||
span {
|
||||
font-size: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
.number {
|
||||
font-size: 30px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.el-icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue