修复大屏样式
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,9 +1,11 @@
|
||||||
<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>
|
|
||||||
<div class="chart-gif chart-overview-gif" :style="'top:'+gifTop"></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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -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.title1 = this.maintitle || total_datas
|
||||||
|
this.subTitle = this.text
|
||||||
this.option = {
|
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>
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,41 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="project-ai-warning main-page">
|
<div class="project-ai-warning main-page h100">
|
||||||
<el-col :span="6">
|
<el-col :span="6" class="h100">
|
||||||
<module-one-1-1 label="今日预警" style="position: relative">
|
<module-one-1-1 label="今日预警" style="position: relative" class="chart-box1">
|
||||||
<project-overview-chart
|
<project-overview-chart
|
||||||
:key="'ai1' + overviewDay"
|
:key="'ai1' + overviewDay+chartKey"
|
||||||
:sp="''"
|
:sp="''"
|
||||||
|
:htmlShow="true"
|
||||||
:maintitle="overviewTotalDay"
|
:maintitle="overviewTotalDay"
|
||||||
:legend-opt="legendOpt1"
|
:legend-opt="legendOpt1"
|
||||||
:typedata="typeDistributionDataDay"
|
:typedata="typeDistributionDataDay"
|
||||||
:text="overviewTextDay"
|
:text="overviewTextDay"
|
||||||
:height="230"
|
:height="chart1Height"
|
||||||
></project-overview-chart>
|
></project-overview-chart>
|
||||||
</module-one-1-1>
|
</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
|
<project-overview-chart
|
||||||
:key="'ai2' + overview"
|
:key="'ai2' + overview+chartKey"
|
||||||
:sp="''"
|
:sp="''"
|
||||||
|
:fn="changeChart2"
|
||||||
|
:htmlShow="true"
|
||||||
:maintitle="overviewTotal"
|
:maintitle="overviewTotal"
|
||||||
:legend-opt="legendOpt2"
|
:legend-opt="legendOpt2"
|
||||||
:typedata="typeDistributionData"
|
:typedata="typeDistributionData"
|
||||||
:text="overviewText"
|
:text="overviewText"
|
||||||
:height="230"
|
:height="chart2Height"
|
||||||
></project-overview-chart>
|
></project-overview-chart>
|
||||||
</module-one-1-1>
|
</module-one-1-1>
|
||||||
<module-one-1-1 label="每日预警趋势">
|
<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>
|
</module-one-1-1>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="18">
|
<el-col :span="18" class="h100 right-box">
|
||||||
<module-one-1-3 label="今日预警详情" :key="todayKey" style="position: relative">
|
<module-one-1-3 label="今日预警详情" :key="todayKey" style="position: relative">
|
||||||
<div class="today-list ai-list" v-if="todayList.length > 0">
|
<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 v-for="(it, idx) in todayList" :key="idx" class="today-item ai-item">
|
||||||
<div class="item-left">
|
<div class="item-left">
|
||||||
<el-image
|
<el-image :src="it.imageUrl + '.min.jpg'" :preview-src-list="[it.imageUrl]"></el-image>
|
||||||
style="width: 180px; height: 100px"
|
|
||||||
:src="it.imageUrl + '.min.jpg'"
|
|
||||||
:preview-src-list="[it.imageUrl]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-right">
|
<div class="item-right">
|
||||||
<div class="item-row">
|
<div class="item-row">
|
||||||
|
|
@ -64,8 +62,8 @@
|
||||||
|
|
||||||
<div v-if="todayList.length == 0" class="not-data">暂无预警数据</div>
|
<div v-if="todayList.length == 0" class="not-data">暂无预警数据</div>
|
||||||
</module-one-1-3>
|
</module-one-1-3>
|
||||||
<module-one-2-3 label="预警概况明细" style="position: relative">
|
<module-one-2-3 label="预警概况明细" style="position: relative" class="ai-list-box">
|
||||||
<div style="position: absolute; right: 0px; top: 4px">
|
<div style="position: absolute; right: 0px; top: -22px;z-index: 9999;">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
class="bg-date-picker"
|
class="bg-date-picker"
|
||||||
v-model="selDate"
|
v-model="selDate"
|
||||||
|
|
@ -81,40 +79,25 @@
|
||||||
></el-date-picker>
|
></el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
<div class="ai-nav">
|
<div class="ai-nav">
|
||||||
<div
|
<div class="nav-item ai-content-nav-con ai-content-nav" :class="selType == 0 ? 'active' : ''" @click="doSelType(0)">全部</div>
|
||||||
class="nav-item ai-content-nav-con ai-content-nav"
|
|
||||||
:class="selType == 0 ? 'active' : ''"
|
|
||||||
@click="doSelType(0)"
|
|
||||||
>
|
|
||||||
全部
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="nav-item ai-content-nav-con ai-content-nav"
|
class="nav-item ai-content-nav-con ai-content-nav"
|
||||||
v-for="(it, idx) in aiTypes"
|
v-for="(it, idx) in aiTypes"
|
||||||
:class="selType == it.value ? 'active' : ''"
|
:class="selType == it.value ? 'active' : ''"
|
||||||
@click="doSelType(it.value)"
|
@click="doSelType(it.value)"
|
||||||
:key="it.value"
|
:key="it.value"
|
||||||
>
|
>{{ it.label }}</div>
|
||||||
{{ it.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data-list">
|
<div class="data-list">
|
||||||
<div class="ai-list" v-if="listDatas.length > 0">
|
<div class="ai-list" v-if="listDatas.length > 0">
|
||||||
<div v-for="(it, idx) in listDatas" :key="idx" class="today-item ai-item">
|
<div v-for="(it, idx) in listDatas" :key="idx" class="today-item ai-item">
|
||||||
<div class="item-left">
|
<div class="item-left">
|
||||||
<el-image
|
<el-image :src="it.imageUrl + '.min.jpg'" :preview-src-list="[it.imageUrl]"></el-image>
|
||||||
style="width: 180px; height: 100px"
|
|
||||||
:src="it.imageUrl + '.min.jpg'"
|
|
||||||
:preview-src-list="[it.imageUrl]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-right">
|
<div class="item-right">
|
||||||
<div class="item-row">
|
<div class="item-row">
|
||||||
<div>预警名称:</div>
|
<div>预警名称:</div>
|
||||||
<div style="color: rgba(1, 169, 255, 1)">
|
<div style="color: rgba(1, 169, 255, 1)">{{ it.alarmTypeName }}</div>
|
||||||
{{ it.alarmTypeName }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-row">
|
<div class="item-row">
|
||||||
<div>预警时间:</div>
|
<div>预警时间:</div>
|
||||||
|
|
@ -143,64 +126,20 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
chartKey: 0,
|
||||||
|
chart1Height: 230,
|
||||||
|
chart2Height: 230,
|
||||||
|
chart3Height: 280,
|
||||||
|
dpi: '',
|
||||||
overview: 0,
|
overview: 0,
|
||||||
overviewDay: 0,
|
overviewDay: 0,
|
||||||
overviewTotal: 0,
|
overviewTotal: 0,
|
||||||
legendOpt1: {
|
legendOpt1: {},
|
||||||
icon: "rect",
|
legendOpt2: {},
|
||||||
orient: "horizontal",
|
overviewText: '累计预警',
|
||||||
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: "累计预警",
|
|
||||||
//预警概况
|
//预警概况
|
||||||
typeDistributionData: [],
|
typeDistributionData: [],
|
||||||
overviewTextDay: "今日预警",
|
overviewTextDay: '今日预警',
|
||||||
overviewTotalDay: 0,
|
overviewTotalDay: 0,
|
||||||
typeDistributionDataDay: [],
|
typeDistributionDataDay: [],
|
||||||
todayPage: {
|
todayPage: {
|
||||||
|
|
@ -222,100 +161,188 @@ export default {
|
||||||
pickerOptions: {
|
pickerOptions: {
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
{
|
{
|
||||||
text: "最近一周",
|
text: '最近一周',
|
||||||
onClick(picker) {
|
onClick(picker) {
|
||||||
const end = new Date();
|
const end = new Date()
|
||||||
const start = new Date();
|
const start = new Date()
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||||
picker.$emit("pick", [start, end]);
|
picker.$emit('pick', [start, end])
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "最近一个月",
|
text: '最近一个月',
|
||||||
onClick(picker) {
|
onClick(picker) {
|
||||||
const end = new Date();
|
const end = new Date()
|
||||||
const start = new Date();
|
const start = new Date()
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||||
picker.$emit("pick", [start, end]);
|
picker.$emit('pick', [start, end])
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "最近三个月",
|
text: '最近三个月',
|
||||||
onClick(picker) {
|
onClick(picker) {
|
||||||
const end = new Date();
|
const end = new Date()
|
||||||
const start = new Date();
|
const start = new Date()
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||||
picker.$emit("pick", [start, end]);
|
picker.$emit('pick', [start, end])
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
intervalTimes: null,
|
intervalTimes: null,
|
||||||
warningData: [],
|
warningData: [],
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch("ChangeNav", 310);
|
this.$store.dispatch('ChangeNav', 310)
|
||||||
this.$bus.$on("projectChange", (prj) => {
|
this.$bus.$on('projectChange', (prj) => {
|
||||||
this.selProject = prj;
|
this.selProject = prj
|
||||||
this.init();
|
this.init()
|
||||||
});
|
})
|
||||||
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()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.setOpts()
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
init() {
|
||||||
if (!this.selProject) {
|
if (!this.selProject) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
this.$api.dict("aibox_alarm_type").then((d) => {
|
this.$api.dict('aibox_alarm_type').then((d) => {
|
||||||
this.aiTypes = d || [];
|
this.aiTypes = d || []
|
||||||
});
|
})
|
||||||
this.loadList();
|
this.loadList()
|
||||||
this.loadTodayList();
|
this.loadTodayList()
|
||||||
this.getAiVideoAlertorTypeCount();
|
this.getAiVideoAlertorTypeCount()
|
||||||
this.daysTrendView();
|
this.daysTrendView()
|
||||||
},
|
},
|
||||||
doSelType(n) {
|
doSelType(n) {
|
||||||
if (this.selType != n) {
|
if (this.selType != n) {
|
||||||
this.selType = n;
|
this.selType = n
|
||||||
this.listPage.pageIndex = 1;
|
this.listPage.pageIndex = 1
|
||||||
this.loadList();
|
this.loadList()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dtChange(init) {
|
dtChange(init) {
|
||||||
this.listPage.pageIndex = 1;
|
this.listPage.pageIndex = 1
|
||||||
this.loadList();
|
this.loadList()
|
||||||
},
|
},
|
||||||
handleTodayCurrentChange(n) {
|
handleTodayCurrentChange(n) {
|
||||||
this.todayPage.pageIndex = n;
|
this.todayPage.pageIndex = n
|
||||||
this.loadTodayList();
|
this.loadTodayList()
|
||||||
},
|
},
|
||||||
handleListCurrentChange(n) {
|
handleListCurrentChange(n) {
|
||||||
this.listPage.pageIndex = n;
|
this.listPage.pageIndex = n
|
||||||
this.loadList();
|
this.loadList()
|
||||||
},
|
},
|
||||||
loadList() {
|
loadList() {
|
||||||
let postData = {
|
let postData = {
|
||||||
pageNum: this.listPage.pageIndex,
|
pageNum: this.listPage.pageIndex,
|
||||||
pageSize: this.listPage.pageSize,
|
pageSize: this.listPage.pageSize,
|
||||||
projectId: this.selProject.id,
|
projectId: this.selProject.id,
|
||||||
};
|
}
|
||||||
if (this.selDate.length > 0) {
|
if (this.selDate.length > 0) {
|
||||||
let _params = {
|
let _params = {
|
||||||
beginTime: this.selDate[0],
|
beginTime: this.selDate[0],
|
||||||
endTime: this.selDate[1],
|
endTime: this.selDate[1],
|
||||||
};
|
}
|
||||||
postData.params = _params;
|
postData.params = _params
|
||||||
}
|
}
|
||||||
if (this.selType != 0) {
|
if (this.selType != 0) {
|
||||||
postData.alarmType = this.selType;
|
postData.alarmType = this.selType
|
||||||
}
|
}
|
||||||
this.$api.aiWarning.list(postData).then((d) => {
|
this.$api.aiWarning.list(postData).then((d) => {
|
||||||
this.listPage.total = d.total || 0;
|
this.listPage.total = d.total || 0
|
||||||
this.listDatas = d.rows || [];
|
this.listDatas = d.rows || []
|
||||||
this.listKey++;
|
this.listKey++
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
loadTodayList() {
|
loadTodayList() {
|
||||||
let postData = {
|
let postData = {
|
||||||
|
|
@ -323,75 +350,72 @@ export default {
|
||||||
pageSize: this.todayPage.pageSize,
|
pageSize: this.todayPage.pageSize,
|
||||||
projectId: this.selProject.id,
|
projectId: this.selProject.id,
|
||||||
params: {
|
params: {
|
||||||
date: new Date().toLocaleDateString().replaceAll("/", "-"),
|
date: new Date().toLocaleDateString().replaceAll('/', '-'),
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
this.$api.aiWarning.list(postData).then((d) => {
|
this.$api.aiWarning.list(postData).then((d) => {
|
||||||
this.todayPage.total = d.total || 0;
|
this.todayPage.total = d.total || 80
|
||||||
this.todayList = d.rows || [];
|
this.todayList = d.rows || []
|
||||||
this.todayKey++;
|
|
||||||
});
|
this.todayKey++
|
||||||
|
})
|
||||||
},
|
},
|
||||||
getAiVideoAlertorTypeCount() {
|
getAiVideoAlertorTypeCount() {
|
||||||
//今日视图
|
//今日视图
|
||||||
this.$api.aiWarning
|
this.$api.aiWarning.groupCountByAlarmType(this.selProject.id, 'Y').then((response) => {
|
||||||
.groupCountByAlarmType(this.selProject.id, "Y")
|
|
||||||
.then((response) => {
|
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
let sum = 0;
|
let sum = 0
|
||||||
response.data.forEach((datum) => {
|
response.data.forEach((datum) => {
|
||||||
sum += datum.value;
|
sum += datum.value
|
||||||
});
|
})
|
||||||
this.overviewTotalDay = sum;
|
this.overviewTotalDay = sum
|
||||||
this.typeDistributionDataDay = response.data;
|
this.typeDistributionDataDay = response.data
|
||||||
this.overviewDay++;
|
this.overviewDay++
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
//累计视图
|
//累计视图
|
||||||
this.$api.aiWarning
|
this.$api.aiWarning.groupCountByAlarmType(this.selProject.id, 'N').then((response) => {
|
||||||
.groupCountByAlarmType(this.selProject.id, "N")
|
|
||||||
.then((response) => {
|
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
let sum = 0;
|
let sum = 0
|
||||||
response.data.forEach((datum) => {
|
response.data.forEach((datum) => {
|
||||||
sum += datum.value;
|
sum += datum.value
|
||||||
});
|
})
|
||||||
this.overviewTotal = sum;
|
this.overviewTotal = sum
|
||||||
this.typeDistributionData = response.data;
|
this.typeDistributionData = response.data
|
||||||
this.overview++;
|
this.overview++
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
daysTrendView() {
|
daysTrendView() {
|
||||||
this.$api.aiWarning.getDaysTrendView(this.selProject.id).then((response) => {
|
this.$api.aiWarning.getDaysTrendView(this.selProject.id).then((response) => {
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
response.data.reverse();
|
response.data.reverse()
|
||||||
let _data1 = [];
|
let _data1 = []
|
||||||
let _date8 = [];
|
let _date8 = []
|
||||||
response.data.forEach((datum) => {
|
response.data.forEach((datum) => {
|
||||||
_data1.push(datum.total);
|
_data1.push(datum.total)
|
||||||
_date8.push(datum.create_time);
|
_date8.push(datum.create_time)
|
||||||
});
|
})
|
||||||
let _lineData = [];
|
let _lineData = []
|
||||||
_lineData.push(_data1);
|
_lineData.push(_data1)
|
||||||
let _color = ["#0078e7"];
|
let _color = ['#0078e7']
|
||||||
let _legend = ["预警总数"];
|
let _legend = ['预警总数']
|
||||||
let _trendData = {
|
let _trendData = {
|
||||||
lineData: _lineData,
|
lineData: _lineData,
|
||||||
color: _color,
|
color: _color,
|
||||||
legend: _legend,
|
legend: _legend,
|
||||||
date: _date8,
|
date: _date8,
|
||||||
};
|
|
||||||
this.warningData = _trendData;
|
|
||||||
}
|
}
|
||||||
});
|
this.warningData = _trendData
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
initIntervalTimes() {
|
initIntervalTimes() {
|
||||||
this.intervalTimes = setInterval(this.init, 150000); // 每2.5分钟刷新一次
|
this.intervalTimes = setInterval(this.init, 150000) // 每2.5分钟刷新一次
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scope>
|
<style lang="less" scope>
|
||||||
.project-ai-warning {
|
.project-ai-warning {
|
||||||
|
|
@ -399,11 +423,15 @@ export default {
|
||||||
top: 63px;
|
top: 63px;
|
||||||
left: 51px;
|
left: 51px;
|
||||||
}
|
}
|
||||||
|
.chart-text {
|
||||||
|
top: 63px;
|
||||||
|
left: 51px;
|
||||||
|
}
|
||||||
.ai-list {
|
.ai-list {
|
||||||
padding: 0px 24px 8px;
|
padding: 0px 24px 8px;
|
||||||
.ai-item {
|
.ai-item {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
margin: 12px 12px 0px 0px;
|
margin: 0px 12px 0px 0px;
|
||||||
width: calc(33% - 12px);
|
width: calc(33% - 12px);
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
@ -433,3 +461,144 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
||||||
</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>
|
||||||
|
|
|
||||||
|
|
@ -3,52 +3,41 @@
|
||||||
<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({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 100,
|
||||||
projectId: projectId,
|
projectId: projectId,
|
||||||
comId: comId
|
comId: comId,
|
||||||
}).then(d => {
|
})
|
||||||
this.total = d.total || 0;
|
.then((d) => {
|
||||||
this.videoMonitors = (d.rows || []).map(it => {
|
this.total = d.total || 0
|
||||||
it.active = false;
|
this.videoMonitors = (d.rows || []).map((it) => {
|
||||||
it.iframeSrc = "";
|
it.active = false
|
||||||
it.accessToken = "";
|
it.iframeSrc = ''
|
||||||
return it;
|
it.accessToken = ''
|
||||||
});
|
return it
|
||||||
this.showAllVideo();
|
})
|
||||||
});
|
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