zc

src/views/components/baseComponent.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="baseComponent">
+    <div class="base-igm"></div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'baseComponent',
+    data () {
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .baseComponent{
+    height:82px;
+    .base-igm{
+      margin:28px auto 0;
+      width:3071px;
+      height:54px;
+      background-image: url("../../assets/ZDimages/img_db_bg@1x.png");
+      background-size: 100% 100%;
+    }
+  }
+</style>

src/views/components/center-bottom-left.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="center-bottom-left">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div class="center-bottom-left-page">
+      <div id="center-bottom-left-eCharts-left"></div>
+    </div>
+  </div>
+</template>
+<script>
+  import titleComponent from './subcomponent/titleComponent.vue'
+  export default {
+    name: 'center-bottom-left',
+    components: {
+      titleComponent,
+    },
+    data () {
+      return {
+        titleData:{
+          name:'进入人数统计及走势',
+          type:'bottom1',
+          num:'5',
+        },
+        eChartsData:null,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.eChartsleft();
+    },
+    methods:{
+      eChartsleft() {
+        let option = {
+
+          grid: {
+            top: '20%',
+            right: '14%',
+            left: '6%',
+            bottom: '10%',
+            containLabel: true,
+          },
+          tooltip: {
+            show:false,
+            trigger: 'axis',
+          },
+          legend: {
+            icon:'roundRect',
+            // icon: "image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7",
+            show: true,
+            top: '20%',
+            itemWidth: 20, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 4, //  图例标记的图形高度。
+            textStyle: {
+              color: '#fff',
+              fontSize: 14,
+            }
+          },
+          xAxis: {
+            name: '',
+            type: 'category',
+            interval: 0,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            data: [
+              "8:00",
+              "9:00",
+              "10:00",
+              "11:00",
+              "12:00",
+              "13:00",
+              "14:00",
+              "15:00",
+              "16:00",
+              "17:00",
+              "18:00",
+              "19:00",
+            ]
+          },
+          yAxis: {
+            name: '',
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+          },
+          series: [
+            {
+              name: '总数',
+              type: 'line',
+              showSymbol: true,
+              smooth: true,
+              // symbol: 'rect',
+              symbolSize: 0,
+              itemStyle: {
+                color: '#0576FF',
+                borderWidth: 5,
+                borderColor: '#0576FF',
+              },
+              lineStyle: {
+                width: 3,
+                shadowColor: '#0576FF',//设置折线阴影
+                shadowBlur: 15,
+              },
+              data: [20, 22, 31, 28, 44, 55, 42, 44, 62, 51, 20, 31],
+              endLabel: {
+                show: false,
+              },
+            },
+            {
+              name: '学生',
+              type: 'line',
+              showSymbol: true,
+              smooth: true,
+              // symbol: 'rect',
+              symbolSize: 0,
+              itemStyle: {
+                color: '#00FFFF',
+                borderWidth: 5,
+                borderColor: '#00FFFF',
+              },
+              lineStyle: {
+                width: 3,
+                shadowColor: '#00FFFF',//设置折线阴影
+                shadowBlur: 15,
+              },
+              data: [10, 12, 21, 18, 34, 45, 32, 34, 52, 41, 35, 25],
+              endLabel: {
+                show: false,
+              },
+            },
+            {
+              name: '教师',
+              type: 'line',
+              showSymbol: true,
+              smooth: true,
+              // symbol: 'rect',
+              symbolSize: 0,
+              itemStyle: {
+                color: '#FF8400',
+                borderWidth: 5,
+                borderColor: '#FF8400',
+              },
+              lineStyle: {
+                width: 3,
+                shadowColor: '#FF8400',//设置折线阴影
+                shadowBlur: 15,
+              },
+              data: [8, 18, 11, 23, 15, 32, 45, 24, 47, 15, 20, 24],
+              endLabel: {
+                show: false,
+              },
+            },
+          ],
+        }
+        this.eChartsData = this.$echarts.init(document.getElementById('center-bottom-left-eCharts-left'))
+        this.eChartsData.clear()
+        this.eChartsData.setOption(option)
+      }
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .center-bottom-left{
+    width:917px;
+    height:744px;
+    margin-right:20px;
+    .center-bottom-left-page{
+      width:917px;
+      height:664px;
+      background-image: url("../../assets/ZDimages/icon_jrrs_bg@1x.png");
+      background-size: 100% 100%;
+      #center-bottom-left-eCharts-left{
+        width:888px;
+        height:345px;
+      }
+    }
+  }
+</style>

src/views/components/center-bottom-right.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="center-bottom-right">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div class="center-bottom-right-page">
+
+    </div>
+  </div>
+</template>
+<script>
+  import titleComponent from './subcomponent/titleComponent.vue'
+  export default {
+    name: 'center-bottom-right',
+    components: {
+      titleComponent,
+    },
+    data () {
+      return {
+        titleData:{
+          name:'资源设施使用频率排行',
+          type:'bottom2',
+          num:'6',
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .center-bottom-right{
+    width:821px;
+    height:744px;
+    .center-bottom-right-page{
+      width:821px;
+      height:664px;
+      background-image: url("../../assets/ZDimages/icon_jrrs_bg@1x.png");
+      background-size: 100% 100%;
+    }
+  }
+</style>

src/views/components/center-center.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="center-center">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div class="center-center-page">
+      <div id="center-center-eCharts-center"></div>
+    </div>
+  </div>
+</template>
+<script>
+  import titleComponent from './subcomponent/titleComponent.vue'
+  export default {
+    name: 'center-center',
+    components: {
+      titleComponent,
+    },
+    data () {
+      return {
+        titleData:{
+          name:'使用单位及用户统计',
+          type:'top',
+          num:'4',
+        },
+        eChartsData:null,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.eChartsCenter();
+    },
+    methods:{
+      eChartsCenter(){
+        let listA = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+        let listB = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2];
+        let listC = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2];
+        let option = {
+          grid: {
+            top: 40,
+            bottom: 40,
+            left: 40,
+            right: 40
+          },
+          tooltip: {
+            show: false,
+            trigger: 'axis',
+            formatter: function (data) {
+              console.log(data)
+              let html = ``
+              html = `
+          <div>${data[0].name}</div>
+          <div>${data[0].marker} ${data[0].seriesName}: ${data[0].value}</div>
+          <div>${data[1].marker} ${data[1].seriesName}: ${data[1].value}%</div>
+          `
+              return html
+            }
+          },
+          calculable: true,
+          legend: {
+            show: false,
+            data: ['使用单位数量', '使用人数量']
+          },
+          xAxis: [
+            {
+              type: 'category',
+              axisLabel: {
+                rotate: -45, // 旋转角度
+                color: '#fff',
+              },
+              data: listA,
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '',
+              axisLabel: {
+                show: true,
+                color: '#fff',
+                formatter: '{value}',
+              },
+              splitLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  width: 1,
+                  color: '#00CECE',
+                }
+              },
+            },
+            {
+              type: 'value',
+              name: '',
+              axisLabel: {
+                show: true,
+                color: '#fff',
+                formatter: '{value}'
+              },
+              splitLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  width: 1,
+                  color: '#00CECE',
+                }
+              },
+            }
+          ],
+          series: [
+            {
+              name: '使用单位数量',
+              type: 'bar',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#00FFFF',
+              },
+
+              showBackground: true,
+              backgroundStyle: {
+                color: "rgba(216,216,216,0.08)",
+              },
+              itemStyle: {
+                show: true,
+                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#00FDFF' },
+                  { offset: 1, color: '#0178FF' }
+                ], false),
+              },
+              data: listB
+            },
+            {
+              name: '使用人数量',
+              type: 'line',
+              yAxisIndex: 1,
+              symbol: 'circle',
+              symbolSize: 8,
+              lineStyle: {
+                color: '#0183FA',
+                width: 1.5,
+                type: 'line'  //'dashed'
+              },
+              itemStyle: {
+                color: '#0183FA'
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#0183FA',
+                formatter: `{c}人`
+              },
+              data: listC
+            }
+          ]
+        }
+        this.eChartsData = this.$echarts.init(document.getElementById('center-center-eCharts-center'))
+        this.eChartsData.clear()
+        this.eChartsData.setOption(option)
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .center-center{
+    width:1758px;
+    height:586px;
+    margin-bottom:22px;
+    .center-center-page{
+      width:1758px;
+      height:506px;
+      background-image: url("../../assets/ZDimages/icon_sydw_bg@1x.png");
+      background-size: 100% 100%;
+      #center-center-eCharts-center{
+        width:1326px;
+        height:465px;
+      }
+    }
+  }
+</style>

src/views/components/center-top.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="center-top">
+    <titleComponent :titleData="titleData"></titleComponent>
+  </div>
+</template>
+<script>
+  import titleComponent from './subcomponent/titleComponent.vue'
+  export default {
+    name: 'center-top',
+    components: {
+      titleComponent,
+    },
+    data () {
+      return {
+        titleData:{
+          name:'科研人员统计',
+          type:'top',
+          num:'3',
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .center-top{
+    width:1758px;
+    height:484px;
+
+  }
+</style>

src/views/components/headComponent.vue

@@ -35,8 +35,8 @@
 
     },
     mounted(){
-      this.timeFunction();
-      this.weatherFunction();
+      // this.timeFunction();
+      // this.weatherFunction();
     },
     methods:{
       //时间定时器
@@ -81,7 +81,7 @@
 </script>
 <style scoped lang="scss">
   .headComponent{
-    height:173px;
+    height:220px;
     display: flex;
     position: relative;
     background-image: url("../../assets/ZDimages/img_db@1x.png");

src/views/components/left-top.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class="left-top">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div class="left-top-eCharts-box">
+      <div id="left-top-eCharts-left"></div>
+      <div id="left-top-eCharts-right"></div>
+    </div>
+  </div>
+</template>
+<script>
+  import titleComponent from './subcomponent/titleComponent.vue'
+  export default {
+    name: 'left-top',
+    components: {
+      titleComponent,
+    },
+    data() {
+      return {
+        titleData:{
+          name:'科研人员统计',
+          type:'left',
+          num:'1',
+        },
+        eChartsData1:null,
+        eChartsData2:null,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize();
+    },
+    methods: {
+      initialize(){
+        this.eChartsLeft();
+        this.eChartsRight();
+      },
+      eChartsLeft() {
+        let colorA = this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(46,155,255,1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(46,155,255,0)",
+          },
+        ]);
+        colorA = JSON.parse(JSON.stringify(colorA));
+        let colorB = this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(46,155,255,1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(46,155,255,0)",
+          },
+        ]);
+        colorB = JSON.parse(JSON.stringify(colorB));
+        let colorC = this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(46,155,255,1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(46,155,255,1)",
+          },
+        ]);
+        colorC = JSON.parse(JSON.stringify(colorC));
+
+        const CubeLeft = this.$echarts.graphic.extendShape({
+          shape: {
+            x: 0,
+            y: 0,
+          },
+          buildPath: function (ctx, shape) {
+            const xAxisPoint = shape.xAxisPoint;
+            const c0 = [shape.x, shape.y];
+            const c1 = [shape.x - 9, shape.y - 9];
+            const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
+            const c3 = [xAxisPoint[0], xAxisPoint[1]];
+            ctx
+              .moveTo(c0[0], c0[1])
+              .lineTo(c1[0], c1[1])
+              .lineTo(c2[0], c2[1])
+              .lineTo(c3[0], c3[1])
+              .closePath();
+          },
+        });
+        const CubeRight = this.$echarts.graphic.extendShape({
+          shape: {
+            x: 0,
+            y: 0,
+          },
+          buildPath: function (ctx, shape) {
+            const xAxisPoint = shape.xAxisPoint;
+            const c1 = [shape.x, shape.y];
+            const c2 = [xAxisPoint[0], xAxisPoint[1]];
+            const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
+            const c4 = [shape.x + 18, shape.y - 9];
+            ctx
+              .moveTo(c1[0], c1[1])
+              .lineTo(c2[0], c2[1])
+              .lineTo(c3[0], c3[1])
+              .lineTo(c4[0], c4[1])
+              .closePath();
+          },
+        });
+        const CubeTop = this.$echarts.graphic.extendShape({
+          shape: {
+            x: 0,
+            y: 0,
+          },
+          buildPath: function (ctx, shape) {
+            const c1 = [shape.x, shape.y];
+            const c2 = [shape.x + 18, shape.y - 9];
+            const c3 = [shape.x + 9, shape.y - 18];
+            const c4 = [shape.x - 9, shape.y - 9];
+            ctx
+              .moveTo(c1[0], c1[1])
+              .lineTo(c2[0], c2[1])
+              .lineTo(c3[0], c3[1])
+              .lineTo(c4[0], c4[1])
+              .closePath();
+          },
+        });
+        this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        const VALUE = [
+          2012, 1230, 3790, 2349];
+        let option = {
+          title: {
+            text: "",
+            top: 32,
+            left: 18,
+            textStyle: {
+              color: "white",
+              fontSize: 24,
+            },
+          },
+          grid: {
+            left: 20,
+            right: 40,
+            bottom: "19%",
+            top: 107,
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: [
+              "教授 ",
+              "副教授",
+              "讲师",
+              "助教",
+            ],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "white",
+              },
+            },
+            offset: 20,
+            axisTick: {
+              show: false,
+              length: 9,
+              alignWithLabel: true,
+              lineStyle: {
+                color: "white",
+              },
+            },
+            axisLabel: {
+              fontSize: 10,
+            },
+          },
+          yAxis: {
+            type: "value",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "white",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              fontSize: 16,
+            },
+            boundaryGap: ["20%", "20%"],
+          },
+          series: [
+            {
+              type: "custom",
+              renderItem: (params, api) => {
+                const location = api.coord([api.value(0), api.value(1)]);
+                return {
+                  type: "group",
+                  children: [
+                    {
+                      type: "CubeLeft",
+                      shape: {
+                        api,
+                        xValue: api.value(0),
+                        yValue: api.value(1),
+                        x: location[0],
+                        y: location[1],
+                        xAxisPoint: api.coord([api.value(0), 0]),
+                      },
+                      style: {
+                        fill: colorA,
+                      },
+                    },
+                    {
+                      type: "CubeRight",
+                      shape: {
+                        api,
+                        xValue: api.value(0),
+                        yValue: api.value(1),
+                        x: location[0],
+                        y: location[1],
+                        xAxisPoint: api.coord([api.value(0), 0]),
+                      },
+                      style: {
+                        fill: colorB,
+                      },
+                    },
+                    {
+                      type: "CubeTop",
+                      shape: {
+                        api,
+                        xValue: api.value(0),
+                        yValue: api.value(1),
+                        x: location[0],
+                        y: location[1],
+                        xAxisPoint: api.coord([api.value(0), 0]),
+                      },
+                      style: {
+                        fill: colorC,
+                      },
+                    },
+                  ],
+                };
+              },
+              data: VALUE,
+            },
+            {
+              type: "bar",
+              label: {
+                normal: {
+                  show: true,
+                  position: "top",
+                  fontSize: 16,
+                  color: "#fff",
+                  offset: [4, -25],
+                },
+              },
+              itemStyle: {
+                color: "transparent",
+              },
+              data: VALUE,
+            },
+          ],
+        };
+        this.eChartsData1 = this.$echarts.init(document.getElementById('left-top-eCharts-left'))
+        this.eChartsData1.clear()
+        this.eChartsData1.setOption(option)
+      },
+      eChartsRight() {
+        let data = [
+          {
+            name: "常规",
+            value: 175.17,
+          },
+          {
+            name: "紧急",
+            value: 148.35,
+          },
+          {
+            name: "疑难",
+            value: 95.36,
+          },
+        ];
+        let xAxisData = [];
+        let seriesData1 = [];
+        let sum = 0;
+        data.forEach((item) => {
+          xAxisData.push(item.name);
+          seriesData1.push(item.value);
+          sum += item.value;
+        });
+        let option = {
+          title: {
+            show:false,
+            text: "多色立体圆柱",
+            top: 20,
+            left: "center",
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          grid: {
+            top: "25%",
+            bottom: "15%",
+          },
+          xAxis: {
+            data: xAxisData,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "white",
+              },
+            },
+            axisLabel: {
+              show: true,
+              margin: 25,
+              align: "center",
+              formatter: function (params, index) {
+                return (
+                  "{a|" +
+                  ((seriesData1[index] / sum) * 100).toFixed(2) +
+                  "%}" +
+                  "\n" +
+                  "{b|" +
+                  params +
+                  "}"
+                );
+              },
+              textStyle: {
+                fontSize: 14,
+                color: "#ffffff",
+                rich: {
+                  a: {
+                    fontSize: 12,
+                    color: "#ffffff",
+                  },
+                  b: {
+                    height: 20,
+                    fontSize: 14,
+                    color: "#ffffff",
+                  },
+                },
+              },
+            },
+            interval: 0,
+          },
+          yAxis: {
+            type: "value",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "white",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              fontSize: 16,
+            },
+            boundaryGap: ["20%", "20%"],
+          },
+          series: [
+            {
+              name: "柱顶部",
+              type: "pictorialBar",
+              symbolSize: [26, 10],
+              symbolOffset: [0, -5],
+              z: 12,
+              itemStyle: {
+                normal: {
+                  color: "#02c3f1",
+                },
+              },
+              label: {
+                show: true,
+                position: "top",
+                fontSize: 16,
+              },
+              symbolPosition: "end",
+              data: seriesData1,
+            },
+            {
+              name: "柱底部",
+              type: "pictorialBar",
+              symbolSize: [26, 10],
+              symbolOffset: [0, 5],
+              z: 12,
+              itemStyle: {
+                normal: {
+                  color: "#02c3f1",
+                },
+              },
+              data: seriesData1,
+            },
+            {
+              type: "bar",
+              itemStyle: {
+                normal: {
+                  color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 1,
+                      color: "rgba(2,195,241,0.1)",
+                    },
+                    {
+                      offset: 0,
+                      color: "#02c3f1",
+                    },
+                  ]),
+                  opacity: 0.8,
+                },
+              },
+              z: 16,
+              silent: true,
+              barWidth: 26,
+              barGap: "-100%", // Make series be overlap
+              data: seriesData1,
+            },
+          ],
+        };
+        this.eChartsData2 = this.$echarts.init(document.getElementById('left-top-eCharts-right'))
+        this.eChartsData2.clear()
+        this.eChartsData2.setOption(option)
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .left-top {
+    width:950px;
+    height:735px;
+    margin-bottom:34px;
+    .left-top-eCharts-box{
+      width:950px;
+      height:655px;
+      background-image: url("../../assets/ZDimages/icon_kyrytj_bg@1x.png");
+      background-size: 100% 100%;
+      display: flex;
+      #left-top-eCharts-left{
+        width:475px;
+        height:340px;
+      }
+      #left-top-eCharts-right{
+        width:475px;
+        height:340px;
+      }
+    }
+  }
+</style>

