修复大屏样式
parent
60b880930a
commit
e7b424885a
|
|
@ -124,6 +124,32 @@ body {
|
||||||
height: 54px;
|
height: 54px;
|
||||||
line-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) {
|
@media (min-width: 2561px) {
|
||||||
.w-scroll::-webkit-scrollbar {
|
.w-scroll::-webkit-scrollbar {
|
||||||
|
|
@ -172,6 +198,38 @@ body {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
line-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 {
|
.img-openwin {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -842,6 +900,28 @@ table {
|
||||||
left: 172px;
|
left: 172px;
|
||||||
background: url("../images/run_circle.png") no-repeat center / 100% 100%;
|
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 {
|
.chart-gif {
|
||||||
-webkit-transition-property: -webkit-transform;
|
-webkit-transition-property: -webkit-transform;
|
||||||
-webkit-transition-duration: 1s;
|
-webkit-transition-duration: 1s;
|
||||||
|
|
|
||||||
|
|
@ -133,6 +133,34 @@ body{
|
||||||
height: 54px;
|
height: 54px;
|
||||||
line-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;
|
height: 60px;
|
||||||
line-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{
|
.img-openwin{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -840,6 +906,29 @@ table{
|
||||||
left: 172px;
|
left: 172px;
|
||||||
background: url("../images/run_circle.png") no-repeat center/100% 100%;
|
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{
|
.chart-gif{
|
||||||
-webkit-transition-property: -webkit-transform;
|
-webkit-transition-property: -webkit-transform;
|
||||||
-webkit-transition-duration: 1s;
|
-webkit-transition-duration: 1s;
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,34 @@
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ 'height': height + 'px' }" ref="chart">
|
<div :style="{ 'height': height + 'px' }" ref="chart"></div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
data:{
|
data: {
|
||||||
type:Array
|
type: Array,
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
},
|
},
|
||||||
height:{
|
|
||||||
type:Number
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
option:{},
|
option: {},
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(){
|
init() {
|
||||||
this.getChartData()
|
this.getChartData()
|
||||||
},
|
},
|
||||||
getChartData(){
|
getChartData() {
|
||||||
//品类金额占比 饼图
|
//品类金额占比 饼图
|
||||||
var chChart = echarts.init(this.$refs.chart);
|
var chChart = echarts.init(this.$refs.chart)
|
||||||
this.echart(chChart,this.data)
|
this.echart(chChart, this.data)
|
||||||
},
|
},
|
||||||
echart(chChart,chartData){
|
echart(chChart, chartData) {
|
||||||
let newPromise = new Promise((resolve) => {
|
let newPromise = new Promise((resolve) => {
|
||||||
resolve()
|
resolve()
|
||||||
})
|
})
|
||||||
|
|
@ -50,30 +47,31 @@ export default {
|
||||||
|
|
||||||
var prop = []
|
var prop = []
|
||||||
for (let j = 0; j < value.length; j++) {
|
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 = {
|
this.option = {
|
||||||
grid: {
|
grid: {
|
||||||
left: "5%",
|
left: '5%',
|
||||||
right: "5%",
|
right: '5%',
|
||||||
bottom: "-10%",
|
bottom: '-10%',
|
||||||
top: "2%",
|
top: '2%',
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
show: false,
|
show: false,
|
||||||
type: "value",
|
type: 'value',
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: 'category',
|
||||||
inverse: true,
|
inverse: true,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#cbdaff",
|
color: '#cbdaff',
|
||||||
fontSize: "14",
|
fontSize: is1K ? 14 : is2K ? 18 : 20,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
|
|
@ -88,24 +86,24 @@ export default {
|
||||||
data: text,
|
data: text,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "category",
|
type: 'category',
|
||||||
inverse: true,
|
inverse: true,
|
||||||
axisTick: "none",
|
axisTick: 'none',
|
||||||
axisLine: "none",
|
axisLine: 'none',
|
||||||
show: true,
|
show: true,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#cbdaff",
|
color: '#cbdaff',
|
||||||
fontSize: "16",
|
fontSize: is1K ? 16 : is2K ? 20 : 30,
|
||||||
},
|
},
|
||||||
formatter: function(params,i){
|
formatter: function (params, i) {
|
||||||
var text = "{a|" + value[i] + "}{a| "+ prop[i]+ "%}";
|
var text = '{a|' + value[i] + '}{a| ' + prop[i] + '%}'
|
||||||
return text;
|
return text
|
||||||
},
|
},
|
||||||
rich: {
|
rich: {
|
||||||
a: {
|
a: {
|
||||||
fontSize: '16px',
|
fontSize: is1K ? 16 : is2K ? 20 : 30,
|
||||||
color: "#cbdaff",
|
color: '#cbdaff',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -114,39 +112,39 @@ export default {
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "bar",
|
type: 'bar',
|
||||||
zlevel: 1,
|
zlevel: 1,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#6ab9fe",
|
color: '#6ab9fe',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
barWidth: 8,
|
barWidth: is1K ? 8 : is2K ? 12 : 16,
|
||||||
data: prop,
|
data: prop,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "bar",
|
type: 'bar',
|
||||||
barWidth: 8,
|
barWidth: is1K ? 8 : is2K ? 12 : 16,
|
||||||
barGap: "-100%",
|
barGap: '-100%',
|
||||||
data: bgd,
|
data: bgd,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "rgba(24,31,68,1)",
|
color: 'rgba(24,31,68,1)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
}
|
||||||
|
|
||||||
chChart.setOption(this.option);
|
chChart.setOption(this.option)
|
||||||
window.onresize = chChart.resize;
|
window.onresize = chChart.resize
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
data: function (n,o) {
|
data: function (n, o) {
|
||||||
this.getChartData(this.data)
|
this.getChartData(this.data)
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -337,12 +337,14 @@ export default {
|
||||||
margin-right: 60px !important;
|
margin-right: 60px !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
|
width: 260px !important;
|
||||||
|
right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-sel-project-pop {
|
.header-sel-project-pop {
|
||||||
transform: scale(1.5);
|
transform: scale(1.5);
|
||||||
width: 200px;
|
width: 330px;
|
||||||
min-width: unset !important;
|
min-width: unset !important;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
|
|
@ -383,12 +385,14 @@ export default {
|
||||||
margin-right: 100px !important;
|
margin-right: 100px !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
|
width: 273px !important;
|
||||||
|
right: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-sel-project-pop {
|
.header-sel-project-pop {
|
||||||
transform: scale(2);
|
transform: scale(2);
|
||||||
width: 200px;
|
width: 300px;
|
||||||
min-width: unset !important;
|
min-width: unset !important;
|
||||||
margin-left: 100px;
|
margin-left: 100px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class='project-overview-chart' style="position: relative" @click="doClick">
|
<div class="project-overview-chart" style="position: relative" @click="doClick">
|
||||||
<div :style="'height:'+height+'px;'+(width?('width:'+width+'px;'):'')" ref="warningPieChart">
|
<div :style="'height:'+height+'px;'+(width?('width:'+width+'px;'):'')" ref="warningPieChart"></div>
|
||||||
|
<div class="chart-gif chart-overview-gif" :style="'top:'+gifTop"></div>
|
||||||
</div>
|
<div v-if="htmlShow" class="chart-text" :style="'top:'+gifTop">
|
||||||
<div class="chart-gif chart-overview-gif" :style="'top:'+gifTop"></div>
|
<div class="chart-text-title">{{title1 }}</div>
|
||||||
|
<div class="chart-text-sub-title">{{subTitle }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -12,167 +14,178 @@ export default {
|
||||||
name: 'JhbigscreenProjectOverviewChart',
|
name: 'JhbigscreenProjectOverviewChart',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
txtTop:{
|
htmlShow: {
|
||||||
type:String,
|
type: Boolean,
|
||||||
default:'0'
|
default: false,
|
||||||
},
|
},
|
||||||
gifTop:{
|
txtTop: {
|
||||||
type:String,
|
type: String,
|
||||||
default:'63px'
|
default: '0',
|
||||||
},
|
},
|
||||||
fn:{
|
gifTop: {
|
||||||
type:Function
|
type: String,
|
||||||
|
default: '63px',
|
||||||
},
|
},
|
||||||
typedata:{
|
fn: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
typedata: {
|
||||||
type: Array,
|
type: Array,
|
||||||
},
|
},
|
||||||
width:{
|
width: {
|
||||||
type:Number
|
type: Number,
|
||||||
},
|
},
|
||||||
height:{
|
height: {
|
||||||
type:Number
|
type: Number,
|
||||||
},
|
},
|
||||||
text:{
|
text: {
|
||||||
type:String
|
type: String,
|
||||||
},
|
},
|
||||||
legendOpt:{
|
legendOpt: {
|
||||||
type:Object,
|
type: Object,
|
||||||
default:()=>{}
|
default: () => {},
|
||||||
},
|
},
|
||||||
maintitle:{
|
maintitle: {
|
||||||
type:[String,Number],
|
type: [String, Number],
|
||||||
default:''
|
default: '',
|
||||||
|
},
|
||||||
|
sp: {
|
||||||
|
type: String,
|
||||||
|
default: '\n',
|
||||||
},
|
},
|
||||||
sp:{
|
|
||||||
type:String,
|
|
||||||
default:"\n"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
active:0,
|
active: 0,
|
||||||
option:{}
|
option: {},
|
||||||
|
title1: '',
|
||||||
|
subTitle: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
doClick(){
|
doClick() {
|
||||||
this.$emit("clickme");
|
this.$emit('clickme')
|
||||||
},
|
},
|
||||||
init(){
|
init() {
|
||||||
this.getChartData()
|
this.getChartData()
|
||||||
},
|
},
|
||||||
getChartData(){
|
getChartData() {
|
||||||
//品类金额占比 饼图
|
//品类金额占比 饼图
|
||||||
var chChartPie = echarts.init(this.$refs.warningPieChart);
|
var chChartPie = echarts.init(this.$refs.warningPieChart)
|
||||||
this.echartPie(chChartPie,this.typedata)
|
this.echartPie(chChartPie, this.typedata)
|
||||||
},
|
},
|
||||||
echartPie(chChart,chartData){
|
echartPie(chChart, chartData) {
|
||||||
let newPromise = new Promise((resolve) => {
|
let newPromise = new Promise((resolve) => {
|
||||||
resolve()
|
resolve()
|
||||||
})
|
})
|
||||||
|
|
||||||
//然后异步执行echarts的初始化函数
|
//然后异步执行echarts的初始化函数
|
||||||
newPromise.then(() => {
|
newPromise.then(() => {
|
||||||
var total_datas = 0;
|
var total_datas = 0
|
||||||
var data = [];
|
var data = []
|
||||||
var legendData = [];
|
var legendData = []
|
||||||
var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef']
|
var color = ['#4974ff', '#52aef7', '#6863d7', '#1d5d89', '#20e6ff', '#67feef']
|
||||||
for (let i = 0; i <chartData.length ; i++) {
|
for (let i = 0; i < chartData.length; i++) {
|
||||||
total_datas += Number(chartData[i].value);
|
total_datas += Number(chartData[i].value)
|
||||||
legendData.push(chartData[i].name)
|
legendData.push(chartData[i].name)
|
||||||
data.push(
|
data.push({
|
||||||
{
|
value: chartData[i].value,
|
||||||
value: chartData[i].value,
|
name: chartData[i].name,
|
||||||
name: chartData[i].name,
|
itemStyle: {
|
||||||
itemStyle: {
|
//颜色渐变
|
||||||
//颜色渐变
|
color: color[i],
|
||||||
color: color[i]
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
)
|
})
|
||||||
}
|
}
|
||||||
/* let total = chartData.reduce((a, b) => {
|
/* let total = chartData.reduce((a, b) => {
|
||||||
return a + b.value;
|
return a + b.value;
|
||||||
}, 0);*/
|
}, 0);*/
|
||||||
|
|
||||||
|
let is1K = this.$dpi() == '1K'
|
||||||
|
let is2K = this.$dpi() == '2K'
|
||||||
let legendOption = {
|
let legendOption = {
|
||||||
|
top: 'center',
|
||||||
|
|
||||||
top: "center",
|
orient: 'vertical',
|
||||||
|
icon: 'circle',
|
||||||
orient: "vertical",
|
|
||||||
icon: "circle",
|
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemGap: 8,
|
itemGap: 8,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#c3dbfd",
|
color: '#c3dbfd',
|
||||||
fontSize: 14,
|
fontSize: is1K ? 14 : is2K ? 18 : 24,
|
||||||
rich: {
|
rich: {
|
||||||
name: {
|
name: {
|
||||||
color: "#c3dbfd",
|
color: '#c3dbfd',
|
||||||
|
fontSize: is1K ? 14 : is2K ? 18 : 24,
|
||||||
padding: [10, 5, 20, 5],
|
padding: [10, 5, 20, 5],
|
||||||
},
|
},
|
||||||
percent: {
|
percent: {
|
||||||
color: "#18DB9F",
|
color: '#18DB9F',
|
||||||
fontSize: 16,
|
fontSize: is1K ? 16 : is2K ? 24 : 32,
|
||||||
padding: [0, 5, 0, 5],
|
padding: [0, 5, 0, 5],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
formatter: (name) =>{
|
formatter: (name) => {
|
||||||
let res = chartData.filter((v) => v.name === name);
|
let res = chartData.filter((v) => v.name === name)
|
||||||
let percent = ((res[0].value * 100) / total_datas).toFixed(1);
|
let percent = ((res[0].value * 100) / total_datas).toFixed(1)
|
||||||
if(total_datas==0){
|
if (total_datas == 0) {
|
||||||
percent=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.option = {
|
this.title1 = this.maintitle || total_datas
|
||||||
|
this.subTitle = this.text
|
||||||
|
this.option = {
|
||||||
title: {
|
title: {
|
||||||
text: this.maintitle||total_datas,
|
show: !this.htmlShow,
|
||||||
|
text: this.maintitle || total_datas,
|
||||||
subtext: this.text,
|
subtext: this.text,
|
||||||
textAlign:'center',
|
textAlign: 'center',
|
||||||
top:this.txtTop,
|
top: this.txtTop,
|
||||||
itemGap :10,
|
itemGap: 10,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#0dd2fd",
|
color: '#0dd2fd',
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
fontWeight: "bold",
|
fontWeight: 'bold',
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
subtextStyle: {
|
subtextStyle: {
|
||||||
color: "#a5b5f0",
|
color: '#a5b5f0',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
padding:[95,0,0,110],
|
padding: [95, 0, 0, 110],
|
||||||
left:'left'
|
left: 'left',
|
||||||
|
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: "{b} <br/>{c} ({d}%)"
|
formatter: '{b} <br/>{c} ({d}%)',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: is1K ? 14 : is2K ? 18 : 24,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
legend: [
|
legend: [
|
||||||
{
|
{
|
||||||
right: 10,
|
right: 10,
|
||||||
data: legendData,
|
data: legendData,
|
||||||
align: "left",
|
align: 'left',
|
||||||
...opt,
|
...opt,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "品类金额占比",
|
name: '品类金额占比',
|
||||||
type: "pie",
|
type: 'pie',
|
||||||
center: ["25%", "50%"],
|
center: ['25%', '50%'],
|
||||||
radius: ["46%", "63%"],
|
radius: ['46%', '63%'],
|
||||||
data: data,
|
data: data,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
|
|
@ -180,18 +193,17 @@ export default {
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
borderWidth: 5,
|
borderWidth: 5,
|
||||||
borderColor: "#051a36"
|
borderColor: '#051a36',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "外边框",
|
name: '外边框',
|
||||||
type: "pie",
|
type: 'pie',
|
||||||
clockWise: false, //顺时加载
|
clockWise: false, //顺时加载
|
||||||
hoverAnimation: false, //鼠标移入变大
|
hoverAnimation: false, //鼠标移入变大
|
||||||
center: ["25%", "50%"],
|
center: ['25%', '50%'],
|
||||||
radius: ["70%", "70%"],
|
radius: ['70%', '70%'],
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: false,
|
show: false,
|
||||||
|
|
@ -200,11 +212,11 @@ export default {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 9,
|
value: 9,
|
||||||
name: "",
|
name: '',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
borderWidth: 3,
|
borderWidth: 3,
|
||||||
borderColor: "#152c65",
|
borderColor: '#152c65',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -212,13 +224,13 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
if(this.fn){
|
if (this.fn) {
|
||||||
this.option=this.fn(this.option);
|
this.option = this.fn(this.option)
|
||||||
}
|
}
|
||||||
chChart.setOption(this.option);
|
chChart.setOption(this.option)
|
||||||
window.onresize = chChart.resize;
|
window.onresize = chChart.resize
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -27,11 +27,11 @@
|
||||||
</div>
|
</div>
|
||||||
</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="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-min" id="listMin" @mouseout="listMinMouseout" @mouseover="listMinMouseover">
|
||||||
<div class="list-for" :key="i" v-for="(item, i) in listData" @click="onTowerCraneList(i)">
|
<div class="list-for" :key="i" v-for="(item, i) in listData" @click="onTowerCraneList(i)">
|
||||||
<div :class="index == i ? 'list-con active' : 'list-con'">
|
<div :class="index == i ? 'list-con active' : 'list-con'">
|
||||||
|
|
@ -92,10 +92,10 @@
|
||||||
</module-one-3-1>
|
</module-one-3-1>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="18" class="h100">
|
<el-col :span="18" class="h100">
|
||||||
<el-row>
|
<el-row style="height:66%">
|
||||||
<el-col :span="16">
|
<el-col :span="16" class="h100">
|
||||||
<div class="safe-height">
|
<div class="safe-height">
|
||||||
<el-row>
|
<el-row class="right-header">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div class="screen-module">
|
<div class="screen-module">
|
||||||
<div class="safe-small">
|
<div class="safe-small">
|
||||||
|
|
@ -186,8 +186,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8" class="h100">
|
||||||
<div class="analyse-max">
|
<div class="analyse-max h100">
|
||||||
<div class="analyse-min" style="height: auto">
|
<div class="analyse-min" style="height: auto">
|
||||||
<div class="analyse-title">
|
<div class="analyse-title">
|
||||||
<div class="analyse-text">报警分析</div>
|
<div class="analyse-text">报警分析</div>
|
||||||
|
|
@ -239,7 +239,7 @@
|
||||||
<div class="afoot-content safe-afoot-content">
|
<div class="afoot-content safe-afoot-content">
|
||||||
<div class="afoot-overflow safe-afoot-overflow" id="afootOverflow" @mouseout="warningListMinMouseout" @mouseover="warningListMinMouseover">
|
<div class="afoot-overflow safe-afoot-overflow" id="afootOverflow" @mouseout="warningListMinMouseout" @mouseover="warningListMinMouseover">
|
||||||
<div v-if="warningData.length == 0" class="not-data">暂无预警数据</div>
|
<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-nam safe-afoot-machinery-nam" v-cloak>{{ item.warn_context }}</div>
|
||||||
<div class="afoot-machinery-info">
|
<div class="afoot-machinery-info">
|
||||||
<div class="afoot-machinery-img">
|
<div class="afoot-machinery-img">
|
||||||
|
|
@ -258,7 +258,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</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-title analyse_title_blue" style="width: 450px">
|
||||||
<div class="analyse-text">运行数据</div>
|
<div class="analyse-text">运行数据</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -443,6 +443,9 @@ import '@/components/dumbwaiter-2.js'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
chart1Key: 0,
|
||||||
|
chart1Height: 100,
|
||||||
|
dpi: '',
|
||||||
deviceToal: 4,
|
deviceToal: 4,
|
||||||
deviceOnlineCount: 10,
|
deviceOnlineCount: 10,
|
||||||
certificateData: [],
|
certificateData: [],
|
||||||
|
|
@ -498,9 +501,23 @@ export default {
|
||||||
})
|
})
|
||||||
this.selProject = this.$store.getters.selProject
|
this.selProject = this.$store.getters.selProject
|
||||||
this.init()
|
this.init()
|
||||||
|
this.dpi = this.$dpi()
|
||||||
|
this.resize()
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
if (this.dpi != this.$dpi()) {
|
||||||
|
this.dpi = this.$dpi()
|
||||||
|
this.resize()
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
methods: {
|
methods: {
|
||||||
|
resize() {
|
||||||
|
this.chart1Key++
|
||||||
|
let is1K = this.$dpi() == '1K'
|
||||||
|
let is2K = this.$dpi() == '2K'
|
||||||
|
this.chart1Height = is1K ? 100 : is2K ? 120 : 160
|
||||||
|
},
|
||||||
init() {
|
init() {
|
||||||
this.certificateData = JSON.parse('[{"text":"在线数量","value":5},{"text":"离线数量","value":1}]')
|
this.certificateData = JSON.parse('[{"text":"在线数量","value":5},{"text":"离线数量","value":1}]')
|
||||||
this.listData = JSON.parse(
|
this.listData = JSON.parse(
|
||||||
|
|
@ -656,6 +673,31 @@ export default {
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.project-dumbwaiter {
|
.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-enter {
|
||||||
left: -100%;
|
left: -100%;
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
|
|
@ -687,5 +729,293 @@ export default {
|
||||||
.right-leave-active {
|
.right-leave-active {
|
||||||
transition: all 1s ease;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="video-monitor main-page">
|
<div class="video-monitor main-page">
|
||||||
<el-col :span="4" class="h100">
|
<el-col :span="4" class="h100">
|
||||||
<module-one-1-3 label="视频监控列表" @headerClick="showAllVideo">
|
<module-one-1-3 label="视频监控列表" @headerClick="showAllVideo">
|
||||||
<div v-if="videoMonitors.length == 0" style="text-align: center;margin-top: 20vh;">
|
<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 style="text-align: center;">暂无数据</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-list">
|
<div class="video-list">
|
||||||
<div v-for="it in videoMonitors" :key="it.id" class="video-item command"
|
<div v-for="it in videoMonitors" :key="it.id" class="video-item command" :class="it.active ? 'is-active' : ''" @click="doSelectItem(it)">
|
||||||
:class="it.active ? 'is-active' : ''" @click="doSelectItem(it)">
|
<svg-icon class-name="video-icon" icon-class="video" />
|
||||||
<svg-icon class-name="video-icon" icon-class="video" /> {{ it.monitorName }}
|
{{ it.monitorName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</module-one-1-3>
|
</module-one-1-3>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20" class="h100">
|
<el-col :span="20" class="h100">
|
||||||
<div v-if="videoMonitors.length == 0" style="text-align: center;margin-top: 20vh;">
|
<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 style="text-align: center;">暂无数据</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<template v-if="showMode == 'sigle'">
|
<template v-if="showMode == 'sigle'">
|
||||||
<iframe v-if="selVideo" frameborder="0" :src="selVideo.iframeSrc" style="width:100%;height:100%;"
|
<iframe v-if="selVideo" frameborder="0" :src="selVideo.iframeSrc" style="width:100%;height:100%;" allowfullscreen></iframe>
|
||||||
allowfullscreen>
|
|
||||||
</iframe>
|
|
||||||
</template>
|
</template>
|
||||||
<div v-if="showMode == 'all'" style="height: 100%;" class="all-mode">
|
<div v-if="showMode == 'all'" style="height: 100%;" class="all-mode">
|
||||||
<div class="all-header">
|
<div class="all-header">
|
||||||
<svg-icon class-name="icon-screen command" @click="changeSize(mode1)"
|
<svg-icon class-name="icon-screen command" @click="changeSize(mode1)" :class="showSize == mode1 ? 'is-active' : ''" icon-class="4screen" />
|
||||||
: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(mode2)"
|
|
||||||
:class="showSize != mode1 ? 'is-active' : ''" icon-class="9screen" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="all-list" :class="showSize == mode1 ? 'mode1' : 'mode2'">
|
<div class="all-list" :class="showSize == mode1 ? 'mode1' : 'mode2'">
|
||||||
<div class="all-item command" v-for="it in showList" :key="it.id">
|
<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);"
|
<iframe frameborder="0" :src="it.iframeSrc" style="width:100%;height:calc(100% - 30px);" allowfullscreen></iframe>
|
||||||
allowfullscreen>
|
<div class="command" @click="doSelectItem(it)" style="text-align: center;height: 30px; line-height: 30px;">{{ it.monitorName }}</div>
|
||||||
</iframe>
|
|
||||||
<div class="command" @click="doSelectItem(it)"
|
|
||||||
style="text-align: center;height: 30px; line-height: 30px;">
|
|
||||||
{{ it.monitorName }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="all-pager">
|
<div class="all-pager">
|
||||||
<el-pagination background :page-size="showSize" :current-page="showIndex"
|
<el-pagination background :page-size="showSize" :current-page="showIndex" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" />
|
||||||
@current-change="handleCurrentChange" layout="prev, pager, next" :total="total" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
</el-col>
|
</el-col>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -56,7 +45,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import debounce from 'lodash.debounce'
|
import debounce from 'lodash.debounce'
|
||||||
import SvgIcon from '@/components/SvgIcon.vue';
|
import SvgIcon from '@/components/SvgIcon.vue'
|
||||||
export default {
|
export default {
|
||||||
components: { SvgIcon },
|
components: { SvgIcon },
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -76,92 +65,98 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch('ChangeNav', 309);
|
this.$store.dispatch('ChangeNav', 309)
|
||||||
this.dpi = this.$dpi();
|
this.dpi = this.$dpi()
|
||||||
window.addEventListener("resize", () => {
|
window.addEventListener('resize', () => {
|
||||||
if (this.dpi != this.$dpi()) {
|
if (this.dpi != this.$dpi()) {
|
||||||
this.dpi = this.$dpi();
|
this.dpi = this.$dpi()
|
||||||
this.chartKey++;
|
this.chartKey++
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
this.$bus.$on('projectChange', debounce(prj => {
|
this.$bus.$on(
|
||||||
this.selProject = prj;
|
'projectChange',
|
||||||
this.init();
|
debounce((prj) => {
|
||||||
}));
|
this.selProject = prj
|
||||||
this.selProject = this.$store.getters.selProject;
|
this.init()
|
||||||
this.init();
|
})
|
||||||
|
)
|
||||||
|
this.selProject = this.$store.getters.selProject
|
||||||
|
this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
if (!this.selProject) {
|
if (!this.selProject) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
let projectId = this.selProject.id;
|
let projectId = this.selProject.id
|
||||||
let comId = this.selProject.comId;
|
let comId = this.selProject.comId
|
||||||
this.$api.videoMonitor.listVideoMonitor({
|
this.$api.videoMonitor
|
||||||
pageNum: 1, pageSize: 100,
|
.listVideoMonitor({
|
||||||
projectId: projectId,
|
pageNum: 1,
|
||||||
comId: comId
|
pageSize: 100,
|
||||||
}).then(d => {
|
projectId: projectId,
|
||||||
this.total = d.total || 0;
|
comId: comId,
|
||||||
this.videoMonitors = (d.rows || []).map(it => {
|
})
|
||||||
it.active = false;
|
.then((d) => {
|
||||||
it.iframeSrc = "";
|
this.total = d.total || 0
|
||||||
it.accessToken = "";
|
this.videoMonitors = (d.rows || []).map((it) => {
|
||||||
return it;
|
it.active = false
|
||||||
});
|
it.iframeSrc = ''
|
||||||
this.showAllVideo();
|
it.accessToken = ''
|
||||||
});
|
return it
|
||||||
|
})
|
||||||
|
this.showAllVideo()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
loadVideo(it) {
|
loadVideo(it) {
|
||||||
this.$api.videoMonitor.getYsToken(it.id).then(d => {
|
this.$api.videoMonitor.getYsToken(it.id).then((d) => {
|
||||||
it.accessToken = d.msg;
|
it.accessToken = d.msg
|
||||||
it.iframeSrc = 'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + (+new Date());
|
it.iframeSrc =
|
||||||
|
'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + +new Date()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
changeSize(n) {
|
changeSize(n) {
|
||||||
this.showSize = n;
|
this.showSize = n
|
||||||
this.showIndex = 1;
|
this.showIndex = 1
|
||||||
this.showAllData();
|
this.showAllData()
|
||||||
},
|
},
|
||||||
doSelectItem(it) {
|
doSelectItem(it) {
|
||||||
if (it.active) {
|
if (it.active) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
this.showMode = "sigle";
|
this.showMode = 'sigle'
|
||||||
if (this.selVideo) {
|
if (this.selVideo) {
|
||||||
this.selVideo.active = false;
|
this.selVideo.active = false
|
||||||
}
|
}
|
||||||
this.selVideo = it;
|
this.selVideo = it
|
||||||
this.selVideo.active = true;
|
this.selVideo.active = true
|
||||||
this.loadVideo(this.selVideo);
|
this.loadVideo(this.selVideo)
|
||||||
},
|
},
|
||||||
showAllVideo() {
|
showAllVideo() {
|
||||||
if (this.selVideo) {
|
if (this.selVideo) {
|
||||||
this.selVideo.active = false;
|
this.selVideo.active = false
|
||||||
}
|
}
|
||||||
this.selVideo = null;
|
this.selVideo = null
|
||||||
this.showMode = "all";
|
this.showMode = 'all'
|
||||||
this.showSize = this.mode1;
|
this.showSize = this.mode1
|
||||||
this.showIndex = 1;
|
this.showIndex = 1
|
||||||
this.showAllData();
|
this.showAllData()
|
||||||
},
|
},
|
||||||
handleCurrentChange(n) {
|
handleCurrentChange(n) {
|
||||||
this.showIndex = n;
|
this.showIndex = n
|
||||||
this.showAllData();
|
this.showAllData()
|
||||||
},
|
},
|
||||||
showAllData() {
|
showAllData() {
|
||||||
var start = (this.showIndex - 1) * this.showSize;
|
var start = (this.showIndex - 1) * this.showSize
|
||||||
var end = start + this.showSize;
|
var end = start + this.showSize
|
||||||
this.showList = [];
|
this.showList = []
|
||||||
for (var i = start; i < end && i < this.videoMonitors.length; i++) {
|
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.loadVideo(this.videoMonitors[i])
|
||||||
}
|
}
|
||||||
this.elKey++;
|
this.elKey++
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -186,13 +181,13 @@ export default {
|
||||||
.icon-screen {
|
.icon-screen {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
background: #BFC3C5;
|
background: #bfc3c5;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background: #445A65;
|
background: #445a65;
|
||||||
fill: #4D91FE;
|
fill: #4d91fe;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -206,17 +201,17 @@ export default {
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
grid-template-rows: 50% 50%;
|
grid-template-rows: 50% 50%;
|
||||||
|
|
||||||
.all-item {}
|
.all-item {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mode2 {
|
&.mode2 {
|
||||||
grid-template-columns: 33% 33% 33%;
|
grid-template-columns: 33% 33% 33%;
|
||||||
grid-template-rows: 33% 33% 33%;
|
grid-template-rows: 33% 33% 33%;
|
||||||
|
|
||||||
.all-item {}
|
.all-item {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-pager {
|
.all-pager {
|
||||||
|
|
@ -225,5 +220,59 @@ export default {
|
||||||
justify-content: center;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue