Kaynağa Gözat

调整lenged样式

YaolongHan 4 yıl önce
ebeveyn
işleme
631ec104d2
4 değiştirilmiş dosya ile 368 ekleme ve 324 silme
  1. 1 1
      package.json
  2. 58 29
      public/index.html
  3. 2 2
      src/components/Legend/src/legend.vue
  4. 307 292
      src/components/editLengend.vue

+ 1 - 1
package.json

@@ -14,7 +14,7 @@
         "@saga-web/base": "2.1.22",
         "@saga-web/big": "1.0.86",
         "@saga-web/draw": "2.1.102",
-        "@saga-web/feng-map": "1.0.24",
+        "@saga-web/feng-map": "1.0.25",
         "@saga-web/graph": "2.1.112",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",

+ 58 - 29
public/index.html

@@ -5,99 +5,128 @@
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \wanda-bm-guide\public\index.html
---> 
+-->
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <!-- 万达置顶条 -->
+    <link rel="stylesheet" href="http://sso4pub.wanda-dev.cn/Styles/floatMenu.css" type="text/css">
     <script src="<%= BASE_URL %>systemConf.js"></script>
     <script src="<%= BASE_URL %>g.js"></script>
+    <script src="http://sso4pub.wanda-dev.cn/Scripts/floatMenu.js" type="text/javascript"></script>
     <title>万达广场管理说明书</title>
     <style>