src/views/components/right.vue

@@ -0,0 +1,463 @@
+<template>
+  <div class="right">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div class="right-page">
+      <div id="right-eCharts-1"></div>
+      <div id="right-eCharts-2"></div>
+      <div id="right-eCharts-3"></div>
+    </div>
+  </div>
+</template>
+<script>
+  import titleComponent from './subcomponent/titleComponent.vue'
+  export default {
+    name: 'right',
+    components: {
+      titleComponent,
+    },
+    data () {
+      return {
+        titleData:{
+          name:'实时数据统计',
+          type:'right',
+          num:'7',
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.initialize();
+    },
+    methods:{
+      initialize(){
+        this.eCharts1();
+        this.eCharts2();
+        this.eCharts3();
+      },
+      eCharts1(){
+        let listA = ['00:00', '03:30', '07:00', '10:30', '14:00', '17:30', '21:00'];
+        let listB = [105, 272, 239, 150, 147, 319, 284,];
+        let option = {
+          tooltip: {
+            show: false,
+            trigger: 'axis'
+          },
+
+          legend: {
+            itemWidth: 20,
+            itemHeight: 10,
+            itemGap: 20,
+            right: "42%",
+            top: "2%",
+            textStyle: {
+              fontSize: 14,
+              color: "#fff",
+            },
+            data: ["24h温度走势图"],
+            selectedMode: false,
+          },
+          xAxis: {
+            data: listA,
+            type: 'category',
+            boundaryGap: true,
+            itemStyle: {
+              borderColor: 'blue',
+              color: '#ffffff'
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              formatter: function (value, index) {
+                return value;
+              },
+              textStyle: {
+                show: true,
+                color: '#fff',
+                fontSize: '12'
+              }
+            },
+            axisLine: {
+              show: true,
+            },
+          },
+          yAxis: {
+            name: '',
+            nameTextStyle: {
+              color: '#fff',
+              padding: [0, 0, 6, 0]
+            },
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisLine: {
+              show: true,
+            },
+            axisLabel: {
+              textStyle: {
+                show: true,
+                color: '#fff',
+                fontSize: '12'
+              }
+            },
+          },
+          grid: {
+            left: '3%',
+            top: '8%',
+            right: '3%',
+            bottom: '5%',
+            containLabel: true
+          },
+          series: [{
+            data: listB,
+            name: '24h温度走势图',
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            symbolSize: 0,//不需要点就设置0
+            lineStyle: {
+              width: 2,
+              type: 'solid'
+            },
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: 'rgba(255,86,86,1)',
+              color: 'rgba(255,86,86,1)'
+            },
+            areaStyle: {
+              color: 'rgba(255,86,86,1)',
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
+                color: this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: 'rgba(255,86,86,0.6)'
+                  },
+                    {
+                      offset: 1,
+                      color: 'rgba(255,86,86,.1)'
+                    }
+                  ],
+                  false
+                ),
+              }
+            }
+          }]
+        }
+        this.eChartsData1 = this.$echarts.init(document.getElementById('right-eCharts-1'))
+        this.eChartsData1.clear()
+        this.eChartsData1.setOption(option)
+      },
+      eCharts2(){
+        let listA = ['00:00', '03:30', '07:00', '10:30', '14:00', '17:30', '21:00'];
+        let listB = [105, 272, 239, 150, 147, 319, 284,];
+        let option = {
+          tooltip: {
+            show: false,
+            trigger: 'axis'
+          },
+          legend: {
+            itemWidth: 20,
+            itemHeight: 10,
+            itemGap: 20,
+            right: "42%",
+            top: "2%",
+            textStyle: {
+              fontSize: 14,
+              color: "#fff",
+            },
+            data: ["24h湿度走势图"],
+            selectedMode: false,
+          },
+          xAxis: {
+            data: listA,
+            type: 'category',
+            boundaryGap: true,
+            itemStyle: {
+              borderColor: 'blue',
+              color: '#ffffff'
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              formatter: function (value, index) {
+                return value;
+              },
+              textStyle: {
+                show: true,
+                color: '#fff',
+                fontSize: '12'
+              }
+            },
+            axisLine: {
+              show: true,
+            },
+          },
+          yAxis: {
+            name: '',
+            nameTextStyle: {
+              color: '#fff',
+              padding: [0, 0, 6, 0]
+            },
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisLine: {
+              show: true,
+            },
+            axisLabel: {
+              textStyle: {
+                show: true,
+                color: '#fff',
+                fontSize: '12'
+              }
+            },
+          },
+          grid: {
+            left: '3%',
+            top: '8%',
+            right: '3%',
+            bottom: '5%',
+            containLabel: true
+          },
+          series: [{
+            data: listB,
+            name: '24h湿度走势图',
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            symbolSize: 0,//不需要点就设置0
+            lineStyle: {
+              width: 2,
+              type: 'solid'
+            },
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: 'rgba(1,131,250,1)',
+              color: 'rgba(1,131,250,1)',
+            },
+            areaStyle: {
+              color: 'rgba(1,131,250,1)',
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
+                color: this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: 'rgba(1,131,250,0.6)',
+                  },
+                    {
+                      offset: 1,
+                      color: 'rgba(1,131,250,0)',
+                    }
+                  ],
+                  false
+                ),
+              }
+            }
+          }]
+        }
+        this.eChartsData1 = this.$echarts.init(document.getElementById('right-eCharts-2'))
+        this.eChartsData1.clear()
+        this.eChartsData1.setOption(option)
+      },
+      eCharts3(){
+        let listA = ['00:00', '03:30', '07:00', '10:30', '14:00', '17:30', '21:00'];
+        let listB = [105, 272, 239, 150, 147, 319, 284,];
+        let option = {
+          tooltip: {
+            show: false,
+            trigger: 'axis'
+          },
+
+          legend: {
+            itemWidth: 20,
+            itemHeight: 10,
+            itemGap: 20,
+            right: "42%",
+            top: "2%",
+            textStyle: {
+              fontSize: 14,
+              color: "#fff",
+            },
+            data: ["用电功率（w）"],
+            selectedMode: false,
+          },
+          xAxis: {
+            data: listA,
+            type: 'category',
+            boundaryGap: true,
+            itemStyle: {
+              borderColor: 'blue',
+              color: '#ffffff'
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              formatter: function (value, index) {
+                return value;
+              },
+              textStyle: {
+                show: true,
+                color: '#fff',
+                fontSize: '12'
+              }
+            },
+            axisLine: {
+              show: true,
+            },
+          },
+          yAxis: {
+            name: '',
+            nameTextStyle: {
+              color: '#fff',
+              padding: [0, 0, 6, 0]
+            },
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: 'rgba(131,101,101,0.2)',
+                type: 'dashed',
+              }
+            },
+            axisLine: {
+              show: true,
+            },
+            axisLabel: {
+              textStyle: {
+                show: true,
+                color: '#fff',
+                fontSize: '12'
+              }
+            },
+          },
+          grid: {
+            left: '3%',
+            top: '8%',
+            right: '3%',
+            bottom: '5%',
+            containLabel: true
+          },
+          series: [{
+            data: listB,
+            name: '用电功率（w）',
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            symbolSize: 0,//不需要点就设置0
+            lineStyle: {
+              width: 2,
+              type: 'solid'
+            },
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: 'rgba(255,132,0,1)',
+              color: 'rgba(255,132,0,1)'
+            },
+            areaStyle: {
+              color: 'rgba(255,132,0,1)',
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
+                color: this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: 'rgba(255,132,0,0.6)'
+                  },
+                    {
+                      offset: 1,
+                      color: 'rgba(255,132,0,0)'
+                    }
+                  ],
+                  false
+                ),
+              }
+            }
+          }]
+        }
+        this.eChartsData3 = this.$echarts.init(document.getElementById('right-eCharts-3'))
+        this.eChartsData3.clear()
+        this.eChartsData3.setOption(option)
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .right{
+    width:950px;
+    height:1854px;
+    .right-page{
+      width:950px;
+      height:1774px;
+      background-image: url("../../assets/ZDimages/icon_sssjtj_bg@1x.png");
+      background-size: 100% 100%;
+      #right-eCharts-1{
+        width:890px;
+        height:330px;
+      }
+      #right-eCharts-2{
+        width:890px;
+        height:330px;
+      }
+      #right-eCharts-3{
+        width:890px;
+        height:330px;
+      }
+    }
+  }
+</style>

