代码提交

src/App.vue

@@ -105,6 +105,7 @@ import {getData} from './api/index.js'
         },
       ],
       menuAc:0, //菜单点击
+      timer:null,
       }
     },
      created() {
@@ -129,7 +130,6 @@ import {getData} from './api/index.js'
               that.fun();
           });
         };
-
     },
     methods:{
       //菜单选中
@@ -204,7 +204,7 @@ import {getData} from './api/index.js'
 <style lang="less">
 /*将大屏设置为1920*1080,设置缩放的方向*/
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family:'微软雅黑' ;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
@@ -219,7 +219,7 @@ import {getData} from './api/index.js'
 #app {
   // width: 6144px;
   // height: 1920px;
-  background: rgba(1, 1, 7, 0.7);
+  background: rgba(1, 1, 7, 1);
   // overflow: hidden;
   .header {
     height: 11%;
@@ -232,7 +232,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;
@@ -249,7 +249,7 @@ import {getData} from './api/index.js'
       letter-spacing: 0.5rem;
     }
     .right {
-      width: 26%;
+      width: 25%;
       height: 100%;
 
       .quit {

src/views/court.vue

@@ -55,7 +55,9 @@
         <div id="caseEcharts"></div>
       </div>
       <div class="leftThree">
-          <div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div>
+        <div class="caseTitle" style="width: 32%; padding-left: 6%">
+          案件类型统计
+        </div>
         <div class="caseType">
           <div id="caseTypeLeft"></div>
           <div id="caseTypeRight"></div>
@@ -66,9 +68,66 @@
       <div class="title" style="height: 5%">案件列表</div>
       <div class="caseList">
         <div class="selectList">
-            <div class="selectChange"></div>
+          <div
+            class="selectChange"
+            v-for="(item, index) in selectList"
+            :key="index"
+          >
+            <el-select
+              v-model="item.name"
+              :popper-append-to-body="false"
+              clearable
+              :placeholder="item.name"
+              style="margin-left: 5%"
+            >
+              <el-option
+                v-for="(item, index) in item.list"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="caseDetail">
+          <div class="caseDetailList">
+            <div
+              class="detail"
+              v-for="(item, index) in caseDetailList"
+              :key="index"
+            >
+              <div class="rowDetail">
+                <span>{{ item.id }}&nbsp;&nbsp;案件案号:</span>
+                <span>{{ item.caseCode }}</span>
+              </div>
+              <div style="padding-left: 5%" class="rowDetail">
+                <span>案件名称:</span>
+                <span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.caseName }}</span>
+              </div>
+              <div style="padding-left: 5%" class="rowDetail">
+                <span>开庭时间:</span>
+                <span>{{ item.time }}</span>
+              </div>
+              <div style="padding-left: 5%" class="rowDetail">
+                <span>开庭法庭:</span>
+                <span>{{ item.court }}</span>
+              </div>
+              <div style="padding-left: 5%" class="rowDetail">
+                <span>案件案由:</span>
+                <span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.brief }}</span>
+              </div>
+              <div style="padding-left: 5%" class="rowDetail">
+                <span>当事人:</span>
+                <span>{{ item.user }}</span>
+              </div>
+              <div style="padding-left: 5%" class="rowDetail">
+                <span>书记员:</span>
+                <span>{{ item.clerk }}</span>
+              </div>
+            </div>
+          </div>
         </div>
-          <div class="caseDetail"></div>
       </div>
     </div>
   </div>
@@ -98,38 +157,166 @@ export default {
         },
       ], // 智慧法庭小房子
       houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
-      userValue:'', //人员选择
+      userValue: "", //人员选择
       userOptions: [
         {
-              label:'人员',
+          label: "人员",
-              value:'1'
+          value: "1",
         },
         {
-              label:'人员2',
+          label: "人员2",
-              value:'2'
+          value: "2",
-          }
+        },
       ], //人员子项