-        .map-p-label{
-            background-color:transparent!important;
-            border:none!important;
-            box-shadow:none!important;
-        } 
-        .leaflet-popup-close-button{
+        .map-p-label {
+            background-color: transparent !important;
+            border: none !important;
+            box-shadow: none !important;
+        }
+
+        .leaflet-popup-close-button {
             display: none;
         }
-        .leaflet-container{
-            background: #f7f9fa!important;
+
+        .leaflet-container {
+            background: #f7f9fa !important;
         }
-        .my-leaflet-div-icon{
+
+        .my-leaflet-div-icon {
             white-space: nowrap;
         }
-        .leaflet-popup-content-wrapper{
-            padding: 0px!important;
-            border-radius: 0px!important;
-            box-shadow: none!important;
+
+        .leaflet-popup-content-wrapper {
+            padding: 0px !important;
+            border-radius: 0px !important;
+            box-shadow: none !important;
         }
+
         .leaflet-popup-content-wrapper .leaflet-popup-content {
-            margin: 0!important;
+            margin: 0 !important;
             min-width: 250px;
             background: rgba(255, 255, 255, 0.5);
-            
+
         }
+
         .leaflet-mypopup-content {
-            padding: 8px 12px!important;
+            padding: 8px 12px !important;
         }
-        .leaflet-mypopup-content .title{
+
+        .leaflet-mypopup-content .title {
             margin-bottom: 12px;
         }
-        .leaflet-mypopup-content .title span{
+
+        .leaflet-mypopup-content .title span {
             font-size: 14px;
             font-weight: bold;
         }
+
         .leaflet-mypopup-content .line {
             margin-bottom: 12px;
         }
-        .leaflet-mypopup-content .line span{
+
+        .leaflet-mypopup-content .line span {
             margin-right: 10px;
         }
-        .leaflet-mypopup-content .line span:nth-of-type(1){
+
+        .leaflet-mypopup-content .line span:nth-of-type(1) {
             font-size: 12px;
             color: #8D9399;
         }
-        .leaflet-mypopup-content .line span:nth-of-type(2){
+
+        .leaflet-mypopup-content .line span:nth-of-type(2) {
             font-size: 16px;
             color: #1F2429;
         }
-        .leaflet-mypopup-content .line span:nth-of-type(3) i{
+
+        .leaflet-mypopup-content .line span:nth-of-type(3) i {
             display: inline-block;
             width: 16px;
             height: 16px;
             border-radius: 8px;
             color: #F54E45;
         }
-        .leaflet-mypopup-content .line span:nth-of-type(3) em{
+
+        .leaflet-mypopup-content .line span:nth-of-type(3) em {
             font-size: 12px;
             color: #F54E45;
-        } 
+        }
     </style>
     <script>
         var remHandle = function () {
             var html = document.documentElement;
             var width = html.clientWidth;
-            html.style.fontSize = width / 192 + 'px'; 
+            html.style.fontSize = width / 192 + 'px';
         }
         remHandle();
         window.onresize = function () {
             remHandle();
         }
+        window.load = function () {
+            // 指定条问题
+            var wd_fm_info = {
+                profile: {
+                    username: encodeURIComponent('张三')
+                }
+            }
+        }
     </script>
 </head>
 
 <body>
     <noscript>
-        <strong>We're sorry but wandaspecificationofsanming doesn't work properly without JavaScript enabled. Please enable
+        <strong>We're sorry but wandaspecificationofsanming doesn't work properly without JavaScript enabled. Please
+            enable
             it to continue.</strong>
-        </noscript>
+    </noscript>
+    <!-- 置顶条问题 -->
+    <div style="height:26px;background-color:#efefef;padding:0 10px" id="wd"></div>
     <div id="app"></div>
- 
+
 </body>
 
 </html>

+ 2 - 2
src/components/Legend/src/legend.vue

@@ -553,10 +553,10 @@ export default {
            }
            if(window.screen.height>1000){
             dom.style.maxHeight="768px";
-            this.tableHeigth = "768px"
+            this.tableHeigth = "668px"
            }else{
             dom.style.maxHeight="434px";
-            this.tableHeigth = "434px"
+            this.tableHeigth = "334px"
            }
 
         }

+ 307 - 292
src/components/editLengend.vue

@@ -4,75 +4,79 @@
 *@info:图例编辑状态
 */
 <template>
-    <div class='view'>
-        <div class='legend-tab2'>
-            <div class='legend-table2-box'>
-                <div class='legend-table2' v-if='editTable.length>0'>
-                    <el-table
-                        v-loading='loading'
-                        :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
-                        ref='multipleTable'
-                        :max-height='tableHeigth'
-                        :data='editTable'
-                        tooltip-effect='dark'
-                        width='100%'
-                        @selection-change='handleSelectionChange'
+  <div class="view">
+    <div class="legend-tab2">
+      <div class="legend-table2-box">
+        <div class="legend-table2" v-if="editTable.length>0">
+            <el-table
+              v-loading="loading"
+              :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
+              ref="multipleTable"
+              :max-height="tableHeigth"
+              :data="editTable"
+              tooltip-effect="dark"
+              width="100%"
+              @selection-change="handleSelectionChange"
+              id="lenged_tab"
+            >
+              <el-table-column prop label="项目" :show-overflow-tooltip="true">
+                <template slot-scope="{row}">{{row.Name||'--'}}</template>
+              </el-table-column>
+              <el-table-column prop label="数量">
+                <template slot-scope="{row}">
+                  <div v-if="row.IsModify">
+                    <div
+                      v-if="row.Num!=row.RealNum && (row.Num!=null && row.RealNum!=null)"
+                      class="redData"
                     >
-                        <el-table-column prop label='项目' :show-overflow-tooltip='true'>
-                            <template slot-scope='{row}'>{{row.Name||'--'}}</template>
-                        </el-table-column>
-                        <el-table-column prop label='数量'>
-                            <template slot-scope='{row}'>
-                                <div v-if='row.IsModify'>
-                                    <div v-if='row.Num!=row.RealNum && (row.Num!=null && row.RealNum!=null)' class='redData'>
-                                        <el-tooltip
-                                            class='item'
-                                            effect='dark'
-                                            :content='`当前图例 ${row.Name} 与平面图中的不一致,平面图中为${row.RealNum}`'
-                                            placement='top'
-                                        >
-                                            <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                        </el-tooltip>
-                                    </div>
-                                    <div v-else-if='row.Num==null||row.RealNum==null'>
-                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                    </div>
-                                    <div v-else-if='!row.Num' class='nullData'>
-                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                    </div>
-                                    <div v-else style='width:50px'>
-                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                    </div>
-                                </div>
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        :content="`当前图例 ${row.Name} 与平面图中的不一致,平面图中为${row.RealNum}`"
+                        placement="top"
+                      >
+                        <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                      </el-tooltip>
+                    </div>
+                    <div v-else-if="row.Num==null||row.RealNum==null">
+                      <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                    </div>
+                    <div v-else-if="!row.Num" class="nullData">
+                      <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                    </div>
+                    <div v-else style="width:50px">
+                      <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                    </div>
+                  </div>
 
-                                <!-- 第二部分数据 -->
-                                <div v-else>
-                                    <el-tooltip
-                                        v-if='!row.IsModify'
-                                        class='item'
-                                        effect='dark'
-                                        :content='`当前图例 ${row.Name},从平面图中直接获取,如需编辑请修改平面图`'
-                                        placement='top'
-                                    >
-                                        <div class='dataTwo'>{{row.Num}}</div>
-                                    </el-tooltip>
-                                </div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop label='单位'>
-                            <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
-                        </el-table-column>
-                        <el-table-column prop label='图例' align='center'>
-                            <template slot-scope='{row}'>
-                                <div v-if='row.Url' class='Url-img'>
-                                    <img :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
-                                </div>
-                                <div v-else>{{'--'}}</div>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-                <!-- <div class='legend-table2' v-if='tbData2.length>0'>
+                  <!-- 第二部分数据 -->
+                  <div v-else>
+                    <el-tooltip
+                      v-if="!row.IsModify"
+                      class="item"
+                      effect="dark"
+                      :content="`当前图例 ${row.Name},从平面图中直接获取,如需编辑请修改平面图`"
+                      placement="top"
+                    >
+                      <div class="dataTwo">{{row.Num}}</div>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop label="单位">
+                <template slot-scope="{row}">{{row.Unit||'--'}}</template>
+              </el-table-column>
+              <el-table-column prop label="图例" align="center">
+                <template slot-scope="{row}">
+                  <div v-if="row.Url" class="Url-img">
+                    <img :src="`/serve/topology-wanda/Picture/query/${row.Url}`" alt />
+                  </div>
+                  <div v-else>{{'--'}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+        </div>
+        <!-- <div class='legend-table2' v-if='tbData2.length>0'>
                     <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                         <el-table-column prop='project' label='项目' width='100'></el-table-column>
                         <el-table-column prop='num' label='数量'>
@@ -87,8 +91,8 @@
                             <template slot-scope='scope'>{{ scope.row.lege }}</template>
                         </el-table-column>
                     </el-table>
-                </div>-->
-                <!-- <div class='legend-table2' v-if='tbData3.length>0'>
+        </div>-->
+        <!-- <div class='legend-table2' v-if='tbData3.length>0'>
                     <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                         <el-table-column prop='project' label='项目' width='100'></el-table-column>
                         <el-table-column prop='num' label='数量'>
@@ -103,254 +107,265 @@
                             <template slot-scope='scope'>{{ scope.row.lege }}</template>
                         </el-table-column>
                     </el-table>
-                </div>-->
-            </div>
-            <div class='lengend-text'>广场上没有的图例数量填写为0</div>
-            <div class='swich'>
-                <el-switch v-model='value' @change='changeSwitch'></el-switch>
-                <span>隐藏数量为0的项目</span>
-            </div>
+        </div>-->
+      </div>
+      <div class="lengend-text">广场上没有的图例数量填写为0</div>
+      <div class="swich">
+        <el-switch v-model="value" @change="changeSwitch"></el-switch>
+        <span>隐藏数量为0的项目</span>
+      </div>
 
-            <div class='legendFoot'>
-                <el-button size='mini' @click='cancel'>取消</el-button>
-                <el-button size='mini' v-if='editNum.length==0' type='primary' disabled style='opacity: 0.5'>保存</el-button>
-                <el-button size='mini' v-else @click='save' type='primary'>保存</el-button>
-            </div>
-        </div>
+      <div class="legendFoot">
+        <el-button size="mini" @click="cancel">取消</el-button>
+        <el-button
+          size="mini"
+          v-if="editNum.length==0"
+          type="primary"
+          disabled
+          style="opacity: 0.5"
+        >保存</el-button>
+        <el-button size="mini" v-else @click="save" type="primary">保存</el-button>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import { updateStatis } from '@/api/public.js'
-import { mapGetters } from 'vuex'
+import { updateStatis } from "@/api/public.js";
+import { mapGetters } from "vuex";
 export default {
-    props: ['editTable', 'loading','tableHeigth'],
-    data() {
-        return {
-            value: false,
-            tbData1: [],
-            tbData2: [],
-            tbData3: [],
-            editNum: [],
-        }
+  props: ["editTable", "loading", "tableHeigth"],
+  data() {
+    return {
+      value: false,
+      tbData1: [],
+      tbData2: [],
+      tbData3: [],
+      editNum: []
+    };
+  },
+  computed: {
+    ...mapGetters(["plazaId"])
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
     },
-    computed: {
-        ...mapGetters(['plazaId'])
+    // 编辑图例取消
+    cancel() {
+      if (this.editNum.length > 0) {
+        this.$confirm("图例中的数据发生变化, 是否需要保存?", {
+          confirmButtonText: "保存",
+          cancelButtonText: "放弃修改",
+          type: "warning"
+        })
+          .then(() => {
+            this.$emit("saveNum", this.editNum);
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已放弃修改"
+            });
+            this.editNum = [];
+            this.$emit("saveNum", this.editNum);
+          });
+      } else {
+        this.$store.commit("SETSHOWVIEW", 1);
+        this.$emit("saveNum", this.editNum);
+      }
     },
-    methods: {
-        handleSelectionChange(val) {
-            this.multipleSelection = val
-        },
-        // 编辑图例取消
-        cancel() {
-            if (this.editNum.length > 0) {
-                this.$confirm('图例中的数据发生变化, 是否需要保存?', {
-                    confirmButtonText: '保存',
-                    cancelButtonText: '放弃修改',
-                    type: 'warning'
-                })
-                    .then(() => {
-                        this.$emit('saveNum', this.editNum)
-                    })
-                    .catch(() => {
-                        this.$message({
-                            type: 'info',
-                            message: '已放弃修改'
-                        })
-                        this.editNum = []
-                        this.$emit('saveNum', this.editNum)
-                    })
-            } else {
-                this.$store.commit('SETSHOWVIEW', 1)
-                this.$emit('saveNum', this.editNum)
-            }
-        },
-        // 编辑图里保存
-        save() {
-            this.queryEdit(this.editNum)
-        },
-        // 编辑数量
-        queryEdit(val) {
-            let arr = []
-            if (val.length > 0) {
-                val.forEach(e => {
-                    let obj = {
-                        BuildingId: '1',
-                        Num: e.Num == '' ? null : Number(e.Num),
-                        GraphElementId: e.GraphElementId,
-                        FloorId: this.$cookie.get('floorMapId'),
-                        ProjectId: e.ProjectId,
-                        CategoryId: e.GraphCategoryId
-                    }
-                    arr.push(obj)
-                })
-            }
-            let params = {
-                postParams: {
-                    Content: arr
-                }
-            }
-
-            updateStatis(params)
-                .then(res => {
-                    if (res.Result == 'success') {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success'
-                        })
-                        this.$emit('changeSwitch', true)
-                        this.$store.commit('SETSHOWVIEW', 1)
-                    } else {
-                        this.$message({
-                            message: '操作失败',
-                            type: 'error'
-                        })
-                    }
-                })
-                .catch(err => {
-                    this.$message({
-                        message: err,
-                        type: 'error'
-                    })
-                })
-        },
-        // 修改图例数量
-        changeTable(val) {
-            this.editNum.push(val)
-            let result = [],
-                obj = {}
-            for (var i = 0; i < this.editNum.length; i++) {
-                if (!obj[this.editNum[i].GraphElementId]) {
-                    result.push(this.editNum[i])
-                    obj[this.editNum[i].GraphElementId] = true
-                }
-            }
-            this.editNum = result
-        },
-        // 修改隐藏为0的项目的开关
-        changeSwitch(val) {
-            this.$emit('handleSwich2', val)
+    // 编辑图里保存
+    save() {
+      this.queryEdit(this.editNum);
+    },
+    // 编辑数量
+    queryEdit(val) {
+      let arr = [];
+      if (val.length > 0) {
+        val.forEach(e => {
+          let obj = {
+            BuildingId: "1",
+            Num: e.Num == "" ? null : Number(e.Num),
+            GraphElementId: e.GraphElementId,
+            FloorId: this.$cookie.get("floorMapId"),
+            ProjectId: e.ProjectId,
+            CategoryId: e.GraphCategoryId
+          };
+          arr.push(obj);
+        });
+      }
+      let params = {
+        postParams: {
+          Content: arr
         }
-        // init() {
-        // this.tbData1 = []
-        // this.tbData2 = []
-        // this.tbData3 = []
-        // if (this.editTable.length > 0) {
-        //     this.tbData1 = this.editTable
-        // 以下不要动 不要删
-        // let len = this.tableData.length
-        // if (len <= 10) {
-        //     this.tbData1 = this.tableData
-        // } else if (len > 10 && len <= 20) {
-        //     this.tbData1 = this.tableData.slice(0, 10)
-        //     this.tbData2 = this.tableData.slice(10, len)
-        // } else if (len > 10 && len <= 30) {
-        //     this.tbData1 = this.tableData.slice(0, 10)
-        //     this.tbData2 = this.tableData.slice(10, 20)
-        //     this.tbData3 = this.tableData.slice(20, len)
-        // } else {
-        //     this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
-        //     this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
-        //     this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
-        // }
-        // }
-        // },
-        ,
+      };
+
+      updateStatis(params)
+        .then(res => {
+          if (res.Result == "success") {
+            this.$message({
+              message: "操作成功",
+              type: "success"
+            });
+            this.$emit("changeSwitch", true);
+            this.$store.commit("SETSHOWVIEW", 1);
+          } else {
+            this.$message({
+              message: "操作失败",
+              type: "error"
+            });
+          }
+        })
+        .catch(err => {
+          this.$message({
+            message: err,
+            type: "error"
+          });
+        });
     },
-    mounted() {
+    // 修改图例数量
+    changeTable(val) {
+      this.editNum.push(val);
+      let result = [],
+        obj = {};
+      for (var i = 0; i < this.editNum.length; i++) {
+        if (!obj[this.editNum[i].GraphElementId]) {
+          result.push(this.editNum[i]);
+          obj[this.editNum[i].GraphElementId] = true;
+        }
+      }
+      this.editNum = result;
     },
-    watch: {
-        editTable:{
-            handler(newV) {
-                console.log('newV',newV)
-            },
-            deep: true
+    // 修改隐藏为0的项目的开关
+    changeSwitch(val) {
+      this.$emit("handleSwich2", val);
+    }
+    // init() {
+    // this.tbData1 = []
+    // this.tbData2 = []
+    // this.tbData3 = []
+    // if (this.editTable.length > 0) {
+    //     this.tbData1 = this.editTable
+    // 以下不要动 不要删
+    // let len = this.tableData.length
+    // if (len <= 10) {
+    //     this.tbData1 = this.tableData
+    // } else if (len > 10 && len <= 20) {
+    //     this.tbData1 = this.tableData.slice(0, 10)
+    //     this.tbData2 = this.tableData.slice(10, len)
+    // } else if (len > 10 && len <= 30) {
+    //     this.tbData1 = this.tableData.slice(0, 10)
+    //     this.tbData2 = this.tableData.slice(10, 20)
+    //     this.tbData3 = this.tableData.slice(20, len)
+    // } else {
+    //     this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
+    //     this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
+    //     this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
+    // }
+    // }
+    // },
+  },
+  mounted() {},
+  watch: {
+    editTable: {
+      handler() {
+        setTimeout(()=>{
+              let tabHeight = document.getElementById("lenged_tab").offsetHeight
+        let dom = document.getElementsByClassName("legend-tab2")[0];
+        let dom2 = document.getElementsByClassName('legend-table2')[0];
+        console.log('tabHeight',tabHeight)
+        if (!dom) {
+          return;
         }
+         dom.style.height=tabHeight + 100 + 'px';
+         dom2.style.height=tabHeight + 100 + 'px';
+        })
+      },
+      deep: true
     }
-}
+  }
+};
 </script>
 <style lang="less" scoped>
 .view {
-    // position: relative;
-    .legend-tab2 {
-        width: 385px;
-        position: absolute;
-        top: 0;
-        right: 47px;
-        width: 385px;
-        height: 460px;
-        background: rgba(255, 255, 255, 1);
-        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
-        border-radius: 2px;
-        border: 1px solid rgba(228, 229, 231, 1);
-        .legend-table2-box {
-            display: flex;
-            justify-content: flex-end;
-            .legend-table2 {
-                padding: 16px 10px;
-                height: 430px;
-                width: 100%;
-            }
-        }
+  // position: relative;
+  .legend-tab2 {
+    position: absolute;
+    top: 0;
+    right: 47px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+    border-radius: 2px;
+    border: 1px solid rgba(228, 229, 231, 1);
+    .legend-table2-box {
+      display: flex;
+      justify-content: flex-end;
+      .legend-table2 {
+        padding: 16px 10px;
+        height: 430px;
+        width: 100%;
+      }
     }
+  }
 
-    .dataTwo {
-        padding: 0 5px;
-        cursor: pointer;
-    }
-    .swich {
-        // position: absolute;
-        // right: 16px;
-        // bottom: 56px;
-        span {
-            margin-left: 8px;
-        }
+  .dataTwo {
+    padding: 0 5px;
+    cursor: pointer;
+  }
+  .swich {
+    position: absolute;
+    right: 16px;
+    bottom: 56px;
+    span {
+      margin-left: 8px;
     }
-    .Url-img {
-        width: 20px;
-        height: 22px;
-        line-height: 20px;
-        margin: 0 auto;
-        img {
-            display: block;
-            max-width: 100%;
-            max-height: 100%;
-            margin: 0 auto;
-        }
-    }
-    .lengend-text {
-        font-size: 12px;
-        color: red;
-        padding-left: 16px;
-        margin-top: -50px;
-    }
-    .legendFoot {
-        // position: absolute;
-        // right: 16px;
-        // bottom: 12px;
+  }
+  .Url-img {
+    width: 20px;
+    height: 22px;
+    line-height: 20px;
+    margin: 0 auto;
+    img {
+      display: block;
+      max-width: 100%;
+      max-height: 100%;
+      margin: 0 auto;
     }
+  }
+  .lengend-text {
+    font-size: 12px;
+    color: red;
+    padding-left: 16px;
+    margin-top: -50px;
+  }
+  .legendFoot {
+    position: absolute;
+    right: 16px;
+    bottom: 12px;
+  }
 }
 </style>
 <style lang="less">
 .view {
-    .el-input--mini .el-input__inner {
-        width: 50px;
-    }
+  .el-input--mini .el-input__inner {
+    width: 50px;
+  }
+  .el-input__inner {
+    padding: 0 5px;
+  }
+  .legend-container .el-table td,
+  .legend-container .el-table th {
+    padding: 3px 0 !important;
+  }
+  .nullData {
     .el-input__inner {
-        padding: 0 5px;
-    }
-    .legend-container .el-table td,
-    .legend-container .el-table th {
-        padding: 3px 0 !important;
+      color: #ccc !important;
     }
-    .nullData {
-        .el-input__inner {
-            color: #ccc !important;
-        }
-    }
-    .redData {
-        .el-input__inner {
-            border: 1px solid rgba(255, 77, 79, 0.5) !important;
-        }
+  }
+  .redData {
+    .el-input__inner {
+      border: 1px solid rgba(255, 77, 79, 0.5) !important;
     }
+  }
 }
 </style>