代码提交

src/App.vue

@@ -213,10 +213,10 @@ import {getData} from './api/index.js'
 #app {
   // width: 6144px;
   // height: 1920px;
-  background: rgba(1, 1, 7, 0);
+  background: rgba(1, 1, 7, 0.7);
   // overflow: hidden;
   .header {
-    height: 15%;
+    height: 10%;
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -226,7 +226,7 @@ import {getData} from './api/index.js'
     background-size: 100% 100%;
     color: #fff;
     .left {
-      width: 26%;
+      width: 25%;
       height: 38%;
       display: flex;
       align-items: center;
@@ -243,7 +243,7 @@ import {getData} from './api/index.js'
       letter-spacing: 0.5rem;
     }
     .right {
-      width: 26%;
+      width: 25%;
       height: 100%;
 
       .quit {
@@ -286,7 +286,7 @@ import {getData} from './api/index.js'
   }
   .menu {
     width: 100%;
-    height: 12%;
+    height: 7%;
     position: absolute;
     bottom: 0;
     left: 0;
@@ -323,7 +323,7 @@ import {getData} from './api/index.js'
     }
   }
   .content {
-    height: calc(100% - 15%);
+    height: calc(100% - 10%);
     width: 100%;
   }
 }

src/views/court.vue

@@ -4,35 +4,73 @@
       <div class="leftOne">
         <div class="title">智慧法庭</div>
         <div class="courtHouse">
+          <div
+            class="courtData"
+            v-for="(item, index) in courtList"
+            :key="index"
+          >
+            <div style="color: #fff; font-size: 0.55rem">{{ item.name }}</div>
             <div
-              class="courtData"
+              :class="houseList[index]"
-              v-for="(item, index) in courtList"
+              style="width: 100%; height: 100%; color: #fff; font-size: 0.6rem"
-              :key="index"
             >
-              <div style="color: #fff; font-size: 0.55rem">{{ item.name }}</div>
+              {{ item.count }}
-              <div
+            </div>
-                :class="houseList[index]"
-                style="
-                  width: 100%;
-                  height: 100%;
-                  color: #fff;
-                  font-size: 0.6rem;
-                "
-              >
-                {{ item.count }}
-              </div>
           </div>
         </div>
       </div>
       <div class="leftTwo">
-          <div class="caseTitle">
+        <div class="caseTitle">案件统计</div>
-              案件统计
+        <div class="select">
-          </div>
+            <el-select
-          <div id="caseEcharts"></div>
+            v-model="userValue"
+            :popper-append-to-body="false"
+            clearable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(item, index) in userOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            v-model="departmentValue"
+            :popper-append-to-body="false"
+            clearable
+            placeholder="请选择"
+            style="margin-left: 5%"
+          >
+            <el-option
+              v-for="(item, index) in departmentOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div id="caseEcharts"></div>
+      </div>
+      <div class="leftThree">
+          <div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div>
+          <div class="caseType">
+              <div id="caseTypeLeft"></div>
+              <div id="caseTypeRight"></div>
+          </div>
       </div>
-      <div class="leftThree"></div>
     </div>
-    <div class="right"></div>
+    <div class="right">
+        <div class="title" style="height:5%">案件列表</div>
+        <div class="caseList">
+          <div class="selectList">
+            <div class="selectChange"></div>
+          </div>
+          <div class="caseDetail"></div>
+        </div>
+    </div>
   </div>
 </template>
 
