From e7b424885a421bf9ece228c216ffc39622ce556f Mon Sep 17 00:00:00 2001
From: haha <lj7788@126.com>
Date: Sun, 11 May 2025 00:09:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=A7=E5=B1=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/css/largeScreenStyle.css           |  80 ++
 .../public/css/largeScreenStyle.less          |  89 ++
 .../src/components/certificate-bar-chart.vue  |  98 +-
 yanzhu-bigscreen/src/components/header.vue    |   8 +-
 .../src/components/project-overview-chart.vue | 238 +++--
 .../src/views/safety/aiWarning.vue            | 995 ++++++++++--------
 .../src/views/safety/dumbwaiter.vue           | 350 +++++-
 yanzhu-bigscreen/src/views/videoMonitor.vue   | 225 ++--
 8 files changed, 1407 insertions(+), 676 deletions(-)

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