-      departmentValue:'', //部门选择
+      departmentValue: "", //部门选择
       departmentOptions: [
         {
-              label:'部门',
+          label: "部门",
-              value:'1'
+          value: "1",
         },
         {
-              label:'部门2',
+          label: "部门2",
-              value:'2'
+          value: "2",
-          }
+        },
       ], //部门子项
       selectList: [
         {
-          name:'',
+          name: "立案日期",
           list: [
             {
-              label:''
+              label: "立案日期",
-            }
+              value: "1",
-          ]
+            },
-        }
+            {
-      ]
+              label: "立案日期2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "法官",
+          list: [
+            {
+              label: "法官",
+              value: "1",
+            },
+            {
+              label: "法官2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "案件类型",
+          list: [
+            {
+              label: "案件类型",
+              value: "1",
+            },
+            {
+              label: "案件类型2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "收案日期",
+          list: [
+            {
+              label: "收案日期",
+              value: "1",
+            },
+            {
+              label: "收案日期2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "经办法院代码",
+          list: [
+            {
+              label: "经办法院代码",
+              value: "1",
+            },
+            {
+              label: "经办法院代码2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "结案日期",
+          list: [
+            {
+              label: "结案日期",
+              value: "1",
+            },
+            {
+              label: "结案日期2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "结案方式",
+          list: [
+            {
+              label: "结案方式",
+              value: "1",
+            },
+            {
+              label: "结案方式2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "案件状态代码",
+          list: [
+            {
+              label: "案件状态代码",
+              value: "1",
+            },
+            {
+              label: "案件状态代码2",
+              value: "2",
+            },
+          ],
+        },
+      ], //案件列表选择器
+      caseDetailList: [
+        {
+          id: "1",
+          caseCode: "(2022)苏0192民初14272号",
+          caseName: "崔怀宁与高保加买卖合同纠纷",
+          time: "2023-01-16 09:00--09:30",
+          court: "新楼第十五法庭",
+          brief: "买卖合同纠纷",
+          user: "原告：崔怀宁;被告：高保加",
+          clerk: "甫明",
+        },
+        {
+          id: "2",
+          caseCode: "(2022)苏0192民初14272号",
+          caseName: "崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;",
+          time: "2023-01-16 09:00--09:30",
+          court: "新楼第十五法庭",
+          brief: "买卖合同纠纷",
+          user: "原告：崔怀宁;被告：高保加",
+          clerk: "甫明",
+        },
+        {
+          id: "3",
+          caseCode: "(2022)苏0192民初14272号",
+          caseName: "崔怀宁与高保加买卖合同纠纷",
+          time: "2023-01-16 09:00--09:30",
+          court: "新楼第十五法庭",
+          brief: "买卖合同纠纷",
+          user: "原告：崔怀宁;被告：高保加",
+          clerk: "甫明",
+        },
+      ],
     };
   },
   mounted() {
@@ -226,7 +413,7 @@ export default {
             splitLine: {
               show: true,
               lineStyle: {
-                type: '',
+                type: "",
                 dashOffset: 10,
                 color: "rgb(108,108,109)",
               },
@@ -354,7 +541,12 @@ export default {
         { value: "25", name: "刑事案件" },
         { value: "25", name: "其他案件" },
       ];
-      var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
+      var color = [
+        "rgb(185,8,25)",
+        "rgb(160,87,6)",
+        "rgb(16,134,165)",
+        "rgb(178,178,178)",
+      ];
       let option = {
         color: color,
         title: {
@@ -363,7 +555,7 @@ export default {
           textAlign: "center",
           text: "当月统计",
           textStyle: {
-            fontSize: "0.8rem",
+            fontSize: "0.6rem",
             color: "#fff",
           },
         },
@@ -391,7 +583,7 @@ export default {
           orient: "horizontal",
           icon: "rect",
           bottom: "0",
-          x:'center',
+          x: "center",
           itemWidth: 30,
           itemGap: 20,
           textStyle: {
@@ -453,14 +645,21 @@ export default {
       myChart.setOption(option);
     },
     caseTypeRight() {
-         var myChart = this.$echarts.init(document.getElementById("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)"];
+      var color = [
+        "rgb(185,8,25)",
+        "rgb(160,87,6)",
+        "rgb(16,134,165)",
+        "rgb(178,178,178)",
+      ];
       let option = {
         color: color,
         title: {
@@ -469,7 +668,7 @@ export default {
           textAlign: "center",
           text: "第一季度统计",
           textStyle: {
-            fontSize: "0.8rem",
+            fontSize: "0.6rem",
             color: "#fff",
           },
         },
@@ -497,7 +696,7 @@ export default {
           orient: "horizontal",
           icon: "rect",
           bottom: "0",
-          x:'center',
+          x: "center",
           itemWidth: 30,
           itemGap: 20,
           textStyle: {
@@ -711,19 +910,87 @@ export default {
     .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;
+        display: flex;
+        flex-wrap: wrap;
+        .selectChange {
+          width: 25%;
+          height: 20%;
+          margin-top: 3%;
+          margin-left: 5%;
+          /deep/ .el-select {
+            width: 100%;
+            height: 100%;
+            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: rgba(0,23,28,0.3);
+            border: 1px solid rgb(1, 176, 202);
+            border-radius: 5px;
+            // left: -3px !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;
+          }
+        }
       }
       .caseDetail {
         width: 100%;
         height: calc(100% - 20%);
-          border: 1px solid blue;
+        padding: 0 5%;
+        box-sizing: border-box;
+        .caseDetailList {
+          width: 100%;
+          height: 100%;
+          background: url(../assets/images/warnDottedLine.png) no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          flex-wrap: wrap;
+          overflow: auto;
+          .detail {
+            width: 100%;
+            height: 50%;
+            border: 1px dashed #fff;
+            color: #fff;
+            font-size: 0.65rem;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: space-around;
+            .rowDetail {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              padding: 0 3%;
+              box-sizing: border-box;
+            }
+          }
+        }
+         ::-webkit-scrollbar {
+        display: none;
+      }
       }
     }
   }

src/views/energySaving.vue

@@ -1,60 +1,497 @@
 <template>
-  <div class="courtMain">
+  <div class="energy">
     <div class="left">
       <div class="leftOne">
-        <div class="title">智慧节能</div>
+        <div class="title">设备用能统计数据</div>
-        <div class="courtHouse">
+        <div class="equipment">
-           
+          <div
+            class="equipmentEnergy"
+            v-for="(item, index) in equipmentList"
+            :key="index"
+          >
+            <div class="equipmentList">
+              <span>{{ item.count }}</span>
+              <span style="color: rgb(225, 177, 25); font-size: 0.4rem"
+                >KWH</span
+              >
+            </div>
+            <div class="equipmentName">
+              {{ item.name }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="leftTwo">
-          <div class="caseTitle">
+        <div class="title" style="height: 8%">设备预警信息列表</div>
-              
+        <div class="equipmentWarning">
+          <div class="equipmentBtn">
+            <div
+              class="equipmentBtnList"
+              v-for="(item, index) in equipmentBtnList"
+              :key="index"
+              :class="{ equipmentBtnAc: equipmentBtnAc == index }"
+              @click="changeWarn(index)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="equipmentWarnList">
+            <div
+              class="warnList"
+              v-for="(item, index) in warnList"
+              :key="index"
+            >
+              <span>{{ item.id }}</span>
+              <img :src="item.icon" />
+              <div
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  align-items: flex-start;
+                  width: 65%;
+                "
+              >
+                <span
+                  style="
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >报警时间:<span style="margin-left: 5%">{{
+                    item.time
+                  }}</span></span
+                >
+                <span
+                  style="
+                    margin-top: 3%;
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >报警原因:<span style="color: red; margin-left: 5%">{{
+                    item.case
+                  }}</span></span
+                >
+                <span
+                  style="
+                    margin-top: 3%;
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >报警等级:<span style="color: red; margin-left: 5%">{{
+                    item.grade
+                  }}</span></span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="rightOne">
+        <div class="title">能耗计量分析</div>
+        <div id="calculateEcharts"></div>
+      </div>
+      <div class="rightTwo">
+        <div class="title">太阳能光伏发电系统数据</div>
+        <div class="sun">
+          <div class="sunList" v-for="(item, index) in sunList" :key="index">
+            <img :src="item.icon" />
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                margin-left: 5%;
+              "
+            >
+              <span>{{ item.name }}</span>
+              <span style="margin-top: 5%"
+                >{{ item.count }}&nbsp;&nbsp;<span
+                  style="color: rgb(225, 177, 25)"
+                  >{{ item.unit }}</span
+                ></span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rightThree">
+        <div class="title" style="height: 16%">视频联动</div>
+        <div class="video">
+          <img
+            src="../assets/images/camera.png"
+            style="width: 100%; height: 100%"
+          />
         </div>
-          <div id="caseEcharts"></div>
       </div>
-      <div class="leftThree"></div>
     </div>
-    <div class="right"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "court",
+  name: "energySaving",
   data() {
     return {
-        courtList: [
+      equipmentList: [
         {
-          name: "空闲中",
+          name: "热回收机组1",
-          count: "7",
+          count: "28.4",
         },
         {
-          name: "已开庭",
+          name: "热回收机组2",
-          count: "15",
+          count: "28.4",
         },
         {
-          name: "已预约",
+          name: "热回收机组3",
-          count: "17",
+          count: "28.4",
         },
         {
-          name: "法官办公室",
+          name: "热回收机组4",
-          count: "86",
+          count: "28.4",
         },
-      ], // 智慧法庭小房子
+        {
-       houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
+          name: "热回收机组5",
+          count: "28.4",
+        },
+        {
+          name: "热回收机组6",
+          count: "28.4",
+        },
+        {
+          name: "热回收机组7",
+          count: "28.4",
+        },
+        {
+          name: "热回收机组8",
+          count: "28.4",
+        },
+        {
+          name: "热回收机组9",
+          count: "28.4",
+        },
+      ], //设备用能数据
+      equipmentBtnList: [
+        {
+          name: "电梯系统",
+        },
+        {
+          name: "光伏发电系统",
+        },
+        {
+          name: "多联空调系统",
+        },
+        {
+          name: "恒温恒湿空调",
+        },
+        {
+          name: "热回收空调",
+        },
+      ],
+      equipmentBtnAc: "", //点击预警
+      warnList: [
+        {
+          id: "1",
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
+        {
+          id: "2",
+          icon: require("../assets/images/jieNengImg/warnBlue.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
+        {
+          id: "3",
+          icon: require("../assets/images/jieNengImg/warnWhite.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
+        {
+          id: "4",
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
+      ], //故障数组
+      sunList: [
+        {
+          name: "今日发电量",
+          icon: require("../assets/images/jieNengImg/energy.png"),
+          count: "35.2",
+          unit: "kWh",
+        },
+        {
+          name: "总发电量",
+          icon: require("../assets/images/jieNengImg/energy.png"),
+          count: "35.2",
+          unit: "kWh",
+        },
+        {
+          name: "有功功率",
+          icon: require("../assets/images/jieNengImg/power.png"),
+          count: "35.2",
+          unit: "kWh",
+        },
+        {
+          name: "运行状态",
+          icon: require("../assets/images/jieNengImg/runStatus.png"),
+          count: "正常",
+          unit: "",
+        },
+        {
+          name: "运行时间",
+          icon: require("../assets/images/jieNengImg/runTime.png"),
+          count: "35.2",
+          unit: "h",
+        },
+        {
+          name: "运行状态",
+          icon: require("../assets/images/jieNengImg/warning.png"),
+          count: "无",
+          unit: "",
+        },
+      ],
     };
   },
-  mounted() {},
+  mounted() {
-  methods: {},
+    this.calculateEcharts();
-  watch: {},
+  },
+  methods: {
+    //预警点击
+    changeWarn(index) {
+      this.equipmentBtnAc = index;
+    },
+    calculateEcharts() {
+      let imgSrc = "/img/car.png";
+      let chartData = [
+        {
+          value: 42,
+          name: "空调",
+        },
+        {
+          value: 24,
+          name: "动力",
+        },
+        {
+          value: 13,
+          name: "插座",
+        },
+        {
+          value: 48,
+          name: "特种",
+        },
+      ];
+      let colorList = [
+        "red",
+        "rgb(255,122,0)",
+        "rgb(0,213,243)",
+        "rgb(219,241,243)",
+      ];
+      let sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      let gap = (1 * sum) / 100;
+      let pieData1 = [];
+      let pieData2 = [];
+      let gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+          itemStyle: {
+            borderRadius: 0,
+          },
+        });
+        pieData1.push(gapData);
+
+        // 第二圈数据
+        pieData2.push({
+          ...chartData[i],
+          itemStyle: {
+            color: colorList[i],
+            opacity: 0.1,
+          },
+        });
+        pieData2.push(gapData);
+      }
+      var myChart = this.$echarts.init(
+        document.getElementById("calculateEcharts")
+      );
+
+      let option = {
+        tooltip: {
+          show: false,
+          backgroundColor: "rgba(17,95,234,0.5)",
+          textStyle: {
+            color: "#F0F0F0",
+          },
+        },
+        legend: {
+          show: true,
+          right: "10%",
+          top: "center",
+
+          icon: "rect",
+          itemWidth: 15,
+          itemHeight: 15,
+          itemGap: 20,
+          textStyle: {
+            color: "auto",
+            rich: {
+              name: {
+                padding: [0, 10, 0, 8],
+                color: "auto",
+                fontSize: "0.7rem",
+              },
+              percent: {
+                padding: [0, 0, 0, 8],
+                color: "auto",
+                fontSize: "0.7rem",
+              },
+            },
+          },
+          formatter: (name) => {
+            let item = chartData.find((i) => {
+              return i.name == name;
+            });
+            let p = ((item.value / sum) * 100).toFixed(0);
+            return "{name|" + name + "}" + "{percent|" + p + "}" + "%";
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: imgSrc,
+                width: 30,
+                height: 30,
+              },
+              top: "middle",
+              left: "25%",
+              scale: [1.5, 1.5],
+            },
+          ],
+        },
+        grid: {
+          top: 35,
+          right: 30,
+          bottom: 20,
+          left: 30,
+        },
+        color: colorList,
+        series: [
+          {
+            name: "消息来源",
+            type: "pie",
+            // roundCap: true,
+            radius: ["70%", "80%"],
+            center: ["30%", "50%"],
+            // avoidLabelOverlap: true,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: pieData1,
+          },
+          {
+            type: "pie",
+            radius: ["70%", "60%"],
+            center: ["30%", "50%"],
+            gap: 1.71,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            silent: true,
+            data: pieData2,
+          },
+          {
+            type: "pie",
+            center: ["30%", "50%"],
+            radius: [0, "45.6%"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            itemStyle: {
+              color: "rgba(5,37,95,0.3)",
+            },
+            silent: true,
+            data: [
+              {
+                value: 100,
+                name: "",
+              },
+            ],
+          },
+          {
+            name: "",
+            type: "gauge",
+            detail: false,
+            splitNumber: 10, //刻度数量
+            radius: "65%", //图表尺寸
+            center: ["30%", "50%"],
+            startAngle: 0, //开始刻度的角度
+            endAngle: -356, //结束刻度的角度
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 0,
+                shadowBlur: 0,
+              },
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+                width: 1,
+              },
+              length: 2,
+              splitNumber: 3,
+            },
+            splitLine: {
+              show: false,
+              length: 5,
+              lineStyle: {
+                color: "#194482",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
   components: {},
 };
 </script>
 
 <style lang="less" scoped>
-@fontsize: 0.6rem;
+.energy {
-.courtMain {
   width: 100%;
   height: 100%;
   display: flex;
@@ -62,7 +499,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;
@@ -72,105 +509,158 @@ export default {
     background-size: 100% 100%;
     .leftOne {
       width: 100%;
-      height: 25%;
+      height: 35%;
-      .courtHouse {
+      .equipment {
-        height: calc(100% - 30%);
+        height: calc(100% - 14%);
         width: 100%;
         display: flex;
-          flex-wrap: nowrap;
+        flex-wrap: wrap;
-          justify-content: space-around;
+        overflow: auto;
-          align-items: center;
+        .equipmentEnergy {
-        .courtData{
+          width: 25%;
+          height: 50%;
+          .equipmentList {
+            width: 100%%;
+            height: 80%;
+            background: url("../assets/images/jieNengImg/energyBack.png")
+              no-repeat;
+            background-size: 100% 100%;
+            color: #fff;
+            font-size: 1.3rem;
+            font-weight: 500;
             display: flex;
             flex-direction: column;
-            align-items: center;
-            height: 85%;
-            width: 12%;
-             .blueHouse {
-              background: url(../assets/images/blueHouse.png) no-repeat;
-              background-size: 100% 100%;
-              display: flex;
-              align-items: center;
             justify-content: center;
-              margin-top: 10%;
           }
-            .redHouse {
+          .equipmentName {
-              background: url(../assets/images/redHouse.png) no-repeat;
+            height: calc(100% - 80%);
-              background-size: 100% 100%;
+            width: 100%;
-              display: flex;
+            color: #fff;
-              align-items: center;
-              justify-content: center;
-              margin-top: 10%;
-            }
-            .yellowHouse {
-              background: url(../assets/images/yellowHouse.png) no-repeat;
-              background-size: 100% 100%;
-              display: flex;
-              align-items: center;
-              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%;
           }
         }
       }
+      ::-webkit-scrollbar {
+        display: none;
+      }
     }
     .leftTwo {
       width: 100%;
-      height: 35%;
+      height: calc(100% - 35%);
-      position: relative;
+      .equipmentWarning {
-      #caseEcharts{
+        height: calc(100% - 8%);
         width: 100%;
-          height: calc(100% - 16%);
+        .equipmentBtn {
-          border: 1px solid blue;
+          width: 100%;
+          height: 30%;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: flex-start;
+          .equipmentBtnList {
+            width: 26.4%;
+            height: 29%;
+            background: url("../assets/images/jieNengImg/eqBtn.png") no-repeat;
+            background-size: 100% 100%;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 6%;
+          }
+          .equipmentBtnAc {
+            width: 26.4%;
+            height: 29%;
+            background: url("../assets/images/jieNengImg/eqBtnAc.png") no-repeat;
+            background-size: 100% 100%;
+            color: rgb(225, 177, 25);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 6%;
           }
         }
-    .leftThree {
+        .equipmentWarnList {
           width: 100%;
-      height: 40%;
+          height: calc(100% - 30%);
-      border: 1px solid white;
+          overflow: auto;
+          .warnList {
+            height: 32%;
+            width: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: space-around;
+            padding-right: 20%;
+            box-sizing: border-box;
+            color: #fff;
+          }
+        }
+        ::-webkit-scrollbar {
+          display: none;
+        }
+      }
     }
   }
   .right {
-    width: 25.5%;
+    width: 24.7%;
     height: 95%;
-    padding: 0.5% 0.3% 1% 0.3%;
+    padding: 0.5% 0.3% 0.5% 0.3%;
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
     background: url(../assets/images/leftKuang.png) no-repeat;
     background-size: 100% 100%;
+    .rightOne {
+      width: 100%;
+      height: 30%;
+      #calculateEcharts {
+        width: 100%;
+        height: calc(100% - 14%);
+      }
+    }
+    .rightTwo {
+      width: 100%;
+      height: 37%;
+      .sun {
+        width: 100%;
+        height: calc(100% - 14%);
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+        .sunList {
+          width: 40%;
+          height: 25%;
+          display: flex;
+          align-items: center;
+          color: #fff;
+          justify-content: center;
+        }
+      }
+    }
+    .rightThree {
+      width: 100%;
+      height: 30%;
+      display: flex;
+      flex-wrap: wrap;
+      .video {
+        height: calc(100% - 23%);
+        width: 98%;
+        border: 3px solid rgb(1, 176, 202);
+      }
+    }
   }
 }
 .title {
   width: 100%;
-  height: 30%;
+  height: 14%;
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.7rem;
-  display: flex;
-  align-items: center;
-  padding-left: 12%;
-  box-sizing: border-box;
-}
-.caseTitle{
-  width: 23%;
-  height: 10%;
-  background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
-  background-size: 100% 100%;
-  color: #fff;
   font-size: 0.8rem;
   display: flex;
   align-items: center;
-  padding-left: 5%;
+  padding-left: 12%;
   box-sizing: border-box;
-  margin-top: 2%; 
 }
 </style>

src/views/index.vue

@@ -555,8 +555,8 @@ export default {
       );
       var data = [
         { value: "25", name: "报警" },
-        { value: "25", name: "派单" },
         { value: "25", name: "已完成" },
+        { value: "25", name: "派单" },
         { value: "25", name: "未完成" },
       ];
       var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
@@ -568,7 +568,7 @@ export default {
           textAlign: "center",
           text: "当月次数统计",
           textStyle: {
-            fontSize: "0.65rem",
+            fontSize: "0.60rem",
             color: "#fff",
           },
         },
@@ -664,8 +664,8 @@ export default {
       );
       var data = [
         { value: "25", name: "报警" },
-        { value: "25", name: "派单" },
         { value: "25", name: "已完成" },
+        { value: "25", name: "派单" },
         { value: "25", name: "未完成" },
       ];
       var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];

src/views/operationMaintenance.vue

@@ -1,52 +1,359 @@
 <template>
-  <div class="courtMain">
+  <div class="operationMaintenance">
     <div class="left">
-      <div class="leftOne">
+      <div class="title">工单管理</div>
-        <div class="title">智慧运维</div>
+      <div class="workOrder">
-        <div class="courtHouse">
+        <div class="todayCount">
-           
+          <div
+            style="width: 100%; display: flex; justify-content: space-evenly"
+          >
+            <span>今日报警:&nbsp;&nbsp;10</span>
+            <span
+              >同比昨日:<img
+                src="../assets/images/gongDan/greenJian.png"
+              />&nbsp;&nbsp;0.5</span
+            >
+          </div>
+          <div
+            style="width: 100%; display: flex; justify-content: space-evenly"
+          >
+            <span>今日工单:&nbsp;&nbsp;10</span>
+            <span
+              >同比昨日:<img
+                src="../assets/images/gongDan/redJian.png"
+              />&nbsp;&nbsp;0.5</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="workCount">
+        <div style="font-size: 0.8rem">本月工单数</div>
+        <div id="workOrderEcharts"></div>
+      </div>
+      <div class="workList">
+        <div class="workContent" v-for="(item, index) in workList" :key="index">
+          <span>{{ item.name }}</span>
+          <span style="color: rgb(9, 196, 217); font-size: 1rem">{{
+            item.count
+          }}</span>
+          <span>今日总响应超时工单数：{{ item.toDayCount }}</span>
+          <span>今日总响应超时时长：{{ item.toDayTime }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="title">工单管理</div>
+      <div class="selectList">
+        <div
+          class="selectChange"
+          v-for="(item, index) in selectList"
+          :key="index"
+        >
+          <el-select
+            v-model="item.name"
+            :popper-append-to-body="false"
+            clearable
+            :placeholder="item.name"
+            style="margin-left: 5%"
+          >
+            <el-option
+              v-for="(item, index) in item.list"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="workOrderList">
+        <div class="workContent">
+          <div
+            class="workContentList"
+            v-for="(item, index) in distributeLeafletsList"
+            :key="index"
+          >
+            <div class="distributeLeaflets">
+              <span>{{ item.id }}&nbsp;&nbsp;派单时间:</span>
+              <span class="distributeLeafletsValue">{{ item.time }}</span>
+            </div>
+            <div class="distributeLeaflets" style="margin-left: 4%">
+              <span>派单人员:</span>
+              <span class="distributeLeafletsValue">{{ item.user }}</span>
+            </div>
+            <div class="distributeLeaflets" style="margin-left: 4%">
+              <span>工单类型:</span>
+              <span class="distributeLeafletsValue">{{ item.type }}</span>
+            </div>
+            <div class="distributeLeaflets" style="margin-left: 4%">
+              <span>接单时间:</span>
+              <span class="distributeLeafletsValue">{{ item.receiveTime }}</span>
+            </div>
+            <div class="distributeLeaflets" style="margin-left: 4%">
+              <span>订单状态:</span>
+              <span class="distributeLeafletsValue">{{ item.status }}</span>
             </div>
           </div>
-      <div class="leftTwo">
-          <div class="caseTitle">
-              
         </div>
-          <div id="caseEcharts"></div>
       </div>
-      <div class="leftThree"></div>
     </div>
-    <div class="right"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "court",
+  name: "operationMaintenance",
   data() {
     return {
-        courtList: [
+      workList: [
         {
-          name: "空闲中",
+          name: "超时响应工单数",
-          count: "7",
+          count: "0",
+          toDayCount: "2",
+          toDayTime: "0",
         },
         {
-          name: "已开庭",
+          name: "未处理超时工单数",
-          count: "15",
+          count: "0",
+          toDayCount: "2",
+          toDayTime: "0",
         },
         {
-          name: "已预约",
+          name: "未完成工单数",
-          count: "17",
+          count: "0",
+          toDayCount: "2",
+          toDayTime: "0",
         },
         {
-          name: "法官办公室",
+          name: "未分配工单数",
-          count: "86",
+          count: "0",
+          toDayCount: "2",
+          toDayTime: "0",
         },
-      ], // 智慧法庭小房子
+      ],
-       houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
+      selectList: [
+        {
+          name: "日期",
+          list: [
+            {
+              label: "日期",
+              value: "1",
+            },
+            {
+              label: "日期2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "派单人员",
+          list: [
+            {
+              label: "派单人员",
+              value: "1",
+            },
+            {
+              label: "派单人员2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "工单状态",
+          list: [
+            {
+              label: "工单状态",
+              value: "1",
+            },
+            {
+              label: "工单状态2",
+              value: "2",
+            },
+          ],
+        },
+        {
+          name: "工单类型",
+          list: [
+            {
+              label: "工单类型",
+              value: "1",
+            },
+            {
+              label: "工单类型2",
+              value: "2",
+            },
+          ],
+        },
+      ], //案件列表选择器
+      distributeLeafletsList: [
+        {
+          id: "1",
+          time: "2023.1.13",
+          user: "方强",
+          type: "设备维修",
+          receiveTime: "2023.1.13",
+          status: "已完成",
+        },
+        {
+          id: "2",
+          time: "2023.1.13",
+          user: "方强",
+          type: "设备维修",
+          receiveTime: "2023.1.13",
+          status: "已完成",
+        },
+        {
+          id: "3",
+          time: "2023.1.13",
+          user: "方强",
+          type: "设备维修",
+          receiveTime: "2023.1.13",
+          status: "已完成",
+        },
+        {
+          id: "4",
+          time: "2023.1.13",
+          user: "方强",
+          type: "设备维修",
+          receiveTime: "2023.1.13",
+          status: "已完成",
+        },
+      ],
     };
   },
-  mounted() {},
+  mounted() {
-  methods: {},
+    this.workOrderEcharts();
+  },
+  methods: {
+    workOrderEcharts() {
+      var myChart = this.$echarts.init(
+        document.getElementById("workOrderEcharts")
+      );
+      let option = {
+        grid: {
+          top: "18%",
+          // // left: '15%',
+          // // right: '5%',
+          bottom: "10%",
+        },
+        tooltip: {
+          trigger: "axis",
+          showContent: false,
+          axisPointer: {
+            type: "line",
+            lineStyle: {
+              type: "solid",
+              color: "rgba(255, 255, 255, .5)",
+            },
+            label: {
+              show: true,
+              color: "#fff",
+              fontSize: "0.8rem",
+              fontWeight: 600,
+              backgroundColor: "rgba(0, 0, 0, 0)",
+            },
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            name: "天数",
+            //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",
+              },
+            },
+            boundaryGap: false,
+            data: [1, 2, 3, 4, 5, 6],
+          },
+        ],
+        yAxis: [
+          {
+            name: "工单",
+            //x轴坐标点
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            //x轴坐标线样式
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: "0.5rem",
+            },
+            //x轴线
+            splitLine: {
+              show: true,
+              lineStyle: {
+                // type: [5, 10],
+                dashOffset: 10,
+                color: "#fff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            showSymbol: false,
+            yAxisIndex: 0,
+            lineStyle: {
+              width: 4,
+              color: "rgb(0,170,194)",
+            },
+            label: {
+              show: true,
+              textStyle: {
+                color: "#FFFFFF",
+                fontSize: "0.8rem",
+              },
+              position: "top",
+              formatter: function (p) {
+                return p.value > 0 ? p.value : "";
+              },
+            },
+            itemStyle: {
+              color: "#FFFFFF",
+              borderColor: "#FFFFFF",
+              borderWidth: 6,
+            },
+            data: ["40", "60", "50", "50", "80", "20"],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
   watch: {},
   components: {},
 };
@@ -54,7 +361,7 @@ export default {
 
 <style lang="less" scoped>
 @fontsize: 0.6rem;
-.courtMain {
+.operationMaintenance {
   width: 100%;
   height: 100%;
   display: flex;
@@ -62,115 +369,163 @@ 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%;
+    padding: 0.5% 0.3% 0.5% 0.3%;
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
     background: url(../assets/images/leftKuang.png) no-repeat;
     background-size: 100% 100%;
-    .leftOne {
+    .workOrder {
       width: 100%;
-      height: 25%;
+      height: 15%;
-      .courtHouse {
+      display: flex;
-        height: calc(100% - 30%);
+      justify-content: center;
+      align-items: center;
+      .todayCount {
+        background: url(../assets/images/gongDan/gongDanBack.png) no-repeat;
+        background-size: 100% 100%;
+        width: 62%;
+        height: 82%;
+        color: #fff;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        align-content: space-around;
+      }
+    }
+    .workCount {
       width: 100%;
-        display: flex;
+      height: 30%;
-          flex-wrap: nowrap;
+      color: #fff;
-          justify-content: space-around;
+      #workOrderEcharts {
-          align-items: center;
-        .courtData{
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            height: 85%;
-            width: 12%;
-             .blueHouse {
-              background: url(../assets/images/blueHouse.png) no-repeat;
-              background-size: 100% 100%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-top: 10%;
-            }
-            .redHouse {
-              background: url(../assets/images/redHouse.png) no-repeat;
-              background-size: 100% 100%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-top: 10%;
-            }
-            .yellowHouse {
-              background: url(../assets/images/yellowHouse.png) no-repeat;
-              background-size: 100% 100%;
-              display: flex;
-              align-items: center;
-              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%;
-            }
-        }
-      }
-    }
-    .leftTwo {
         width: 100%;
-      height: 35%;
+        height: 90%;
-      position: relative;
-      #caseEcharts{
-          width: 100%;
-          height: calc(100% - 16%);
-          border: 1px solid blue;
       }
     }
-    .leftThree {
+    .workList {
       width: 100%;
       height: 40%;
-      border: 1px solid white;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-around;
+      .workContent {
+        width: 45%;
+        height: 35%;
+        border: 1px solid rgb(9, 196, 217);
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 0.7rem;
+      }
     }
   }
   .right {
-    width: 25.5%;
+    width: 24.7%;
     height: 95%;
     padding: 0.5% 0.3% 1% 0.3%;
     box-sizing: border-box;
-    display: flex;
+    // display: flex;
-    flex-wrap: wrap;
+    // flex-wrap: wrap;
     background: url(../assets/images/leftKuang.png) no-repeat;
     background-size: 100% 100%;
+    .selectList {
+      width: 100%;
+      height: 15%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      .selectChange {
+        width: 23%;
+        height: 20%;
+        margin-left: 11%;
+        /deep/ .el-select {
+          width: 100%;
+          height: 100%;
+          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: rgba(0, 23, 28, 0.3);
+          border: 1px solid rgb(1, 176, 202);
+          border-radius: 5px;
+          // left: -3px !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;
+        }
+      }
+    }
+    .workOrderList {
+      width: 100%;
+      height: calc(100% - 20%);
+      padding: 0 7% 0 3%;
+      box-sizing: border-box;
+      .workContent {
+        width: 100%;
+        height: 100%;
+        background: url(../assets/images/warnDottedLine.png) no-repeat;
+        background-size: 100% 100%;
+        overflow: auto;
+        .workContentList {
+          width: 100%;
+          height: 35%;
+          border: 1px dashed #fff;
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          padding: 0 3%;
+          box-sizing: border-box;
+          .distributeLeaflets {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.7rem;
+            .distributeLeafletsValue {
+              width: 30%;
+              height: 100%;
+              background: url("../assets/images/gongDan/eqBtnAc.png") no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    }
   }
 }
 .title {
   width: 100%;
-  height: 30%;
+  height: 5%;
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.7rem;
-  display: flex;
-  align-items: center;
-  padding-left: 12%;
-  box-sizing: border-box;
-}
-.caseTitle{
-  width: 23%;
-  height: 10%;
-  background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
-  background-size: 100% 100%;
-  color: #fff;
   font-size: 0.8rem;
   display: flex;
   align-items: center;
-  padding-left: 5%;
+  padding-left: 12%;
   box-sizing: border-box;
-  margin-top: 2%; 
 }
 </style>

src/views/security.vue

@@ -1,60 +1,273 @@
 <template>
-  <div class="courtMain">
+  <div class="securityMain">
     <div class="left">
       <div class="leftOne">
-        <div class="title">智慧安防</div>
+        <div class="title">安防统计数据</div>
-        <div class="courtHouse">
+        <div class="security">
-           
+          <div class="securitySupervision">
+            安防监管
+          </div>
+          <div class="securityCount">
+            <div class="securityList" v-for="(item,index) in securityList" :key="index">
+              <span>{{item.name}}</span>
+              <span>{{item.count}}</span>
+            </div>
+            <!-- <img src="../"/> -->
+          </div>
         </div>
       </div>
       <div class="leftTwo">
-          <div class="caseTitle">
+        <div class="title" style="height:8%">预警视频监控联动</div>
-              
+        <div class="warnVideo">
+          <!-- <div class="warnCamera">
+            <img src="../assets/images/camera.png" style="width:100%;height:100%"/>
+          </div> -->
+          <div class="warnCameraList">
+            <div style="width:45%;height:30%"  v-for="(item,index) in warnCameraList" :key="index" @click="videoChange(index)">
+              <img :src="item.icon" style="width:100%;height:100%"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="rightOne">
+        <div class="title" style="height:10%">火灾报警管理</div>
+        <div class="fire">
+          <div
+              class="warnList"
+              v-for="(item, index) in fireWarnList"
+              :key="index"
+            >
+              <img :src="item.icon" />
+              <div
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  align-items: flex-start;
+                  width: 65%;
+                "
+              >
+                <span
+                  style="
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >报警时间:<span style="margin-left: 5%">{{
+                    item.time
+                  }}</span></span
+                >
+                <span
+                  style="
+                    margin-top: 3%;
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >设备定位:<span style="color: rgb(0,255,255); margin-left: 5%">{{
+                    item.position
+                  }}</span></span
+                >
+                <span
+                  style="
+                    margin-top: 3%;
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
+                    item.status
+                  }}</span></span
+                >
+              </div>
+            </div>
+        </div>
+      </div>
+      <div class="rightTwo">
+        <div class="title" style="height:10%">安防报警管理</div>
+        <div class="police">
+          <div
+              class="warnList"
+              v-for="(item, index) in policeList"
+              :key="index"
+            >
+            <span>{{ item.id }}</span>
+              <img :src="item.icon" />
+              <div
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  align-items: flex-start;
+                  width: 65%;
+                "
+              >
+                <span
+                  style="
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >报警时间:<span style="margin-left: 5%">{{
+                    item.time
+                  }}</span></span
+                >
+                <span
+                  style="
+                    margin-top: 3%;
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >设备内容:<span style="color: rgb(0,255,255); margin-left: 5%">{{
+                    item.content
+                  }}</span></span
+                >
+                <span
+                  style="
+                    margin-top: 3%;
+                    display: flex;
+                    width: 100%;
+                    justify-content: flex-start;
+                  "
+                  >报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
+                    item.status
+                  }}</span></span
+                >
+              </div>
+            </div>
         </div>
-          <div id="caseEcharts"></div>
       </div>
-      <div class="leftThree"></div>
     </div>
-    <div class="right"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "court",
+  name: "security",
   data() {
     return {
-        courtList: [
+        securityList: [
           {
-          name: "空闲中",
+          name: "",
+          count: "",
+        },
+        {
+          name: "摄像头总数",
+          count: "609",
+        },
+        {
+          name: "在线数量",
+          count: "602",
+        },
+        {
+          name: "离线数量",
           count: "7",
         },
         {
-          name: "已开庭",
+          name: "报警数",
-          count: "15",
+          count: "0",
         },
          {
-          name: "已预约",
+          name: "昨日报警数",
-          count: "17",
+          count: "0",
+        },
+      ],
+      warnCameraList:[
+        {
+          icon:require("../assets/images/anFang/videoAc.png")
         },
         {
-          name: "法官办公室",
+          icon:require("../assets/images/anFang/video.png")
-          count: "86",
         },
-      ], // 智慧法庭小房子
+        {
-       houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
+          icon:require("../assets/images/anFang/video.png")
+        },
+        {
+          icon:require("../assets/images/anFang/video.png")
+        },
+        {
+          icon:require("../assets/images/anFang/video.png")
+        },
+        {
+          icon:require("../assets/images/anFang/video.png")
+        },
+      ],
+       fireWarnList: [
+        {
+          icon: require("../assets/images/jieNengImg/warnBlue.png"),
+          time: "2023年03月12日 15:45:10",
+          position: "烟感",
+          status: "已解除",
+        },
+        {
+          icon: require("../assets/images/jieNengImg/warnBlue.png"),
+          time: "2023年03月12日 15:45:10",
+          position: "烟感",
+          status: "已解除",
+        },
+        {
+          icon: require("../assets/images/jieNengImg/warnWhite.png"),
+          time: "2023年03月12日 15:45:10",
+          position: "烟感",
+          status: "已解除",
+        },
+        {
+          icon: require("../assets/images/jieNengImg/warnBlue.png"),
+          time: "2023年03月12日 15:45:10",
+          position: "烟感",
+          status: "已解除",
+        },
+      ], //故障数组
+      policeList:[
+        {
+          id:'1',
+          icon: require("../assets/images/anFang/exclamatory.png"),
+          time: "2023年03月12日 15:45:10",
+          content: "306门禁故障",
+          status: "已解除",
+        },
+        {
+          id:'2',
+          icon: require("../assets/images/anFang/exclamatory.png"),
+          time: "2023年03月12日 15:45:10",
+          content: "201门禁故障",
+          status: "已解除",
+        },
+        {
+          id:'3',
+          icon: require("../assets/images/anFang/exclamatory.png"),
+          time: "2023年03月12日 15:45:10",
+          content: "206门禁故障",
+          status: "已解除",
+        },
+        {
+          id:'4',
+          icon: require("../assets/images/anFang/exclamatory.png"),
+          time: "2023年03月12日 15:45:10",
+          content: "106门禁故障",
+          status: "已解除",
+        },
+      ]
     };
   },
   mounted() {},
-  methods: {},
+  methods: {
+    videoChange(index){
+      this.warnCameraList.forEach((item,i) => {
+        item.icon = require("../assets/images/anFang/video.png")
+      });
+      this.warnCameraList[index].icon = require("../assets/images/anFang/videoAc.png")
+    }
+  },
   watch: {},
   components: {},
 };
 </script>
 
 <style lang="less" scoped>
-@fontsize: 0.6rem;
+@fontsize: 0.7rem;
-.courtMain {
+.securityMain {
   width: 100%;
   height: 100%;
   display: flex;
@@ -62,7 +275,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;
@@ -72,73 +285,77 @@ export default {
     background-size: 100% 100%;
     .leftOne {
       width: 100%;
-      height: 25%;
+      height: 35%;
-      .courtHouse {
+      display: flex;
-        height: calc(100% - 30%);
+      flex-wrap: wrap;
+      align-items: flex-end;
+      align-content: space-between;
+      .security{
+        height: calc(100% - 25%);
         width: 100%;
+         padding-right: 5%;
+         box-sizing: border-box;
          display: flex;
-          flex-wrap: nowrap;
+         justify-content: flex-end;
-          justify-content: space-around;
+         flex-wrap: wrap;
-          align-items: center;
+         .securitySupervision{
-        .courtData{
+           width: 50%;
-            display: flex;
+           height: 12%;
-            flex-direction: column;
+           background: url("../assets/images/anFang/securityBack.png") no-repeat;
-            align-items: center;
-            height: 85%;
-            width: 12%;
-             .blueHouse {
-              background: url(../assets/images/blueHouse.png) no-repeat;
            background-size: 100% 100%;
-              display: flex;
+           color: #fff;
-              align-items: center;
+           font-size: @fontsize;
-              justify-content: center;
-              margin-top: 10%;
          }
-            .redHouse {
+         .securityCount{
-              background: url(../assets/images/redHouse.png) no-repeat;
+           width: 100%;
-              background-size: 100% 100%;
+           height: calc(100% - 12%);
+           position: relative;
+           display: flex;
+          justify-content: flex-end;
+          flex-wrap: wrap;
+          align-items: center;
+           .securityList{
+             width: 30%;
+             height: 20%;
+             color: #fff;
+             margin-left: 2%;
              display: flex;
              align-items: center;
              justify-content: center;
-              margin-top: 10%;
+             flex-direction: column
-            }
-            .yellowHouse {
-              background: url(../assets/images/yellowHouse.png) no-repeat;
-              background-size: 100% 100%;
-              display: flex;
-              align-items: center;
-              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%;
            }
          }
       }
     }
     .leftTwo {
       width: 100%;
-      height: 35%;
+      height: 65%;
-      position: relative;
+      .warnVideo{
-      #caseEcharts{
+        height: calc(100% - 8%);
         width: 100%;
-          height: calc(100% - 16%);
+        padding:0 3%;
-          border: 1px solid blue;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: center;
+        // .warnCamera{
+        //   width: 100%;
+        //   height: 40%;
+        //   border: 3px solid rgb(1, 176, 202);
+        // }
+        .warnCameraList{
+          height: 90%;
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-around;
         }
       }
-    .leftThree {
-      width: 100%;
-      height: 40%;
-      border: 1px solid white;
     }
   }
   .right {
-    width: 25.5%;
+    width: 24.7%;
     height: 95%;
     padding: 0.5% 0.3% 1% 0.3%;
     box-sizing: border-box;
@@ -146,15 +363,61 @@ export default {
     flex-wrap: wrap;
     background: url(../assets/images/leftKuang.png) no-repeat;
     background-size: 100% 100%;
+    .rightOne{
+      width: 100%;
+      height: 50%;
+          .fire{
+            height: calc(100% - 10%);
+            width: 100%;
+            overflow: auto;
+            .warnList {
+            height: 32%;
+            width: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: space-around;
+            padding-right: 20%;
+            box-sizing: border-box;
+            color: #fff;
+          }
+          }
+          ::-webkit-scrollbar{
+            display: none;
+          }
+    }
+    .rightTwo{
+      width: 100%;
+      height: 50%;
+      .police{
+         height: calc(100% - 10%);
+            width: 100%;
+            overflow: auto;
+            .warnList {
+            height: 32%;
+            width: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: space-around;
+            padding-right: 20%;
+            box-sizing: border-box;
+            color: #fff;
+          }
+      }
+       ::-webkit-scrollbar{
+            display: none;
+          }
+    }
   }
 }
 .title {
   width: 100%;
-  height: 30%;
+  height: 13%;
   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%;