优化页面

src/components/Sidebar.vue

@@ -287,6 +287,33 @@ export default {
           ],
         },
       ],
+      hnjcitems: [
+        {
+          icon: "el-icon-s-home",
+          index: "stritl",
+          title: "首页",
+        },
+        {
+          icon: "el-icon-camera",
+          index: "/realTimeMonitor",
+          title: "实时监控",
+        },
+        {
+          icon: "el-icon-film",
+          index: "/pictureRotation",
+          title: "图片轮巡",
+        },
+        {
+          icon: "el-icon-bell",
+          index: "photoAlarm",
+          title: "告警处理",
+        },
+        {
+          icon: "el-icon-search",
+          index: "/realTimeSearch",
+          title: "历史图片",
+        },
+      ],
 
       role: "",
     };
@@ -313,6 +340,8 @@ export default {
       this.items = this.items1;
     } else if (this.role == 2) {
       this.items = this.items2;
+    } else if (this.role == 4) {
+      this.items = this.hnjcitems;
     }
 
     console.log(this.items);

src/router/index.js

@@ -126,6 +126,12 @@ const routes = [
           ),
         meta: { title: "拍照时间表设置", icon: "" },
       },
+      {
+        path: "/waterMark",
+        component: () =>
+          import(/* webpackChunkName: "tabs" */ "../views/waterMark/index.vue"),
+        meta: { title: "水印下发", icon: "" },
+      },
     ],
   },
 

src/utils/api/index.js

@@ -667,3 +667,15 @@ export function updateTermCamera(data) {
     params: data,
   });
 }
+
+//郑州检测左侧树状结构接口
+export function getzzdyTreeList(data) {
+  return request({
+    url: "/api/getzzdyTreeList",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}

src/views/photographicDevice/components/imageCapture.vue

@@ -799,7 +799,7 @@ export default {
       }
 
       if (val.protocol == 65281) {
-        this.$set(this.setForm, "resolution", this.ratiolist[12].id);
+        this.$set(this.setForm, "resolution", this.ratiolist[5].id);
         this.$set(this.setForm, "luminance", 50);
         this.$set(this.setForm, "contrast", 50);
         this.$set(this.setForm, "saturation", 50);

src/views/photographicDevice/components/parameterSetDialog.vue

@@ -306,6 +306,7 @@
                     v-model="channelId"
                     placeholder="请选择"
                     class="mr20"
+                    @change="waterChange"
                   >
                     <el-option
                       v-for="item in accesslist"
@@ -1228,8 +1229,12 @@ export default {
         });
       }
     },