src/views/components/subcomponent/titleComponent.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="titleComponent">
+    <div class="titleComponent-page" :class="titleData.type=='left'?'left-box':(titleData.type=='top'?'top-box':(titleData.type=='bottom1'?'bottom-box-1':(titleData.type=='bottom2'?'bottom-box-2':(titleData.type=='right'?'right-box':''))))">
+      <img class="img-1" v-if="titleData.num == 1" src="@/assets/ZDimages/icon_kyrytj@1x.png">
+      <img class="img-1" v-if="titleData.num == 2" src="@/assets/ZDimages/icon_kyxmgl@1x.png">
+      <img class="img-1" v-if="titleData.num == 3" src="@/assets/ZDimages/icon_zysszl@1x.png">
+      <img class="img-1" v-if="titleData.num == 4" src="@/assets/ZDimages/icon_sydw@1x.png">
+      <img class="img-1" v-if="titleData.num == 5" src="@/assets/ZDimages/icon_jrrs@1x.png">
+      <img class="img-1" v-if="titleData.num == 6" src="@/assets/ZDimages/icon_zyss@1x.png">
+      <img class="img-1" v-if="titleData.num == 7" src="@/assets/ZDimages/icon_sssjtj@1x.png">
+      <img class="img-1-dh" src="@/assets/ZDimages/icon_zhuanquan@1x.png">
+      <p>{{titleData.name}}</p>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'titleComponent',
+    props: {
+      titleData: {
+        name:'',
+        type:'',
+        num:'',
+      }
+    },
+    data () {
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .titleComponent{
+    display: flex;
+    .titleComponent-page{
+      display: flex;
+      height:80px;
+      overflow: hidden;
+      position: relative;
+      .img-1{
+        display: block;
+        width:80px;
+        height:80px;
+      }
+      .img-1-dh{
+        position: absolute;
+        top:0;
+        left:0;
+        animation: rotateAnimation 2s linear infinite;
+      }
+      @keyframes rotateAnimation {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      p{
+        margin-left:25px;
+        font-size: 40px;
+        color: #FFFFFF;
+        line-height: 80px;
+        font-weight: 700;
+        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
+      }
+    }
+    .left-box{
+      p{
+        width:846px;
+        height:80px;
+        background-image: url("../../../assets/ZDimages/img_bt_kyrytj@1x.png");
+        background-size: 100% 100%;
+      }
+    }
+    .top-box{
+      p{
+        width:1654px;
+        height:80px;
+        background-image: url("../../../assets/ZDimages/img_bt_zysszl@1x.png");
+        background-size: 100% 100%;
+      }
+    }
+    .bottom-box-1{
+      p{
+        width:809px;
+        height:80px;
+        background-image: url("../../../assets/ZDimages/icon_bt_jrrs@1x.png");
+        background-size: 100% 100%;
+      }
+    }
+    .bottom-box-2{
+      p{
+        width:809px;
+        height:80px;
+        background-image: url("../../../assets/ZDimages/icon_bt_zyss@1x.png");
+        background-size: 100% 100%;
+      }
+    }
+    .right-box{
+      p{
+        width:846px;
+        height:80px;
+        background-image: url("../../../assets/ZDimages/img_bt_kyrytj@1x.png");
+        background-size: 100% 100%;
+      }
+    }
+  }
+</style>

src/views/formerComponents/headComponent.vue

@@ -0,0 +1,151 @@
+<!--title-->
+<template>
+  <div class="headComponent">
+    <div class="center-title-box">
+      <img class="logo-img" src="@/assets/ZDimages/logo.png">
+      <p class="title-p">公共科教条件设施数据一张图</p>
+    </div>
+    <p class="time-p">{{timeData}}</p>
+    <div class="weather-box">
+      <img class="weather-img" src="@/assets/ZDimages/icon）dp_dw@1x.png">
+      <p class="weather-p-1">{{weatherData.cityName}}</p>
+      <svg-icon class="weather-svg" :icon-class="weatherData.iconUrl" v-if="weatherData.iconUrl"/>
+      <p class="weather-p-2">{{weatherData.textDay}}</p>
+      <p class="weather-p-3">{{weatherData.tempMin}}~{{weatherData.tempMax}}℃</p>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    laboratoryWsBigViewGetTimeData,
+    laboratoryWsBigViewGetWeatherData
+  } from "@/api/index";
+  export default {
+    name: 'headComponent',
+    data () {
+      return {
+        title:'1区环境感知监测中心',
+        timeData:'',
+        timer:null,
+        weatherData:'',
+        weatherTimer:null,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.timeFunction();
+      this.weatherFunction();
+    },
+    methods:{
+      //时间定时器
+      timeFunction(){
+        let self = this;
+        this.laboratoryWsBigViewGetTimeData();
+        this.timer = window.setInterval(() => {
+          self.laboratoryWsBigViewGetTimeData();
+        }, 30000);
+      },
+      laboratoryWsBigViewGetTimeData(){
+        laboratoryWsBigViewGetTimeData().then(res => {
+          this.$set(this,'timeData',res.data)
+        })
+      },
+      //天气定时器
+      weatherFunction(){
+        let self = this;
+        this.laboratoryWsBigViewGetWeatherData();
+        this.weatherTimer = window.setInterval(() => {
+          self.laboratoryWsBigViewGetWeatherData();
+        }, 360000);
+      },
+      laboratoryWsBigViewGetWeatherData(){
+        laboratoryWsBigViewGetWeatherData().then(res => {
+          let data = JSON.parse(res.data);
+          this.$set(this,'weatherData',data);
+        })
+      },
+    },
+    beforeDestroy() {
+      //清除定时器
+      window.clearInterval(this.timer);
+      window.clearInterval(this.weatherTimer);
+    },
+    destroyed() {
+      //清除定时器
+      window.clearInterval(this.timer);
+      window.clearInterval(this.weatherTimer);
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .headComponent{
+    height:173px;
+    display: flex;
+    position: relative;
+    background-image: url("../../assets/ZDimages/img_db@1x.png");
+    background-size: 100% 100%;
+    .center-title-box{
+      display: flex;
+      .logo-img{
+        /*margin:35px 16px 0 1245px;*/
+        /*分辨率调整*/
+        margin:35px 16px 0 1620px;
+        width:64px;
+        height:64px;
+      }
+      .title-p{
+        flex:1;
+        line-height:48px;
+        height:48px;
+        margin-top:40px;
+        font-family: Alimama ShuHeiTi;
+        font-size: 40px;
+        font-weight: bold;
+        background: -webkit-linear-gradient(#FFFFFF, #0095FF);
+        -webkit-background-clip: text;
+        color: transparent;
+      }
+    }
+    .time-p{
+      position: absolute;
+      top:99px;
+      left:44px;
+      height:30px;
+      line-height:30px;
+      color:#fff;
+      font-size:20px;
+    }
+    .weather-box{
+      display: flex;
+      position: absolute;
+      top:99px;
+      right:33px;
+      height:30px;
+      line-height:30px;
+      color:#fff;
+      font-size:20px;
+      .weather-img{
+        width:24px;
+        height:24px;
+        margin:3px 13px 0 0 ;
+      }
+      .weather-p-1{
+
+      }
+      .weather-svg{
+        width:24px;
+        height:24px;
+        color:#fff;
+        margin:3px 10px 0 40px;
+      }
+      .weather-p-2{
+        margin-right:20px;
+      }
+      .weather-p-3{
+
+      }
+    }
+  }
+</style>

src/views/home.vue

@@ -3,280 +3,68 @@
     <headComponent></headComponent>
     <div class="home-page">
       <div class="home-left-box">
-        <overviewOfFacilityData></overviewOfFacilityData>
-        <facilityUtilizationRate></facilityUtilizationRate>
+        <left-top></left-top>
+        <left-bottom></left-bottom>
       </div>
       <div class="home-center-box">
-        <centerNotice></centerNotice>
-        <videoSurveillance></videoSurveillance>
+        <center-top></center-top>
+        <center-center></center-center>
+        <div style="display: flex;">
+          <center-bottom-left></center-bottom-left>
+          <center-bottom-right></center-bottom-right>
+        </div>
       </div>
       <div class="home-right-box">
-        <scientificResearchProject></scientificResearchProject>
-        <personnelEntryRecord></personnelEntryRecord>
+        <right></right>
       </div>
     </div>
-    <div class="button-img-box"></div>
-    <alarmComponent v-if="alarmType" :alarmData="alarmData"></alarmComponent>
+    <baseComponent></baseComponent>
   </div>
 </template>
 <script>
-  import mqtt from 'mqtt'
-  import { login } from "@/api/login";
-  import { loginYiLi,dashboardsResearchUsage } from "@/api/yiLi";
-  import {
-    getConfigByType,
-    laboratoryBigViewSelectTriggerInfo,
-    iotSensorFindBySubId,
-    iotCameraFindByCondition
-  } from "@/api/index";
-  import { setToken,setTokenYiLi } from '@/utils/auth'
-  import { Encrypt,Decrypt} from '@/utils/secret'
-  import { getFloorMaps } from '@/utils/mapList'
   //head组件
   import headComponent from './components/headComponent.vue'
-  //设施数据概览
-  import overviewOfFacilityData from './components/overviewOfFacilityData.vue'
-  //设施使用率及状态统计
-  import facilityUtilizationRate from './components/facilityUtilizationRate.vue'
-  //通知组件
-  import centerNotice from './components/centerNotice.vue'
-  //实时视频监控
-  import videoSurveillance from './components/videoSurveillance.vue'
-  //科研项目情况概览
-  import scientificResearchProject from './components/scientificResearchProject.vue'
-  //人员进入记录
-  import personnelEntryRecord from './components/personnelEntryRecord.vue'
-  //报警弹窗
-  import alarmComponent from './components/components/alarmComponent.vue'
+  import baseComponent from './components/baseComponent.vue'
+  import leftTop from './components/left-top.vue'
+  import leftBottom from './components/left-bottom.vue'
+  import centerTop from './components/center-top.vue'
+  import centerCenter from './components/center-center.vue'
+  import centerBottomLeft from './components/center-bottom-left.vue'
+  import centerBottomRight from './components/center-bottom-right.vue'
+  import right from './components/right.vue'
 
   export default {
     name: 'home',
     components: {
       headComponent,
-      overviewOfFacilityData,
-      facilityUtilizationRate,
-      centerNotice,
-      videoSurveillance,
-      scientificResearchProject,
-      personnelEntryRecord,
-      alarmComponent,
+      baseComponent,
+      leftTop,
+      leftBottom,
+      centerTop,
+      centerCenter,
+      centerBottomLeft,
+      centerBottomRight,
+      right
     },
     data () {
       return {
-        //预案MQTT
-        planOpic:'lab/risk/plan/change',
-        planClient:{},
-        roomList:[],
-        alarmType:false,
-        alarmData:null,
-        //预案查询定时器
-        alarmTimer:null,
-        //预案查询定时
-        alarmSwitchTime:60000,
+
       }
     },
     created(){
 
     },
     mounted(){
-      this.offPlanMQTT('on');
-      this.laboratoryBigViewSelectTriggerInfo();
-      //开启预案定时查询
-      this.alarmTimerFunction();
+
     },
     methods:{
-      login() {
-        let self = this
-        Promise.all([
-          this.getToken(),
-          this.getTokenYiLi()
-        ]).then((result) => {
-          setTimeout(function() {
-            self.getExploitConfig()
-          },500)
-        }).catch((error) => {
-        })
-      },
-      //获取token
-      getToken() {
-        login().then(res1 => {
-          setToken(res1.data.token)
-        })
-      },
-      //获取YiLi-token
-      getTokenYiLi() {
-        loginYiLi().then(res2 => {
-          setTokenYiLi(res2.access_token)
-        })
-      },
-      //获取开发配置
-      getExploitConfig() {
-        getConfigByType({ category: 2, configType: 5 }).then(response => {
-          let obj = JSON.parse(response.data.configValue)
-          //判定http或者https
-          let urlText = window.location.href.split('://')[0] + '://'
-          let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
-          if (outerNet) {//外网
-            //MQTT地址
-            localStorage.setItem('mqttUrl', 'wss://' + Decrypt(obj.mqttExtranetUrl))
-            //MQTT账号
-            localStorage.setItem('mqttUser', Decrypt(obj.mqttExtranetUser))
-            //MQTT密码
-            localStorage.setItem('mqttPassword', Decrypt(obj.mqttExtranetPassword))
-            //文件浏览环境
-            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironmentExtranet))
-          } else {
-            //MQTT地址
-            localStorage.setItem('mqttUrl', 'ws://' + Decrypt(obj.mqttIntranetUrl))
-            //MQTT账号
-            localStorage.setItem('mqttUser', Decrypt(obj.mqttIntranetUser))
-            //MQTT密码
-            localStorage.setItem('mqttPassword', Decrypt(obj.mqttIntranetPassword))
-            //文件浏览环境
-            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
-          }
-          this.laboratoryBigViewSelectTriggerInfo();
-          //开启预案定时查询
-          this.alarmTimerFunction();
-        })
-      },
-      /*************** 获取报警相关 ***************/
-      laboratoryBigViewSelectTriggerInfo(){
-        laboratoryBigViewSelectTriggerInfo().then(res => {
-          let alarmRoom = getFloorMaps(res.data);
-          if(alarmRoom[0]){
-            this.dashboardsResearchUsage(alarmRoom);
-          }else{
-            this.$set(this,'alarmType',false);
-            this.$set(this,'alarmData',null);
-          }
-        })
-      },
-      //获取房间数据
-      dashboardsResearchUsage(list){
-        dashboardsResearchUsage('roomNames='+list[0].roomNumName).then(res => {
-          let obj = list[0];
-          obj.list = JSON.parse(JSON.stringify(list));
-          if(res.data[0]){
-            obj = {...obj,...res.data[0]};
-            obj.status = obj.runningStateName == '维修' ? '3':(obj.stateName == '租用'?'2':'1')
-            //假数据
-            // obj.monitorVisable = true;
-            // obj.subId = '1955554621449019392';
-            this.iotSensorFindBySubId(obj);
-          }
-        });
-      },
-      //查询传感器
-      iotSensorFindBySubId(obj){
-        let self = this;
-        iotSensorFindBySubId({subId:obj.subId}).then(response => {
-          obj.sensor = [];
-          for(let i=0;i<obj.alarmData.triggerUploadData.length;i++){
-            for(let o=0;o<response.data.length;o++){
-              if(obj.alarmData.triggerUploadData[i].deviceNo == response.data[o].deviceNo){
-                response.data[i].icon = response.data[i].icon?localStorage.getItem('fileBrowseEnvironment')+response.data[i].icon:null;
-                // response.data[i].icon = 'http://192.168.1.8/statics/2025/08/25/9eec5108-2702-4ed0-942a-aced71fd1f57.svg';
-                obj.sensor.push(response.data[i])
-              }
-            }
-          }
-          obj.videoList = [];
-          //查询实验室监控
-          if(obj.monitorVisable){
-            let videoObj = {
-              page:'1',
-              pageSize:'10',
-              buildId:'',
-              floorId:'',
-              passageway:'',
-              subIds:[obj.subId],
-              protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
-              streamType:1,
-              source:1,
-            };
-            iotCameraFindByCondition(videoObj).then(response => {
-              for(let i=0;i<response.data.records.length;i++){
-                obj.videoList.push(
-                  {
-                    fullShow:true,
-                    width: 708, //(宽度:非必传-默认600)
-                    height: 450, //(高度:非必传-默认338)
-                    url: response.data.records[i].streamUrl,
-                    cameraIndexCode: response.data.records[i].deviceNo,
-                  }
-                )
-              }
-              self.$set(self,'alarmType',true);
-              self.$set(self,'alarmData',obj);
-            });
-          }else{
-            self.$set(self,'alarmType',true);
-            self.$set(self,'alarmData',obj);
-          }
-        });
-      },
-      //预案查询定时器
-      alarmTimerFunction(){
-        const self = this;
-        self.alarmTimer = window.setInterval(() => {
-          checkAlarmUpdates();
-        }, this.alarmSwitchTime);
-        async function checkAlarmUpdates() {
-          self.laboratoryBigViewSelectTriggerInfo();
-        }
-      },
-      //预案-MQTT连接
-      offPlanMQTT(type){
-        let self = this;
-        if(self.planClient.unsubscribe){
-          self.planClient.unsubscribe(self.planOpic, error => {
-            if (error) {
-              // console.log('mqtt关闭连接错误:', error)
-            }
-          })
-          self.planClient.end();
-          this.$set(this,'planClient',{});
-        }
-        //判断传入参数如果存在 发起一次新的连接
-        if(type){
-          this.planMQTT();
-        }
-      },
-      //预案-MQTT订阅
-      planMQTT(){
-        let self = this;
-        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
-          username: localStorage.getItem('mqttUser'),
-          password:localStorage.getItem('mqttPassword')
-        });
-        this.planClient.on("connect", e =>{
-          this.planClient.subscribe(self.planOpic, (err) => {
-            if (!err) {
-              console.log("预案-订阅成功:" + self.planOpic);
-            }else{
-              // console.log("预案-连接错误:" + err);
-            }
-          });
-        });
-        this.planClient.on("message", (topic, message) => {
-          if (message){
-            console.log('MQTTmessage',message);
-            //获取预案数据
-            this.laboratoryBigViewSelectTriggerInfo();
-          }
-        });
-      },
+
     },
     beforeDestroy() {
-      clearInterval(this.alarmTimer);
-      //清除MQTT
-      this.offPlanMQTT();
+
     },
     destroyed() {
-      clearInterval(this.alarmTimer);
-      //清除MQTT
-      this.offPlanMQTT();
+
     }
   }
 </script>
@@ -296,45 +84,31 @@
       flex:1;
       overflow: hidden;
       display: flex;
-      overflow: hidden;
       .home-left-box{
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        /*width:826px;*/
-        /*分辨率调整*/
-        width: 1082px;
-        margin:0 0 0 32px;
+        width: 950px;
+        margin:0 0 0 46px;
+        /*background-color: #8a6d3b;*/
       }
       .home-center-box{
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        /*width:1314px;*/
-        /*分辨率调整*/
-        width: 1570px;
-        margin:0 21px;
-        padding-top:38px;
+        width: 1757px;
+        margin:0 46px;
+        padding-top:18px;
+        /*background-color: #13ce66;*/
       }
       .home-right-box{
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        /*width:826px;*/
-        /*分辨率调整*/
-        width: 1082px;
-        margin:0 32px 0 0;
+        width: 950px;
+        margin:0 46px 0 0;
+        /*background-color: #2f54eb;*/
       }
     }
-    .button-img-box{
-      /*width:3072px;*/
-      /*分辨率调整*/
-      width: 3840px;
-      height:54px;
-      margin-top:17px;
-      overflow: hidden;
-      background-image: url("../assets/ZDimages/img_db_bg@1x.png");
-      background-size: 100% 100%;
-    }
   }
 </style>