安防看板 静态 ehcarts图表 表单 表格等，可视化适配调整

src/layout/components/Navbar.vue

@@ -147,6 +147,7 @@ export default {
     float: right;
     line-height: 50px;
     margin-right: 50px;
+    font-size:14px
   }
 
   .right-menu {
@@ -178,6 +179,7 @@ export default {
 
     .avatar-container {
       margin-right: 30px;
+      display:block;
 
       .avatar-wrapper {
         // margin-top: 5px;

src/styles/index.scss

@@ -88,6 +88,7 @@ div:focus {
 
 .subtitle {
     line-height: 30px;
+    font-size: 16px;
 }
 
 // 筛选条件样式 

src/views/index/components/alarmStatic.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="panel alarmStatic">
+    <div class="panel-tit">报警统计</div>
+    <div class="staticList">
+        <ul>
+            <li></li>
+            <li></li>
+            <li></li>
+        </ul>
+    </div>
+   
+     <div class="panel-footer"></div>
+  </div>
+</template>
+<script>
+// import pieAlarm from "./pieAlarm";
+// import barChart from "./barChart";
+export default {
+//   components: { pieAlarm,barChart},
+  name: "alarmStatic",
+
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.panel.alarmStatic {
+  position: absolute;
+  top: 1rem;
+  right: 2rem;
+  z-index: 3;
+  box-sizing:border-box;
+  padding:0 1.2rem;
+  .staticList{
+      height:20rem;
+  }
+  li{
+      margin-top:1rem;
+      display:block;
+      float:left;
+      width:33.3333%;
+      border:1px solid pink;
+      height:18rem;
+  }
+  
+
+}
+</style>
+<style lang="scss">
+</style>

src/views/index/components/alarming.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="panel alarming">
+    <div class="panel-tit">告警信息</div>
+   
+    <table class="alarm-table">
+      <thead>
+        <tr>
+          <th>序号</th>
+          <th>报警时间</th>
+          <th>报警事件</th>
+        </tr>
+      </thead>
+    </table>
+    <div class="scroll">
+      <table class="alarm-table">
+        <tbody>
+         
+          <tr>
+            <td>1</td>
+            <td class="online">2020-09-22 15:00:00</td>
+            <td>事件11111</td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td class="online">2020-09-22 15:00:00</td>
+            <td>事件11111</td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td class="online">2020-09-22 15:00:00</td>
+            <td>事件11111</td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td class="online">2020-09-22 15:00:00</td>
+            <td>事件11111</td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td class="online">2020-09-22 15:00:00</td>
+            <td>事件11111</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+     <div class="panel-footer"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "alarming",
+
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.panel.alarming {
+  position: absolute;
+  top: 69rem;
+  right: 2rem;
+  z-index: 3;
+  box-sizing:border-box;
+  table{
+      padding:0 1rem;
+    
+        border-spacing: 0;
+    
+  }
+
+  tr td,
+  tr th {
+    font-size: 1.4rem;
+    line-height: 3.6rem;
+     text-align:left;
+    // padding: 0 1rem;
+    padding:0;
+    margin:0;
+    // background:pink;
+    border-bottom:1px solid #1c5899;
+    border-left:0px solid red;
+    border-right:0px solid red;
+    border-top:0px solid red
+
+  }
+  .alarm-table tr td:first-child,
+  .alarm-table tr th:first-child {
+    width:12%;
+  }
+
+  .alarm-table tr td:nth-child(2),
+  .alarm-table tr th:nth-child(2) {
+  width:60%;
+  }
+
+  .alarm-table tr td:nth-child(3),
+  .alarm-table tr th:nth-child(3) {
+     width: 100px;
+  }
+}
+</style>
+<style lang="scss">
+</style>

src/views/index/components/barChart.vue

@@ -0,0 +1,118 @@
+<template>
+  <div id="main4" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  name: "barChart",
+  mounted() {
+    this.showMain();
+  },
+  methods: {
+    showMain() {
+      // 基于准备好的dom，初始化echarts实例
+
+      var myChart = echarts.init(document.getElementById("main4"));
+
+      var myColor = ["rgb(248, 72, 3)", "#FD7700", "#0BC3FF", "#01E416"];
+
+      var option = {
+    grid: {
+      top: "0%",
+      left: "25%",
+      bottom: "0%"
+      // containLabel: true
+    },
+    // 不显示x轴的相关信息
+    xAxis: {
+      show: false
+    },
+    yAxis: [
+      {
+        type: "category",
+        inverse: true,
+        data: ["未处理数", "审核未通过", "超时完成", "已完成"],
+        // 不显示y轴的线
+        axisLine: {
+          show: false
+        },
+        // 不显示刻度
+        axisTick: {
+          show: false
+        },
+        // 把刻度标签里面的文字颜色设置为白色
+        axisLabel: {
+          color: "#fff"
+        }
+      },
+      {
+        data: [60, 180, 30, 260],
+        inverse: false,
+        // 不显示y轴的线
+        axisLine: {
+          show: false
+        },
+        // 不显示刻度
+        axisTick: {
+          show: false
+        },
+        // 把刻度标签里面的文字颜色设置为白色
+        axisLabel: {
+          color: "#fff"
+        }
+      }
+    ],
+    series: [
+      {
+        name: "条",
+        type: "bar",
+        data: [12, 36, 62, 50],
+        yAxisIndex: 0,
+        // 修改第一组柱子的圆角
+        itemStyle: {
+          
+          // 此时的color 可以修改柱子的颜色
+          color: function(params) {
+            // params 传进来的是柱子对象
+            // console.log(params);
+            // dataIndex 是当前柱子的索引号
+            return myColor[params.dataIndex];
+          }
+        },
+        // 柱子之间的距离
+        barCategoryGap: 50,
+        //柱子的宽度
+        barWidth: 10,
+        // 显示柱子内的文字
+        label: {
+          show: true,
+          position: "right",
+          // {c} 会自动的解析为 数据  data里面的数据
+          formatter: "{c}%"
+        }
+      },
+      {
+        name: "框",
+        type: "bar",
+        barCategoryGap: 50,
+        barWidth: 10,
+        yAxisIndex: 1,
+        data: [100, 100, 100, 100],
+        itemStyle: {
+          color: "none",
+          borderColor: "#00c1de",
+          borderWidth: 1,
+        }
+      }
+    ]
+  };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>

src/views/index/components/handleNumber.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="panel handleNumber">
+    <div class="panel-tit">处置告警数</div>
+
+    <div class="section1">
+      <div class="pie-chart">
+        <pie-alarm></pie-alarm>
+      </div>
+      <div class="pie-textList">
+        <ul>
+          <li>
+            <div class="num-tit ">未处理数</div>
+            <div class="num-no colorUnhandle">60</div>
+          </li>
+          <li>
+            <div class="num-tit ">审核未通过</div>
+            <div class="num-no colorUnpass">180</div>
+          </li>
+          <li>
+            <div class="num-tit ">超时完成</div>
+            <div class="num-no colorOverTimer">30</div>
+          </li>
+          <li>
+            <div class="num-tit ">已完成数</div>
+            <div class="num-no colorSuccess">260</div>
+          </li>
+         
+        </ul>
+      </div>
+    </div>
+    <div class="section2">
+      <bar-chart></bar-chart>
+    </div>
+    <div class="panel-footer"></div>
+  </div>
+</template>
+<script>
+import pieAlarm from "./pieAlarm";
+import barChart from "./barChart";
+export default {
+  components: { pieAlarm, barChart },
+  name: "handleNumber",
+
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.panel.handleNumber {
+  position: absolute;
+  top: 27rem;
+  right: 2rem;
+  z-index: 3;
+  box-sizing: border-box;
+  padding: 0 1.2rem;
+  .section1 {
+    height: 19rem;
+    width: 100%;
+    margin: 2rem 0;
+    > div {
+      float: left;
+    }
+    .pie-chart {
+      height: 100%;
+      width: 60%;
+    }
+    .pie-textList {
+      height: 100%;
+      width: 40%;
+      // background: pink;
+      li {
+        width: 100%;
+        // border: 1px solid red;
+        line-height: 4.2rem;
+        display: inline-block;
+        font-size: 1.4rem;
+        background:url(../../../assets/handlelist-bg.png);
+        text-align:center;
+        padding-right:1rem;
+        > div {
+          display: inline-block;
+          vertical-align: center;
+          
+        }
+        .num-no {
+            font-size: 2rem;
+            color: #04f9ab;
+            font-family: "impact";
+            margin-left:2rem;
+            position:relative;
+            top:0.3rem;
+          }
+          .colorSuccess{
+    color:#01E416
+}
+.colorUnhandle{
+    color:rgb(248, 72, 3)
+}
+.colorOverTime{
+    color:#0BC3FF
+}
+.colorUnpass{
+    color:#FD7700
+}
+      }
+    }
+  }
+  .section2 {
+    height: 12rem;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+}
+</style>
+<style lang="scss">
+</style>

src/views/index/components/monitor.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="panel monitor">
+    <div class="panel-tit">视频监控</div>
+    <ul class="monitor-list">
+      <li>
+        <img src="@/assets/monitor.png" alt="" />
+        <p class="monitor-tit">摄像头1</p>
+      </li>
+      <li>
+        <img src="@/assets/monitor.png" alt="" />
+        <p class="monitor-tit">摄像头2</p>
+      </li>
+      <li>
+        <img src="@/assets/monitor.png" alt="" />
+        <p class="monitor-tit">摄像头3</p>
+      </li>
+      <li>
+        <img src="@/assets/monitor.png" alt="" />
+        <p class="monitor-tit">摄像头4</p>
+      </li>
+      <li>
+        <img src="@/assets/monitor.png" alt="" />
+        <p class="monitor-tit">摄像头5</p>
+      </li>
+      <li>
+        <img src="@/assets/monitor.png" alt="" />
+        <p class="monitor-tit">摄像头6</p>
+      </li>
+    </ul>
+    <div class="panel-footer"></div>
+
+    <div class="panel monitor-setting">
+      <div class="panel-tit">画面配置</div>
+      <div class="monitor-option">
+        <el-form ref="form" :model="form" label-width="12rem">
+        
+          <el-form-item label="画面一：">
+            <el-select v-model="form.region" placeholder="">
+              <el-option label="画面一" value="shanghai"></el-option>
+              <el-option label="画面二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="画面二：">
+            <el-select v-model="form.region2" placeholder="">
+              <el-option label="画面一" value="shanghai2"></el-option>
+              <el-option label="画面二" value="beijing2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="画面三：">
+            <el-select v-model="form.region3"  placeholder="">
+              <el-option label="画面一" value="shanghai3"></el-option>
+              <el-option label="画面二" value="beijing4"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="画面四：">
+            <el-select v-model="form.region4" placeholder="">
+              <el-option label="画面一" value="shanghai4"></el-option>
+              <el-option label="画面二" value="beijing3"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="画面五：">
+            <el-select v-model="form.region5" placeholder="">
+              <el-option label="画面一" value="shanghai5"></el-option>
+              <el-option label="画面二" value="beijing5"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="画面六：">
+            <el-select v-model="form.region6" placeholder="">
+              <el-option label="画面一" value="shangha6"></el-option>
+              <el-option label="画面二" value="beijing6"></el-option>
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button>取消</el-button>
+                        <el-button type="primary" @click="onSubmit">保存</el-button>
+
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="panel-footer"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "monitor",
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        region2: "",
+        region3: "",
+        region4: "",
+        region5: "",
+        region6: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//视频监控
+.panel.monitor {
+  position: absolute;
+  bottom: 3rem;
+  left: 2rem;
+  z-index: 3;
+}
+
+.monitor-list {
+  padding: 1.2rem;
+  overflow: hidden;
+}
+.monitor-list li {
+  width: 50%;
+  position: relative;
+  display: block;
+  float: left;
+}
+.monitor-list li img {
+  width: 100%;
+}
+.monitor-tit {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  font-size: 1.2rem;
+  line-height: 3rem;
+  text-indent: 1rem;
+  // display:none;
+
+  background: rgba(0, 0, 0, 0.7);
+}
+
+
+
+
+.monitor-setting {
+
+  position: absolute;
+  left: 105%;
+  width:100%;
+  top: 0;
+  margin:0 auto;
+  text-align:center;
+  .monitor-option{
+      padding:2rem 4rem 2rem 4rem;
+
+  }
+}
+
+
+
+
+</style>
+<style lang="scss">
+.monitor-setting .el-form-item__label{
+    font-size:1.6rem;
+    color:#fff;
+    line-height:3.4rem
+}
+.monitor-setting .el-form-item__content{
+    line-height:3.4rem;
+   
+}
+.monitor-setting .el-form-item{
+    margin-bottom:1.6rem
+}
+.monitor-setting .el-input__inner{
+    height:3.4rem;
+    line-height:3.4rem;
+  
+    border-radius:0;
+    font-size:1.4rem;
+    background-color:rgba(0,0,0,0);
+    border:1px solid #3486DA
+}
+.monitor-setting .el-input__icon{
+    line-height:2.4rem
+}
+.monitor-setting .el-button{
+    border-radius:0;
+    font-size:1.6rem;
+    padding:1rem 2.3rem;
+    margin-top:3rem;
+    
+
+}
+.monitor-setting .el-select .el-input .el-select__caret{
+    color:#3486DA;
+    font-size:1.6rem;
+}
+.monitor-setting .el-select:hover .el-input__inner{
+    border:1px solid #3486DA;
+    opacity:.7
+
+}
+
+
+
+</style>

src/views/index/components/pieAlarm.vue

@@ -0,0 +1,168 @@
+<template>
+  <div
+    id="main3"
+    style="
+      width: 100%;
+      height: 100%;
+     
+    "
+  ></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  name: "pieAlarm",
+  mounted() {
+    this.showMain();
+  },
+  methods: {
+    showMain() {
+      // 基于准备好的dom，初始化echarts实例
+
+      var myChart = echarts.init(document.getElementById("main3"));
+      var color = ["#C8E4FF", "#0483FF", "#0483FF"];
+
+      
+
+      // 指定图表的配置项和数据
+      var option = {
+        color: [
+          "rgb(248, 72, 3)",
+          "rgb(254, 196, 0)",
+          "rgb(0, 172, 255)",
+          "#04f9ab",
+        ],
+        title: {
+          text: "", // 标题
+          textStyle: {
+            fontSize: 15,
+            fontWeight: "bold",
+            color: "black",
+          },
+          y: "4%",
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: " {a} <br/>{b} : {c} ({d}%) ",
+        },
+
+        series: [
+            
+          {
+            name: "总数",
+            type: "pie",
+            selectedMode: "single",
+            radius: ["60%", "65%"],   //aa 内圈大小
+            center: ["50%", "50%"],
+           
+           
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    { offset: 0, color: "#0BC3FF" },
+                    { offset: 1, color: "#000" },
+                  ],
+                  false
+                ),
+              },
+            },
+            hoverAnimation:false,
+            label: {
+              normal: {
+                show: true,
+                color: "#0BC3FF", //aa中间文字颜色
+                position: "center",
+                fontSize: 18,
+                    fontFamily: "impact",
+                formatter: function (a) {
+                  return a.value + "\n" + a.name;
+                },
+
+               
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [{ value: 1232, name: "总数" }],
+          },
+          {
+            name: "故障处置数",
+            splitNumber: 30,
+            type: "pie",
+            center: ["50%", "50%"],
+            radius: ["80%", "98%"],    //aa外圈大小
+            avoidLabelOverlap: false,
+            itemStyle: {
+              normal: {
+                // borderColor: '#fff',   //aa边框颜色
+                // borderWidth: 4
+              },
+            },
+            hoverAnimation:false,
+            label: {
+              show: false, //aa 去掉指示折线
+            },
+
+            data: [
+              { value: 335, name: "未处理数" },
+              { value: 310, name: "审核未通过" },
+              { value: 234, name: "超时完成" },
+              { value: 135, name: "已完成数" },
+            ],
+          },
+
+          {
+            name: "小环",
+            type: "gauge",
+            splitNumber: 15,
+            radius: "95%",   //aa发散圈的大小
+            center: ["50%", "50%"],
+            startAngle: 0,
+            endAngle: 359.9999,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: color[1],
+                width: 1,    // aa发散圈的粗细
+                shadowBlur: 1,
+                shadowColor: color[1],
+              },
+              length: 8,  // aa发散圈的长度
+              splitNumber: 5,  //aa发散圈每一条间隔
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+          },
+        ],
+
+
+        
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>

src/views/index/components/pieCamera.vue

@@ -33,7 +33,7 @@ export default {
           textStyle: {
             rich:{
                 a: {
-                    fontSize: 30,
+                    fontSize: 25,
                     color: color[2],
                     fontFamily: "impact",
                 },
@@ -49,6 +49,7 @@ export default {
               color: '#fff',
               fontSize:'12',
           },
+          itemGap: 3,
           left: "center",
           top: "37%",    //aa圈内标题的位置
         },

src/views/index/components/pieSounder.vue

@@ -32,7 +32,7 @@ export default {
           textStyle: {
             rich: {
               a: {
-                fontSize: 30,
+                fontSize: 25,
                 color: color[2],
                 fontFamily: "impact",
               },
@@ -48,6 +48,7 @@ export default {
             color: "#fff",
             fontSize: "12",
           },
+          itemGap: 3,
           left: "center",
           top: "37%", //aa圈内标题的位置
         },

src/views/index/components/sbjk.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="panel sbgk">
+    <div class="panel-tit">设备工况</div>
+    <div class="pie-box">
+      <div class="pie-item">
+        <pie-sounder></pie-sounder>
+      </div>
+      <div class="pie-item">
+        <pie-camera></pie-camera>
+      </div>
+    </div>
+
+    <div class="num-analysis">
+      <div>
+        <ul>
+          <li>
+            <p class="num-tit">设备总数</p>
+            <p class="num-no">260</p>
+          </li>
+          <li>
+            <p class="num-tit">异常数量</p>
+            <p class="num-no" style="color: #f84803">15</p>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <ul>
+          <li>
+            <p class="num-tit">设备总数</p>
+            <p class="num-no" style="color: #00acff">500</p>
+          </li>
+          <li>
+            <p class="num-tit">异常数量</p>
+            <p class="num-no" style="color: #fec400">100</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="panel-footer"></div>
+  </div>
+</template>
+<script>
+import pieSounder from "./pieSounder";
+import PieCamera from "./pieCamera";
+export default {
+  components: { pieSounder, PieCamera },
+  name: "sbgk",
+};
+</script>
+<style lang="scss" scoped>
+// 设备工况
+.panel.sbgk {
+  position: absolute;
+  left: 2rem;
+  top: 0;
+  z-index: 2;
+}
+
+.pie-item {
+  width: 50%;
+  height: 24rem;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.num-analysis {
+  margin: 1rem;
+}
+.num-analysis > div {
+  width: 48.7%;
+  border: 1px solid #3486da;
+  display: inline-block;
+  background: #074198;
+}
+.num-analysis > div:first-child {
+  margin-right: 1rem;
+}
+
+.num-analysis ul li {
+  padding: 0 1rem;
+  margin: 10px 0;
+  float: left;
+  width: 50%;
+
+  text-align: center;
+  position: relative;
+}
+
+.num-analysis ul li:first-child {
+  border-right: 1px dashed #42a4ff;
+}
+.num-tit {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+.num-no {
+  font-size: 1.8rem;
+  color: #04f9ab;
+  font-family: "impact";
+}
+</style>

src/views/index/index.vue

@@ -2,88 +2,28 @@
   <div class="main-container-box">
     <div class="nav-header">安防综合管理平台</div>
     <div class="panel-box">
-      <div class="panel sbgk">
-        <div class="panel-tit">设备工况</div>
-        <div class="pie-box">
-          <div class="pie-item">
-            <pie-sounder></pie-sounder>
-          </div>
+      <sbjk></sbjk>
+      <monitor></monitor>
 
-          <div class="pie-item">
-            <pie-camera></pie-camera>
-          </div>
-        </div>
-
-        <div class="num-analysis">
-          <div>
-            <ul>
-              <li>
-                <p class="num-tit">设备总数</p>
-                <p class="num-no">260</p>
-              </li>
-              <li>
-                <p class="num-tit">异常数量</p>
-                <p class="num-no" style="color: #f84803">15</p>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <ul>
-              <li>
-                <p class="num-tit">设备总数</p>
-                <p class="num-no" style="color: #00acff">500</p>
-              </li>
-              <li>
-                <p class="num-tit">异常数量</p>
-                <p class="num-no" style="color: #fec400">100</p>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="panel-footer"></div>
-      </div>
-      <div class="panel monitor">
-        <div class="panel-tit">视频监控</div>
-        <ul class="monitor-list">
-          <li>
-            <img src="@/assets/monitor.png" alt="" />
-            <p class="monitor-tit">摄像头1</p>
-          </li>
-          <li>
-            <img src="@/assets/monitor.png" alt="" />
-            <p class="monitor-tit">摄像头2</p>
-          </li>
-          <li>
-            <img src="@/assets/monitor.png" alt="" />
-            <p class="monitor-tit">摄像头3</p>
-          </li>
-          <li>
-            <img src="@/assets/monitor.png" alt="" />
-            <p class="monitor-tit">摄像头4</p>
-          </li>
-          <li>
-            <img src="@/assets/monitor.png" alt="" />
-            <p class="monitor-tit">摄像头5</p>
-          </li>
-          <li>
-            <img src="@/assets/monitor.png" alt="" />
-            <p class="monitor-tit">摄像头6</p>
-          </li>
-        </ul>
-        <div class="panel-footer"></div>
-      </div>
+      <alarm-static></alarm-static>
+      <handle-number></handle-number>
+      <alarming></alarming>
     </div>
   </div>
 </template>
 
 <script>
-import pieSounder from "./components/pieSounder";
-import PieCamera from "./components/pieCamera";
+import sbjk from "./components/sbjk";
+import monitor from "./components/monitor";
+import alarming from "./components/alarming";
+import handleNumber from "./components/handleNumber";
+import alarmStatic from "./components/alarmStatic";
+
+
 // import { flexible } from "@/utils";
 
 export default {
-  components: { pieSounder, PieCamera },
+  components: { sbjk, monitor, alarming, handleNumber,alarmStatic },
   data() {
     return {};
   },
@@ -107,24 +47,42 @@ $cursor: #fff;
 
 <style lang="scss" scoped>
 // @import "../../styles/mixin.scss";
+</style>
+
+<style lang="scss">
+/* 初始化 */
+
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+li,
+p {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+img {
+  display: block;
+}
+
 
+
+
+
+/* 首页公共css */
 .main-container-box {
-  min-width: 1280px;
-  min-height: 100%;
-  width: 100%;
-  height: 100vh;
-  background-color: #000;
+  min-width: 1024px;
+
+  background:url(../../assets/bg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
   overflow: hidden;
   color: #fff;
 }
-
-// 头部导航样式
 .nav-header {
-   min-width: 1280px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
   color: #fff;
   text-align: center;
   font-size: 4rem;
@@ -133,25 +91,16 @@ $cursor: #fff;
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
-
-// @media (max-width: 1440px) {
-//   .nav-header {
-//     font-size: 30px;
-//     line-height: 60px;
-//   }
-// }
-
 .panel-box {
-  margin-top: 8rem;
+  min-width: 1024px;
+  max-width: 1920px;
+  min-height: 600px;
   position: relative;
   height: calc(100vh - 8rem);
-  min-width: 1280px;
+  display: flex;
 }
-
 .panel {
-  width: 41rem;
-
-  min-width: 260px;
+  width: 23%;
   position: relative;
   background: #021132;
   border: 1px solid #3486da;
@@ -169,12 +118,6 @@ $cursor: #fff;
     font-size: 1.6rem;
     font-family: "impact";
   }
-  .pie-item {
-    width: 50%;
-    height: 24rem;
-    display: inline-block;
-    vertical-align: top;
-  }
 }
 
 .panel::before {
@@ -224,112 +167,15 @@ $cursor: #fff;
   border-right: 2px solid #02a6b5;
 }
 
-.panel.sbgk {
-  position: absolute;
-  left: 2rem;
-  top: 2rem;
-  z-index: 2;
-}
-
-
-.num-analysis {
-  margin: 1rem;
-}
-.num-analysis > div {
-  width: 48.7%;
-  border: 1px solid #3486da;
-  display: inline-block;
-  background: #074198;
-}
-.num-analysis > div:first-child {
-  margin-right: 1rem;
-}
-ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-li,
-p {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-img {
-  display: block;
-}
-.num-analysis ul li {
-  padding: 0 1rem;
-  margin: 10px 0;
-  float: left;
-  width: 50%;
-
-  text-align: center;
-  position: relative;
-}
-
-.num-analysis ul li:first-child {
-  border-right: 1px dashed #42a4ff;
-}
-.num-tit {
-  font-size: 1.4rem;
-  margin-bottom: 1rem;
-}
-.num-no {
-  font-size: 1.8rem;
-  color: #04f9ab;
-  font-family: "impact";
-}
-
 /* 约束屏幕尺寸 */
 @media screen and (max-width: 1024px) {
   html {
-    font-size: 80px !important;
+    font-size: 5px !important;
   }
 }
 @media screen and (min-width: 1920px) {
   html {
-    font-size: 192px !important;
+    font-size: 10px !important;
   }
 }
-
-
-
-
-
-.panel.monitor {
-  height: auto;
-  position: absolute;
-  bottom: 3rem;
-  right: 1rem;
-
-  z-index: 3;
-}
-
-.monitor-list {
-  padding: 1.2rem;
-  overflow: hidden;
-}
-.monitor-list li {
-  width: 50%;
-  position: relative;
-  display: block;
-  float: left;
-}
-.monitor-list li img {
-  width: 100%;
-}
-.monitor-tit {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  left: 0;
-  font-size: 1.2rem;
-  line-height: 3rem;
-  text-indent: 1rem;
-  // display:none;
-
-  background: rgba(0, 0, 0, 0.7);
-}
 </style>

src/views/login/index.vue

@@ -117,7 +117,7 @@ $dark_gray: #889aa4;
 $light_gray: #eee;
 
 .login-container {
-    min-width:1280px;
+  min-width: 1024px;
   min-height: 100%;
   width: 100%;
   // background-color: $bg;
@@ -222,10 +222,9 @@ $light_gray: #eee;
   width: 82px;
 }
 
-
 // 头部导航样式
 .nav-header {
-    min-width:1280px;
+  min-width: 1024px;
   position: absolute;
   top: 0;
   left: 0;
@@ -245,7 +244,4 @@ $light_gray: #eee;
     line-height: 60px;
   }
 }
-
-
-
 </style>