@@ -41,7 +79,7 @@ export default {
   name: "court",
   data() {
     return {
-        courtList: [
+      courtList: [
         {
           name: "空闲中",
           count: "7",
@@ -59,11 +97,468 @@ export default {
           count: "86",
         },
       ], // 智慧法庭小房子
-       houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
+      houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
+      userValue:'', //人员选择
+      userOptions:[
+          {
+              label:'人员',
+              value:'1'
+          },
+          {
+              label:'人员2',
+              value:'2'
+          }
+      ],//人员子项
+      departmentValue:'', //部门选择
+      departmentOptions:[
+          {
+              label:'部门',
+              value:'1'
+          },
+           {
+              label:'部门2',
+              value:'2'
+          }
+      ], //部门子项
+      selectList:[
+        {
+          name:'',
+          list:[
+            {
+              label:
+            }
+          ]
+        }
+      ]
     };
   },
-  mounted() {},
+  mounted() {
-  methods: {},
+    this.caseEcharts();
+    this.caseTypeLeft();
+    this.caseTypeRight();
+  },
+  methods: {
+    caseEcharts() {
+      var myChart = this.$echarts.init(document.getElementById("caseEcharts"));
+      let option = {
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "item",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          icon: "rect",
+          bottom:0,
+          itemWidth: 15,
+          data: ["收案", "结案", "存案"],
+          textStyle: {
+            color: "#fff",
+            fontSize: "0.5rem",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "15%",
+          top: "25%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["一季度", "二季度", "三季度", "四季度"],
+            //x轴坐标点
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            //x轴坐标线样式
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: "0.5rem",
+            },
+            //x轴线
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: [5, 10],
+                dashOffset: 10,
+                color: "#1282C8",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "次",
+            //x轴坐标点
+            axisTick: {
+              show: false,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            //x轴坐标线样式
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: "0.5rem",
+            },
+            //x轴线
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: '',
+                dashOffset: 10,
+                color: "rgb(108,108,109)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "收案",
+            type: "bar",
+            data: [22, 30, 50, 10],
+            itemStyle: {
+              //定义柱子的样式
+              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
+              //不同柱子颜色渐变
+              color: (params) => ({
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(84,112,198,1)", // 柱子最高度% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(84,112,198,0)", // X轴处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              }),
+            },
+            label: {
+              normal: {
+                show: true,
+                fontSize: "0.4rem",
+                color: "#fff",
+                position: "top",
+              },
+            },
+          },
+          {
+            name: "结案",
+            type: "bar",
+            data: [20, 34, 20, 30],
+            itemStyle: {
+              //定义柱子的样式
+              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
+              //不同柱子颜色渐变
+              color: (params) => ({
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(145,204,117,1)", // 柱子最高度% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(145,204,117,0)", // X轴处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              }),
+            },
+             label: {
+              normal: {
+                show: true,
+                fontSize: "0.4rem",
+                color: "#fff",
+                position: "top",
+              },
+            },
+          },
+          {
+            name: "存案",
+            type: "bar",
+            data: [12, 40, 20, 10],
+            itemStyle: {
+              //定义柱子的样式
+              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
+              //不同柱子颜色渐变
+              color: (params) => ({
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(250,200,88,1)", // 柱子最高度% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(250,200,88,0)", // X轴处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              }),
+            },
+             label: {
+              normal: {
+                show: true,
+                fontSize: "0.4rem",
+                color: "#fff",
+                position: "top",
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    caseTypeLeft(){
+         var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
+         var data = [
+        { value: "25", name: "民事案件" },
+        { value: "25", name: "行政案件" },
+        { value: "25", name: "刑事案件" },
+        { value: "25", name: "其他案件" },
+      ];
+      var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
+      let option = {
+        color: color,
+        title: {
+          left: "43%",
+          top: "40%",
+          textAlign: "center",
+          text: "当月统计",
+          textStyle: {
+            fontSize: "0.8rem",
+            color: "#fff",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.5)",
+          color: "#ffffff",
+          formatter: function (params) {
+            return (
+              // params.name +
+              // "<br/>" +
+              params.marker +
+              '<span style="color:' +
+              params.color +
+              '">' +
+              params.data["name"] +
+              "\n" +
+              params.data["value"] +
+              "%" +
+              "</span>"
+            );
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          icon: "rect",
+          bottom: "0",
+          x:'center',
+          itemWidth: 30,
+          itemGap: 20,
+          textStyle: {
+            rich: {
+              a: {
+                color: "#fff",
+                fontSize: "0.4rem",
+                padding: [0, 10, 0, 0],
+              },
+              b: {
+                color: "rgba(255,255,255,0)",
+                fontSize: "0.1rem",
+                padding: [0, 10, 0, 10],
+              },
+            },
+          },
+          formatter: function (name) {
+            var target, unit;
+            for (var i = 0, l = data.length; i < l; i++) {
+              if (data[i].name == name) {
+                target = data[i].value;
+                unit = data[i].unit;
+              }
+            }
+            return `{a| ${name}}{b|${target}}`;
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["45%", "60%"],
+            center: ["45%", "45%"],
+            avoidLabelOverlap: true,
+            label: {
+              normal: {
+                show: true,
+                position: "outside",
+                formatter: "{d}",
+                textStyle: {
+                  align: "center",
+                  baseline: "middle",
+                  fontSize: "0.5rem",
+                  fontWeight: "100",
+                  color: "auto",
+                },
+              },
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 10,
+            },
+
+            data: data,
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+     caseTypeRight(){
+         var myChart = this.$echarts.init(document.getElementById("caseTypeRight"));
+         var data = [
+        { value: "25", name: "民事案件" },
+        { value: "25", name: "行政案件" },
+        { value: "25", name: "刑事案件" },
+        { value: "25", name: "其他案件" },
+      ];
+      var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
+      let option = {
+        color: color,
+        title: {
+          left: "43%",
+          top: "40%",
+          textAlign: "center",
+          text: "第一季度统计",
+          textStyle: {
+            fontSize: "0.8rem",
+            color: "#fff",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.5)",
+          color: "#ffffff",
+          formatter: function (params) {
+            return (
+              // params.name +
+              // "<br/>" +
+              params.marker +
+              '<span style="color:' +
+              params.color +
+              '">' +
+              params.data["name"] +
+              "\n" +
+              params.data["value"] +
+              "%" +
+              "</span>"
+            );
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          icon: "rect",
+          bottom: "0",
+          x:'center',
+          itemWidth: 30,
+          itemGap: 20,
+          textStyle: {
+            rich: {
+              a: {
+                color: "#fff",
+                fontSize: "0.4rem",
+                padding: [0, 10, 0, 0],
+              },
+              b: {
+                color: "rgba(255,255,255,0)",
+                fontSize: "0.1rem",
+                padding: [0, 10, 0, 10],
+              },
+            },
+          },
+          formatter: function (name) {
+            var target, unit;
+            for (var i = 0, l = data.length; i < l; i++) {
+              if (data[i].name == name) {
+                target = data[i].value;
+                unit = data[i].unit;
+              }
+            }
+            return `{a| ${name}}{b|${target}}`;
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["45%", "60%"],
+            center: ["45%", "45%"],
+            avoidLabelOverlap: true,
+            label: {
+              normal: {
+                show: true,
+                position: "outside",
+                formatter: "{d}",
+                textStyle: {
+                  align: "center",
+                  baseline: "middle",
+                  fontSize: "0.5rem",
+                  fontWeight: "100",
+                  color: "auto",
+                },
+              },
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 10,
+            },
+
+            data: data,
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
   watch: {},
   components: {},
 };
@@ -79,7 +574,7 @@ export default {
   padding: 0 0.3% 0 0.3%;
   box-sizing: border-box;
   .left {
-    width: 25.5%;
+    width: 24.7%;
     height: 95%;
     padding: 0.5% 0.3% 1% 0.3%;
     box-sizing: border-box;
@@ -89,52 +584,52 @@ export default {
     background-size: 100% 100%;
     .leftOne {
       width: 100%;
-      height: 25%;
+      height: 20%;
       .courtHouse {
-        height: calc(100% - 30%);
+        height: calc(100% - 20%);
         width: 100%;
         display: flex;
-          flex-wrap: nowrap;
+        flex-wrap: nowrap;
-          justify-content: space-around;
+        justify-content: space-around;
+        align-items: center;
+        .courtData {
+          display: flex;
+          flex-direction: column;
           align-items: center;
-        .courtData{
+          height: 61%;
+          width: 13%;
+          .blueHouse {
+            background: url(../assets/images/blueHouse.png) no-repeat;
+            background-size: 100% 100%;
             display: flex;
-            flex-direction: column;
             align-items: center;
-            height: 85%;
+            justify-content: center;
-            width: 12%;
+            margin-top: 10%;
-             .blueHouse {
+          }
-              background: url(../assets/images/blueHouse.png) no-repeat;
+          .redHouse {
-              background-size: 100% 100%;
+            background: url(../assets/images/redHouse.png) no-repeat;
-              display: flex;
+            background-size: 100% 100%;
-              align-items: center;
+            display: flex;
-              justify-content: center;
+            align-items: center;
-              margin-top: 10%;
+            justify-content: center;
-            }
+            margin-top: 10%;
-            .redHouse {
+          }
-              background: url(../assets/images/redHouse.png) no-repeat;
+          .yellowHouse {
-              background-size: 100% 100%;
+            background: url(../assets/images/yellowHouse.png) no-repeat;
-              display: flex;
+            background-size: 100% 100%;
-              align-items: center;
+            display: flex;
-              justify-content: center;
+            align-items: center;
-              margin-top: 10%;
+            justify-content: center;
-            }
+            margin-top: 10%;
-            .yellowHouse {
+          }
-              background: url(../assets/images/yellowHouse.png) no-repeat;
+          .orangeHouse {
-              background-size: 100% 100%;
+            background: url(../assets/images/orangeHouse.png) no-repeat;
-              display: flex;
+            background-size: 100% 100%;
-              align-items: center;
+            display: flex;
-              justify-content: center;
+            align-items: center;
-              margin-top: 10%;
+            justify-content: center;
-            }
+            margin-top: 10%;
-            .orangeHouse {
+          }
-              background: url(../assets/images/orangeHouse.png) no-repeat;
-              background-size: 100% 100%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-top: 10%;
-            }
         }
       }
     }
@@ -142,20 +637,70 @@ export default {
       width: 100%;
       height: 35%;
       position: relative;
-      #caseEcharts{
+      .select{
+          position: absolute;
+          right: 5%;
+          width: 45%;
+          height: 10%;
+          display: flex;
+          z-index: 999;
+           /deep/ .el-select {
           width: 100%;
-          height: calc(100% - 16%);
+          height: 100%;
-          border: 1px solid blue;
+          border-radius: 15px;
+        }
+        /deep/ .el-input__inner {
+          width: 100%;
+          height: 100%;
+          background: transparent;
+          border: 1px solid rgb(1, 176, 202);
+          border-radius: 15px;
+          color: #fff;
+        }
+        /deep/ .el-select-dropdown {
+          background: transparent;
+          border: 1px solid rgb(1, 176, 202);
+          border-radius: 5px;
+          left: -30px !important;
+        }
+        /deep/ .el-select-dropdown__item {
+          color: turquoise;
+        }
+        /deep/ .el-select .el-input .el-select__caret {
+          color: rgb(1, 176, 202);
+          font-size: 0.3rem;
+          font-weight: 500;
+        }
+        /deep/ .el-input__suffix {
+          display: flex;
+          align-items: center;
+        }
+      }
+      #caseEcharts {
+        width: 100%;
+        height: calc(100% - 16%);
       }
     }
     .leftThree {
       width: 100%;
       height: 40%;
-      border: 1px solid white;
+      .caseType{
+          height: calc(100% - 8%);
+          width: 100%;
+          display: flex;
+          #caseTypeLeft{
+              width: 50%;
+              height: 100%;
+          }
+          #caseTypeRight{
+              width: 50%;
+              height: 100%;
+          }
+      }
     }
   }
   .right {
-    width: 25.5%;
+    width: 24.7%;
     height: 95%;
     padding: 0.5% 0.3% 1% 0.3%;
     box-sizing: border-box;
@@ -163,23 +708,41 @@ export default {
     flex-wrap: wrap;
     background: url(../assets/images/leftKuang.png) no-repeat;
     background-size: 100% 100%;
+    .caseList{
+        width: 100%;
+        height: calc(100% - 5%);
+        border: 1px solid red;
+        display: flex;
+        flex-wrap: wrap;
+        .selectList{
+          width: 100%;
+          height: 20%;
+          border: 1px solid rgb(0, 255, 170);
+          position: relative;
+        }
+        .caseDetail{
+          width: 100%;
+          height: calc(100% - 20%);
+          border: 1px solid blue;
+        }
+    }
   }
 }
 .title {
   width: 100%;
-  height: 30%;
+  height: 20%;
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.7rem;
+  font-size: 0.8rem;
   display: flex;
   align-items: center;
   padding-left: 12%;
   box-sizing: border-box;
 }
-.caseTitle{
+.caseTitle {
   width: 23%;
-  height: 10%;
+  height: 5%;
   background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
@@ -187,7 +750,6 @@ export default {
   display: flex;
   align-items: center;
   padding-left: 5%;
-  box-sizing: border-box; 
+  box-sizing: border-box;
-  margin-top: 2%; 
 }
 </style>

src/views/index.vue

@@ -30,7 +30,7 @@
               v-for="(item, index) in wisdomMonArr"
               :key="index"
             >
-              <div>
+              <div style="width:100%">
                 <span>{{ item.name }}:</span>
                 <span style="color: rgb(225, 177, 25); margin-left: 5%">{{
                   item.count
@@ -41,7 +41,7 @@
         </div>
       </div>
       <div class="leftTwo">
-        <div class="title">设备预警</div>
+        <div class="title" style="height:18%">设备告警</div>
         <div class="warning">
           <div id="warningOne"></div>
           <div id="warningTwo"></div>
@@ -50,7 +50,7 @@
       <div class="leftThree">
         <div class="warnListTitle">
           <div class="titleTwo">
-            <span style="margin-left: 10%; font-size: 0.6rem"
+            <span style="margin-left: 5%; font-size: 0.6rem"
               >报警信息列表</span
             >
           </div>
@@ -74,7 +74,7 @@
           >
             <div class="warnArray">
               <span>{{ item.id }}</span>
-              <img :src="item.icon" style="width: 9%; margin-left: 3%" />
+              <img :src="item.icon" style="width: 7%; margin-left: 3%" />
               <div
                 style="
                   display: flex;
@@ -92,7 +92,7 @@
                   "
                 >
                   <span>报警原因:{{ item.cause }}</span>
-                  <span style="position: relative; left: 58%"
+                  <span style="position: relative; left: 50%"
                     >风险等级:{{ item.risk }}</span
                   >
                 </div>
@@ -104,11 +104,10 @@
     </div>
     <div class="right">
       <div class="rightOne">
-        <div class="title" style="height: 20%">运维管理</div>
+        <div class="title" style="height: 13%">运维管理</div>
         <div class="maintenance">
           <div class="maintenanceCount">
             <div class="quantity">
-              <span>当日</span>
               <div
                 style="
                   width: 30%;
@@ -117,6 +116,7 @@
                   justify-content: space-evenly;
                 "
               >
+              <span>当日</span>
                 <img src="../assets/images/blueDian.png" style="width: 9%" />
                 <span style="margin-left: 2%">报警数：8</span>
               </div>
@@ -133,7 +133,6 @@
               </div>
             </div>
             <div class="quantity">
-              <span>统计</span>
               <div
                 style="
                   width: 30%;
@@ -142,6 +141,7 @@
                   justify-content: space-evenly;
                 "
               >
+              <span>统计</span>
                 <img src="../assets/images/blueDian.png" style="width: 9%" />
                 <span style="margin-left: 2%">派单数：8</span>
               </div>
@@ -185,7 +185,7 @@
         </div>
       </div>
       <div class="rightThree">
-        <div class="title" style="height: 20%">摄像监控</div>
+        <div class="title" style="height: 15%">摄像监控</div>
         <div class="camera">
           <div
             class="cameraList"
@@ -314,7 +314,7 @@ export default {
         legend: {
           show: true,
           align: "left",
-          // x:'1%',
+          x:'45%',
           orient: "vertical",
           textStyle: {
             color: "#fff",
@@ -435,7 +435,7 @@ export default {
         legend: {
           show: true,
           align: "left",
-          // x:'1%',
+          x:'45%',
           orient: "vertical",
           textStyle: {
             color: "#fff",
@@ -564,11 +564,11 @@ export default {
         color: color,
         title: {
           left: "45%",
-          top: "45%",
+          top: "35%",
           textAlign: "center",
           text: "当月次数统计",
           textStyle: {
-            fontSize: "0.4rem",
+            fontSize: "0.65rem",
             color: "#fff",
           },
         },
@@ -593,12 +593,13 @@ export default {
           },
         },
         legend: {
-          orient: "vertical",
+          // orient: "vertical",
-          icon: "circle",
+          icon: "rect",
-          left: "70%",
+          // left: "5%",
-          top: "20%",
+          // top: "20%",
+          bottom:'0',
           itemWidth: 14,
-          itemGap: 20,
+          itemGap: 10,
           textStyle: {
             rich: {
               a: {
@@ -608,8 +609,8 @@ export default {
               },
               b: {
                 color: "rgba(255,255,255,0)",
-                fontSize: "0.5rem",
+                fontSize: "0rem",
-                padding: [0, 10, 0, 10],
+                padding: [0, 10, 0,15],
               },
             },
           },
@@ -621,15 +622,15 @@ export default {
                 unit = data[i].unit;
               }
             }
-            return `{a| ${name}}{b|${target}}`;
+            return `{a| ${name}}{b|}`;
           },
         },
         series: [
           {
             name: "",
             type: "pie",
-            radius: ["60%", "70%"],
+            radius: ["45%", "60%"],
-            center: ["45%", "50%"],
+            center: ["48%", "40%"],
             avoidLabelOverlap: true,
             label: {
               normal: {
@@ -672,11 +673,11 @@ export default {
         color: color,
         title: {
           left: "45%",
-          top: "45%",
+          top: "35%",
           textAlign: "center",
           text: "上月次数统计",
           textStyle: {
-            fontSize: "0.4rem",
+            fontSize: "0.6rem",
             color: "#fff",
           },
         },
@@ -701,12 +702,12 @@ export default {
           },
         },
         legend: {
-          orient: "vertical",
+           icon: "rect",
-          icon: "circle",
+          // left: "5%",
-          left: "73%",
+          // top: "20%",
-          top: "18%",
+          bottom:'0',
           itemWidth: 14,
-          itemGap: 20,
+          itemGap: 10,
           textStyle: {
             rich: {
               a: {
@@ -716,7 +717,7 @@ export default {
               },
               b: {
                 color: "rgba(255,255,255,0)",
-                fontSize: "0.5rem",
+                fontSize: "0.1rem",
                 padding: [0, 10, 0, 10],
               },
             },
@@ -736,8 +737,8 @@ export default {
           {
             name: "",
             type: "pie",
-            radius: ["60%", "70%"],
+             radius: ["45%", "60%"],
-            center: ["45%", "50%"],
+            center: ["48%", "40%"],
             avoidLabelOverlap: true,
             label: {
               normal: {
@@ -956,7 +957,7 @@ export default {
   padding: 0 0.3% 0 0.3%;
   box-sizing: border-box;
   .left {
-    width: 25.5%;
+    width: 24.7%;
     height: 95%;
     padding: 0.5% 0.3% 1% 0.3%;
     box-sizing: border-box;
@@ -965,7 +966,7 @@ export default {
     background: url(../assets/images/leftKuang.png) no-repeat;
     background-size: 100% 100%;
     .leftOne {
-      height: 23%;
+      height: 22%;
       width: 100%;
       .wisdomContent {
         height: calc(100% - 25%);
@@ -983,8 +984,8 @@ export default {
             display: flex;
             flex-direction: column;
             align-items: center;
-            height: 92%;
+            height: 70%;
-            width: 9%;
+            width: 11%;
             .blueHouse {
               background: url(../assets/images/blueHouse.png) no-repeat;
               background-size: 100% 100%;
@@ -1025,6 +1026,8 @@ export default {
             font-size: @fontSize;
             background: url(../assets/images/flootLine.png) no-repeat;
             background-size: 100% 100%;
+            display: flex;
+    align-items: center;
           }
         }
       }
@@ -1035,6 +1038,7 @@ export default {
       .warning {
         height: calc(100% - 25%);
         width: 100%;
+        margin-top: 3%;
         display: flex;
         flex-wrap: nowrap;
         #warningOne {
@@ -1057,6 +1061,7 @@ export default {
         .titleTwo {
           width: 20%;
           height: 100%;
+          margin-left: 2%;
           background: url(../assets/images/flootLine.png) no-repeat;
           background-size: 100% 100%;
           color: #fff;
@@ -1072,8 +1077,8 @@ export default {
         justify-content: space-around;
         align-items: center;
         .btnList {
-          width: 15%;
+          width: 13%;
-          height: 60%;
+          height: 38%;
           background: url(../assets/images/warnBtn.png) no-repeat;
           background-size: 100% 100%;
           color: #fff;
@@ -1083,8 +1088,8 @@ export default {
           justify-content: center;
         }
         .btnListAc {
-          width: 15%;
+          width: 13%;
-          height: 60%;
+          height: 38%;
           background: url(../assets/images/warnBtnAc.png) no-repeat;
           background-size: 100% 100%;
           color: #fff;
@@ -1101,7 +1106,7 @@ export default {
         background-size: 100% 100%;
         overflow: auto;
         .warnListContent {
-          height: 50%;
+          height: 25%;
           width: 100%;
           border: 1px dashed #fff;
           color: #fff;
@@ -1126,7 +1131,7 @@ export default {
     }
   }
   .right {
-    width: 25.5%;
+    width: 24.7%;
     height: 95%;
     padding: 0.5% 0.3% 0.3% 0.3%;
     box-sizing: border-box;
@@ -1138,7 +1143,7 @@ export default {
       height: 38%;
       width: 100%;
       .maintenance {
-        height: calc(100% - 20%);
+        height: calc(100% - 13%);
         width: 100%;
         padding: 0 2% 0 2%;
         box-sizing: border-box;
@@ -1184,10 +1189,10 @@ export default {
         height: calc(100% - 25%);
       }
       .selectChange {
-        width: 14%;
+        width: 23%;
         height: 10%;
         position: absolute;
-        top: 28%;
+        top: 22%;
         right: 5%;
         /deep/ .el-select {
           width: 100%;
@@ -1226,7 +1231,7 @@ export default {
       height: 34%;
       width: 100%;
       .camera {
-        height: calc(100% - 20%);
+        height: calc(100% - 15%);
         width: 100%;
         display: flex;
         flex-wrap: wrap;
@@ -1244,7 +1249,7 @@ export default {
 }
 .title {
   width: 100%;
-  height: 25%;
+  height: 20%;
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;