-    waterhandleClick() {
+    waterChange() {
+      console.log("点击了切换");
       this.waterForm = {};
+    },
+    waterhandleClick() {
+      //this.waterForm = {};
       this.channelId = 1;
       clearInterval(this.timer);
       this.i = 0;

src/views/realTimeMonitor/components/carouselChart.vue

@@ -534,7 +534,7 @@ export default {
       overflow-y: hidden;
       scroll-behavior: smooth;
       .smallPic {
-        width: 18%;
+        width: 19.2%;
         border: 3px solid transparent;
         box-sizing: border-box;
         flex-shrink: 0;

src/views/realTimeMonitor/components/setschedule.vue

@@ -232,6 +232,7 @@ import {
   setTermCamera,
   getTermCameraRequest,
   getTermStatus,
+  setScheduleRulel,
 } from "@/utils/api/index";
 export default {
   props: {
@@ -624,6 +625,7 @@ export default {
     //xympadmn --act=schedule [0xCA] --flag=[Request Set Flag, default is set=1, 0: request] --channel=[Channel No] --group=[Group] --hour1=[Hour 1] --min1=[Minute 1] --preset1=[Preset 1]
     submitForm() {
       console.log(this.currentTimeRule);
+      let timeArrList = [];
       if (
         this.areaData.protocol == "65285" &&
         this.currentTimeRule.listTime.length > 1
@@ -721,7 +723,24 @@ export default {
             );
           }
           console.log(params);
-          this.setTermFnRule(params);
+          for (var k = 0; k < timeArr.length; k++) {
+            //console.log(moment(dayArr[k]).hour());
+            timeArrList.push({
+              hour: this.$moment(timeArr[k]).hour(),
+              minute: this.$moment(timeArr[k]).minute(),
+              preset: 255,
+            });
+          }
+          console.log(timeArrList);
+          var parmsobj = {
+            termid: this.areaData.id,
+            channelid: this.timeChannel,
+            offset: this.setNum,
+            list: timeArrList,
+          };
+          console.log(parmsobj);
+          this.setTimeRuleJava(parmsobj); //使用java接口调用下发时间表
+          //this.setTermFnRule(params);
         } else {
           this.sureloading = false;
           this.$message({
@@ -733,6 +752,33 @@ export default {
         }
       });
     },
+    //使用接口下发时间表会写进数据库
+    setTimeRuleJava(parmsobj) {
+      console.log(parmsobj);
+      setScheduleRulel({
+        scheduleid: this.currentTimeRule.id,
+        list: [parmsobj],
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.list[0].requestid;
+          console.log(this.requestid);
+          clearInterval(this.timer);
+          this.deviceTimer = window.setInterval(() => {
+            this.getinfoRules();
+            this.deviceNum++;
+            console.log(this.deviceNum, this.deviceNum * 1000);
+          }, 1000 * this.deviceNum);
+        })
+        .catch((err) => {
+          // this.$message({
+          //   duration: 1500,
+          //   showClose: true,
+          //   message: "添加失败",
+          //   type: "error",
+          // });
+        });
+    },
     //下发时间表
     setTermFnRule(dataParams) {
       setTermCamera({

src/views/realTimeMonitor/components/siderBar.vue

@@ -51,7 +51,10 @@
         <span v-else-if="node.level === 2">
           <span class="iconfont icon-dianlihangye" style="margin-right: 6px">
           </span>
-          <span>{{ node.label }} </span>
+          <span
+            >{{ node.label }}
+            <span class="num">({{ data.list.length }}) </span></span
+          >
         </span>
         <span v-else>
           <span
@@ -77,7 +80,7 @@
   </div>
 </template>
 <script>
-import { getdyTreeListJoggle } from "@/utils/api/index";
+import { getdyTreeListJoggle, getzzdyTreeList } from "@/utils/api/index";
 export default {
   data() {
     return {
@@ -93,6 +96,7 @@ export default {
       },
       currentData: {}, //当前选中的数据
       currentNodekey: "", //默认选中的节点树,
+      role: "",
     };
   },
   components: {},
@@ -109,6 +113,9 @@ export default {
       JSON.parse(localStorage.getItem("radio")) !== null
         ? JSON.parse(localStorage.getItem("radio"))
         : -1; //获取保存的radio
+    this.role = localStorage.getItem("role");
+    console.log("用户管理");
+    console.log(this.role);
     this.getRadio(); //获取列表在线离线全部
     this.getLineTreeList(); //获取树状图
   },
@@ -126,34 +133,65 @@ export default {
       if (this.filterText !== "") {
         this.$refs.tree.filter(this.filterText);
       } else {
-        getdyTreeListJoggle({ type: this.zzradio })
+        if (this.role == 4) {
-          .then((res) => {
+          getzzdyTreeList({ type: this.zzradio })
-            console.log(res);
+            .then((res) => {
-            this.lineTreeData = res.data.list;
+              console.log(res);
-            this.onlineNum = res.data.onlineNum;
+              this.lineTreeData = res.data.list;
-            this.totalNum = res.data.totalNum;
+              this.onlineNum = res.data.onlineNum;
-            if (this.zzradio == 0) {
+              this.totalNum = res.data.totalNum;
-              console.log("装置为离线");
+              if (this.zzradio == 0) {
-              this.$nextTick(() => {
+                console.log("装置为离线");
-                console.log(this.lineTreeData);
+                this.$nextTick(() => {
-                this.currentData = this.lineTreeData[0];
+                  console.log(this.lineTreeData);
-                console.log(this.currentData);
+                  this.currentData = this.lineTreeData[0];
-                this.handleNodeClick(this.currentData);
+                  console.log(this.currentData);
+                  this.handleNodeClick(this.currentData);
+                  this.$nextTick(() => {
+                    this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+                    this.scrollView();
+                  });
+                });
+              } else {
                 this.$nextTick(() => {
                   this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
                   this.scrollView();
                 });
-              });
+              }
-            } else {
+            })
-              this.$nextTick(() => {
+            .catch((err) => {
-                this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+              console.log(err); //代码错误、请求失败捕获
-                this.scrollView();
+            });
-              });
+        } else {
-            }
+          getdyTreeListJoggle({ type: this.zzradio })
-          })
+            .then((res) => {
-          .catch((err) => {
+              console.log(res);
-            console.log(err); //代码错误、请求失败捕获
+              this.lineTreeData = res.data.list;
-          });
+              this.onlineNum = res.data.onlineNum;
+              this.totalNum = res.data.totalNum;
+              if (this.zzradio == 0) {
+                console.log("装置为离线");
+                this.$nextTick(() => {
+                  console.log(this.lineTreeData);
+                  this.currentData = this.lineTreeData[0];
+                  console.log(this.currentData);
+                  this.handleNodeClick(this.currentData);
+                  this.$nextTick(() => {
+                    this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+                    this.scrollView();
+                  });
+                });
+              } else {
+                this.$nextTick(() => {
+                  this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+                  this.scrollView();
+                });
+              }
+            })
+            .catch((err) => {
+              console.log(err); //代码错误、请求失败捕获
+            });
+        }
       }
     },
     //树状图搜索
@@ -173,34 +211,65 @@ export default {
     //获取树状图列表
     getLineTreeList() {
       console.log(this.zzradio);
-      getdyTreeListJoggle({ type: this.zzradio })
+      if (this.role == 4) {
-        .then((res) => {
+        getzzdyTreeList({ type: this.zzradio })
-          this.lineTreeData = res.data.list;
+          .then((res) => {
+            this.lineTreeData = res.data.list;
 
-          this.onlineNum = res.data.onlineNum;
+            this.onlineNum = res.data.onlineNum;
-          this.totalNum = res.data.totalNum;
+            this.totalNum = res.data.totalNum;
-          this.currentData = JSON.parse(localStorage.getItem("currentData"));
+            this.currentData = JSON.parse(localStorage.getItem("currentData"));
-          if (this.lineTreeData[0].list[0].list.length > 0) {
+            if (this.lineTreeData[0].list[0].list.length > 0) {
-          }
+            }
-          if (
+            if (
-            this.currentData !== null &&
+              this.currentData !== null &&
-            Object.keys(this.currentData).length !== 0
+              Object.keys(this.currentData).length !== 0
-          ) {
+            ) {
-            this.currentNodekey = this.currentData.id;
+              this.currentNodekey = this.currentData.id;
-            this.handleNodeClick(this.currentData);
+              this.handleNodeClick(this.currentData);
-          } else {
+            } else {
-            this.currentData = this.lineTreeData[0]; //第一个选中的数据
+              this.currentData = this.lineTreeData[0]; //第一个选中的数据
-            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
-            this.handleNodeClick(this.currentData);
+              this.handleNodeClick(this.currentData);
-          }
+            }
-          this.$nextTick(() => {
+            this.$nextTick(() => {
-            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-            this.scrollView();
+              this.scrollView();
+            });
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
           });
-        })
+      } else {
-        .catch((err) => {
+        getdyTreeListJoggle({ type: this.zzradio })
-          console.log(err); //代码错误、请求失败捕获
+          .then((res) => {
-        });
+            this.lineTreeData = res.data.list;
+
+            this.onlineNum = res.data.onlineNum;
+            this.totalNum = res.data.totalNum;
+            this.currentData = JSON.parse(localStorage.getItem("currentData"));
+            if (this.lineTreeData[0].list[0].list.length > 0) {
+            }
+            if (
+              this.currentData !== null &&
+              Object.keys(this.currentData).length !== 0
+            ) {
+              this.currentNodekey = this.currentData.id;
+              this.handleNodeClick(this.currentData);
+            } else {
+              this.currentData = this.lineTreeData[0]; //第一个选中的数据
+              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+              this.handleNodeClick(this.currentData);
+            }
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+              this.scrollView();
+            });
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
+          });
+      }
     },
 
     //点击当前选中的treenode
@@ -292,6 +361,10 @@ export default {
         display: flex;
         display: inline-table;
         overflow: hidden;
+        align-items: center;
+      }
+      .num {
+        color: #169e8c;
       }
     }
   }
@@ -308,6 +381,10 @@ export default {
       span {
         display: flex;
         //overflow: hidden;
+        align-items: center;
+        .num {
+          color: #fff;
+        }
         .iconfont {
           //width: 30px;
           display: inline-table;

src/views/realTimeMonitor/components/takePicButton.vue

@@ -118,7 +118,7 @@ export default {
           this.statusTimer = window.setInterval(() => {
             this.getTakePicStatus(res.data);
             this.statusNum++;
-          }, 3000);
+          }, 5000);
         })
         .catch((err) => {});
     },

src/views/system/globalTools/index.vue

@@ -50,6 +50,9 @@
         >
       </el-card>
     </div>
+    <div class="" v-for="item in infoMl">
+      {{ item }}
+    </div>
   </div>
 </template>
 <script>
@@ -70,11 +73,47 @@ export default {
       probList: [],
       tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
       channel: "",
+      infoMl: [],
+      tongdao: ["1", "2", "3", "4"],
+      cmdidArr: [
+        "12M10010107139801",
+        "12M10010107139802",
+        "12M10010107139803",
+        "12M10010107139804",
+        "12M10010107139805",
+        "12M10010107139806",
+        "12M10010107139807",
+        "12M10010107139808",
+        "12M10010107139809",
+      ],
+      leftWater: [
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+        "欣影-2023-10-08",
+      ],
+      rightWater: [
+        "安庆- 输电运检一班-220kV文邓4C70线#052大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
+      ],
     };
   },
   created() {
     this.getalarmList();
     this.getmark();
+    this.getWater();
   },
   methods: {
     //获取图片绘制状态
@@ -156,6 +195,37 @@ export default {
           console.log(err);
         });
     },
+    getWater() {
+      for (let j = 0; j < this.tongdao.length; j++) {
+        for (let i = 0; i < this.cmdidArr.length; i++) {
+          // console.log(this.cmdidArr[i]);
+          // console.log(this.leftWater[i]);
+          // console.log(this.rightWater[i]);
+          var a =
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
+            this.cmdidArr[i] +
+            " --flag=1 --channel=" +
+            this.tongdao[j] +
+            ' --leftBottom="' +
+            this.leftWater[i] +
+            '" --rightBottom="' +
+            this.rightWater[i] +
+            '" --clientid=5 --reqid=TS; sleep 0.5';
+          this.infoMl.push(a);
+          console.log(
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
+              this.cmdidArr[i] +
+              " --flag=1 --channel=" +
+              this.tongdao[j] +
+              '" --leftBottom="' +
+              this.leftWater[i] +
+              '" --rightBottom="' +
+              this.rightWater[i] +
+              '" --clientid=5 --reqid=TS; sleep 0.5'
+          );
+        }
+      }
+    },
   },
 };
 </script>

src/views/waterMark/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="waterMarkBox">
+    <div class="setWater">
+      <h4>批量水印下发命令生成</h4>
+      <div class="waterForm">
+        <div class="channelBox">
+          <h5>选择通道</h5>
+          <el-checkbox-group
+            v-model="checkList"
+            class="groupCheck"
+            @change="handleCheck"
+          >
+            <el-checkbox
+              v-for="item in channelList"
+              :label="item.id"
+              :key="item.id"
+              >{{ item.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </div>
+        <div class="cmdidBox">
+          <h5>装置编号</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入装置编号"
+            v-model="cmdidtextarea"
+          >
+          </el-input>
+        </div>
+        <div class="leftWaterBox">
+          <h5>左侧水印</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入左侧水印"
+            v-model="leftWatertextarea"
+          >
+          </el-input>
+        </div>
+        <div class="rghtWaterBox">
+          <h5>右侧水印</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入右侧水印"
+            v-model="rightWatertextarea"
+          >
+          </el-input>
+        </div>
+      </div>
+      <el-button type="primary" @click="handleSure">确 定</el-button>
+      <el-button type="primary" @click="copyShare">复 制</el-button>
+      <el-button class="mlspan" type="text"
+        ><i>{{ issueCommands.length }}</i
+        >条命令</el-button
+      >
+      <div class="commandsBox" id="copy-content">
+        <div class="aaa" v-for="item in issueCommands" v-html="item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      channelList: [
+        {
+          id: 1,
+          name: "通道1",
+        },
+        {
+          id: 2,
+          name: "通道2",
+        },
+        {
+          id: 3,
+          name: "通道3",
+        },
+        {
+          id: 4,
+          name: "通道4",
+        },
+      ],
+      checkList: [], //选中的通道
+      cmdidtextarea: "", //输入的值
+      cmdidArr: [],
+      leftWatertextarea: "", //输入的值
+      leftWaterArr: [],
+      rightWatertextarea: "", //输入的值
+      rightWaterArr: [],
+      issueCommands: [], //打印出来下发命令
+    };
+  },
+  created() {
+    //this.getWater();
+  },
+  methods: {
+    handleCheck(val) {
+      console.log(this.checkList);
+    },
+    handleSure() {
+      console.log(this.checkList);
+      if (this.checkList.length == 0) {
+        this.$message({
+          showClose: true,
+          message: "请选择通道号",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.cmdidtextarea !== "") {
+        this.cmdidArr = [...this.cmdidtextarea.trim().split("\n")]; //装置编号
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入装置编号",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.leftWatertextarea !== "") {
+        this.leftWaterArr = [...this.leftWatertextarea.trim().split("\n")]; //左侧水印
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入左侧水印",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.rightWatertextarea !== "") {
+        this.rightWaterArr = [...this.rightWatertextarea.trim().split("\n")]; //右侧水印
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入右侧水印",
+          type: "warning",
+        });
+        return;
+      }
+
+      console.log(this.cmdidArr);
+      console.log(this.leftWaterArr);
+      console.log(this.rightWaterArr);
+      this.issueCommands = [];
+      this.getWater();
+    },
+    getWater() {
+      for (let j = 0; j < this.checkList.length; j++) {
+        for (let i = 0; i < this.cmdidArr.length; i++) {
+          var command =
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
+            this.cmdidArr[i] +
+            " --flag=1 --channel=" +
+            this.checkList[j] +
+            ' --leftBottom="' +
+            this.leftWaterArr[i] +
+            '" --rightBottom="' +
+            this.rightWaterArr[i] +
+            '" --clientid=5 --reqid=TS;' +
+            "<br/>" +
+            "sleep 1;" +
+            "<br/>" +
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=capture --cmdid=" +
+            this.cmdidArr[i] +
+            " --channel=" +
+            this.checkList[j] +
+            " --preset=255 --type=0;" +
+            "<br/>" +
+            "sleep 1;";
+          this.issueCommands.push(command); //把命令push
+        }
+      }
+    },
+    copyShare() {
+      let div = document.getElementById("copy-content");
+      let range = "";
+      if (document.body.createTextRange) {
+        //兼容ie
+        range = document.body.createTextRange();
+        range.moveToElementText(div);
+        range.select();
+      } else if (window.getSelection) {
+        // 兼容非IE，比如Firefox/chrome
+        let selection = window.getSelection();
+        range = document.createRange();
+        range.selectNodeContents(div);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      document.execCommand("Copy"); // 执行浏览器复制命令
+      console.log("已复制好，可贴粘");
+    },
+  },
+};
+</script>
+<style lang="less">
+.waterMarkBox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+  .setWater {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+    .waterForm {
+      width: 100%;
+      height: 50%;
+      margin-top: 16px;
+      // background: #fcc;
+      display: flex;
+      .channelBox {
+        width: 150px;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        margin-right: 8px;
+        .groupCheck {
+          display: flex;
+          flex-direction: column;
+          margin-top: 12px;
+          .el-checkbox {
+            height: 32px;
+            line-height: 32px;
+          }
+        }
+      }
+      .cmdidBox {
+        width: 250px;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        margin-right: 8px;
+        .el-textarea {
+          margin-top: 12px;
+        }
+      }
+      .leftWaterBox {
+        margin-right: 8px;
+      }
+      .leftWaterBox,
+      .rghtWaterBox {
+        flex: 1;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        .el-textarea {
+          margin-top: 12px;
+        }
+      }
+    }
+    .el-button {
+      margin-top: 4px;
+    }
+    .commandsBox {
+      width: auto;
+      height: calc(50% - 106px);
+      margin-top: 8px;
+      border: 1px solid #fcc;
+      overflow: auto;
+      padding: 8px;
+      border-radius: 4px;
+    }
+    .mlspan {
+      //   margin-left: 24px;
+      //   height: 32px;
+      //   line-height: 32px;
+      //   margin-top: 4px;
+      //   display: inline-block;
+      font-size: 14px;
+      color: #000;
+      cursor: default;
+      i {
+        color: #169e8c;
+        font-weight: bold;
+        font-style: normal;
+      }
+    }
+  }
+}
+</style>