safecheck-client 4.0.1-66 → 4.0.1-68

package/src/components/map/SecurityCheckCoordinates.vue

@@ -1,361 +1,361 @@
-<template>
-  <div class="flex-row">
-    <div class="basic-main" style="flex:7">
-      <div id="check_map" style="height:100%">
-      </div>
-    </div>
-    <div id="zzz" class="basic-main" style="flex:1;margin-left: 0px;overflow: hidden">
-      <div class="panel panel-info" style="margin-top:0px; height: 100%; display: flex; flex-direction: column;">
-        <div class="panel-heading" style="height: 50px">
-          <h3 class="panel-title">状态选择</h3>
-        </div>
-        <div class="panel-body">
-          <ul class="safe_ul_sty">
-            <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level1" @change="enableChange('level1',mulchs.level1)" type="checkbox"/><img class="safe_deimg" src="../../assets/警告 (3).png"/>拒检</li>
-            <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level3" @change="enableChange('level3',mulchs.level3)" type="checkbox"/><img class="safe_deimg" src="../../assets/警告 (4).png"/>到访不遇</li>
-            <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.problems" @change="enableChange('problems',mulchs.problems)" type="checkbox"/><img class="safe_deimg" src="../../assets/警告 (5).png"/>正常</li>
-          </ul>
-        </div>
-        <div class="panel-heading" style="height: 50px">
-          <h3 class="panel-title">时间选择</h3>
-        </div>
-        <div class="panel-body">
-          <div class="row" style="height: 50px">
-            <datepicker
-              :value.sync="f_check_start"
-              placeholder='开始时间'
-              :disabled-days-of-week="[]"
-              @change="safeRefresh"
-              :format="'yyyy-MM-dd'"
-              :show-rest-button="reset"
-              v-model="f_check_start">
-            </datepicker>
-          </div>
-
-          <div class="row" style="height: 50px">
-            <datepicker
-              :value.sync="f_check_end"
-              placeholder='结束时间'
-              :disabled-days-of-week="[]"
-              @change="safeRefresh"
-              :format="'yyyy-MM-dd'"
-              :show-rest-button="reset"
-              v-model="f_check_end">
-            </datepicker>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as Util from '../Util'
-import {HttpResetClass} from 'vue-client'
-
-export default {
-  title: '用户安检定位信息',
-  data() {
-    return {
-      loading: false,
-      f_check_start:'',
-      f_check_end:'',
-      map:null,
-      infoWindow:null,
-      level1Mulchs:null,//拒检点位
-      level3Mulchs:null,//到访不遇点位
-      problemsMulchs:null,//正常点位
-      level1:[],
-      level3:[],
-      problems:[],
-      defectList:{rows:[]},
-      intervalNum:'',
-      mulchs:{//覆盖物控制显示
-        level1:true,
-        level3:true,
-        problems:true
-      },
-      styleObject :[
-        {
-          url: require('../../assets/警告 (3).png'), //拒检图标URL
-          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-          size: new AMap.Size(26, 28)  //图标大小
-        },
-        {
-          url: require('../../assets/警告 (4).png'), //到访不遇图标URL
-          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-          size: new AMap.Size(26, 28)  //图标大小
-        },
-        {
-          url: require('../../assets/警告 (5).png'), //正常图标URL
-          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-          size: new AMap.Size(26, 28)  //图标大小
-        }
-      ]
-    }
-  },
-  async ready(){
-    this.initMap()
-    await this.getNewData(`f_longitude is not null and f_latitude is not null`)
-    this.assemblyData()
-    this.intervalNum=window.setInterval(this.safeRefresh, 240000)
-  },
-  methods: {
-    async getNewData (condition) {
-      this.loading = true
-      let arr = await new HttpResetClass().load('POST', `api/af-safecheck/sql/safe_singleTable_OrderBy`,
-        {
-          data: {
-            items:'tcp.*,tab.f_adjustable_name,tr.f_name  as  f_region_name  ',
-            tablename: 't_check_paper tcp left join t_userfiles uf on uf.f_userinfo_id = tcp.f_userinfoid  left  join  t_adjustablebox   tab   on  tab.id=uf.f_adjustable_id  left  join   t_region  tr  on tab.f_region_id=tr.id',
-            condition: condition,
-            orderitem: 'tcp.f_entry_status'
-          }}, {resolveMsg: null, rejectMsg: null})
-      if (arr.data) {
-        this.level1 = []
-        this.level3 = []
-        this.problems = []
-        arr.data.forEach((defect) => {
-          if (defect.f_entry_status == '拒检' ) {
-            this.level1.push(defect)
-          } else if (defect.f_entry_status == '到访不遇' ) {
-            this.level3.push(defect)
-          } else {
-            this.problems.push(defect)
-          }
-        })
-      }
-      this.loading = false
-      this.defectList.rows = arr.data
-    },
-    getDefectContent(row){
-      return `
-             <div style="padding:0px;margin-left: 8px;"><b>安检内容</b></div>
-              <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
-                <div class="panel-body">
-                  <ul style="list-style-type: none;font-size: 15px;">
-                      <li style="margin: 3px 0;">用户姓名: ${row.f_user_name}</li>
-                      <li style="margin: 3px 0;">用户地址: ${row.f_address}</li>
-                      <li style="margin: 3px 0;">安检状态: ${row.f_entry_status}</li>
-                      <li style="margin: 3px 0;">安检时间: ${row.f_offsite_time}</li>
-                      <li style="margin: 3px 0;">安检人员: ${row.f_checker_name}</li>
-                      <li style="margin: 3px 0;">调压箱: ${row.f_adjustable_name?row.f_adjustable_name:'无'}</li>
-                       <li style="margin: 3px 0;">所属区域: ${row.f_region_name?row.f_region_name:'无'}</li>
-                  </ul>
-                </div>
-              </div>`
-    },
-    assemblyData(){
-      let a2=[]
-      for(let i=0;i<this.level1.length;i++){
-        a2.push({
-          lnglat: [this.level1[i].f_longitude, this.level1[i].f_latitude], //点标记位置
-          name: '拒检',
-          id:i,
-          rowstr:this.level1[i]
-        })
-      }
-      this.level1Mulchs.setData(a2);
-      this.level1Mulchs.setMap(this.map);
-
-      let a4=[]
-      for(let p=0;p<this.level3.length;p++){
-        if (this.level3[p].f_longitude&&this.level3[p].f_latitude){
-          a4.push({
-            lnglat: [this.level3[p].f_longitude, this.level3[p].f_latitude], //点标记位置
-            name: '到访不遇',
-            id:p,
-            rowstr:this.level3[p]
-          })
-        }
-      }
-      this.level3Mulchs.setData(a4);
-      this.level3Mulchs.setMap(this.map);
-
-      let a5=[]
-      for(let l=0;l<this.problems.length;l++){
-        if (this.problems[l].f_longitude&&this.problems[l].f_latitude){
-          a5.push({
-            lnglat: [this.problems[l].f_longitude, this.problems[l].f_latitude], //点标记位置
-            name: '正常',
-            id:l,
-            rowstr:this.problems[l]
-          })
-        }
-      }
-      this.problemsMulchs.setData(a5);
-      this.problemsMulchs.setMap(this.map);
-    },
-    enableChange(vname,val){
-      switch(vname){
-        case 'level1':
-          if(val){
-            this.level1Mulchs.show()
-          }else{
-            this.level1Mulchs.hide()
-          }
-          break;
-        case 'level3':
-          if(val){
-            this.level3Mulchs.show()
-          }else{
-            this.level3Mulchs.hide()
-          }
-          break;
-        case 'problems':
-          if(val){
-            this.problemsMulchs.show()
-          }else{
-            this.problemsMulchs.hide()
-          }
-          break;
-        default:
-      }
-    },
-    initMap(){
-      let that=this
-      this.map = new AMap.Map('check_map', {
-        zoom: 17,
-        viewMode: '2D',
-        lang: 'zh_cn',
-        zindex: 99,
-        zooms: [3, 18], // 设置地图缩放范围为3到18级
-        center: [110.121181, 37.088921],
-      });
-      AMap.plugin(
-        ['AMap.ToolBar','AMap.Geolocation'], () => {
-          var geolocation = new AMap.Geolocation({
-            enableHighAccuracy: true,
-            showbutton: true,
-            timeout: 10000,
-            buttonOffset: new AMap.Pixel(10, 20),
-            buttonPosition: 'LB'
-          })
-          that.map.addControl(geolocation)
-          geolocation.getCurrentPosition();
-          that.map.addControl(new AMap.ToolBar())
-        });
-      this.map.setDefaultCursor('move');
-      this.infoWindow = new AMap.InfoWindow({
-        anchor: 'bottom-center',
-        autoMove:true,
-        content: '',
-        offset: new AMap.Pixel(0, -25)
-      })
-
-      this.level1Mulchs=new AMap.MassMarks([], {
-        opacity: 0.8,
-        zIndex: 111,
-        cursor: 'pointer',
-        style: this.styleObject[0]
-      });
-      this.level1Mulchs.on('mouseover',function (e) {
-        let defectContent=that.getDefectContent(e.data.rowstr)
-        that.infoWindow.setContent(defectContent)
-        that.infoWindow.open(that.map, e.data.lnglat);
-      })
-      this.level1Mulchs.on('mouseout',function (e) {
-        that.infoWindow.close();
-      })
-      this.level3Mulchs=new AMap.MassMarks([], {
-        opacity: 0.8,
-        zIndex: 111,
-        cursor: 'pointer',
-        style: this.styleObject[1]
-      });
-      this.level3Mulchs.on('mouseover',function (e) {
-        let defectContent=that.getDefectContent(e.data.rowstr)
-        that.infoWindow.setContent(defectContent)
-        that.infoWindow.open(that.map, e.data.lnglat);
-      })
-      this.level3Mulchs.on('mouseout',function (e) {
-        that.infoWindow.close();
-      })
-      this.problemsMulchs=new AMap.MassMarks([], {
-        opacity: 0.8,
-        zIndex: 111,
-        cursor: 'pointer',
-        style: this.styleObject[2]
-      });
-      this.problemsMulchs.on('mouseover',function (e) {
-        let defectContent=that.getDefectContent(e.data.rowstr)
-        that.infoWindow.setContent(defectContent)
-        that.infoWindow.open(that.map, e.data.lnglat);
-      })
-      this.problemsMulchs.on('mouseout',function (e) {
-        that.infoWindow.close();
-      })
-    },
-    async safeRefresh(){
-      let condition =`f_longitude is not null and f_latitude is not null`
-      if (this.f_check_start){
-        condition += ` and f_offsite_time >=  '${this.f_check_start} 00:00:00'`
-      }
-      if (this.f_check_end){
-        condition += ` and f_offsite_time <=  '${this.f_check_end} 23:59:59'`
-      }
-      await this.getNewData(condition)
-      this.assemblyData()
-    }
-  },
-  destroyed() {
-    window.clearInterval(this.intervalNum)
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-.time-picker-container {
-  display: flex;
-  align-items: center;
-}
-
-.time-picker-container /deep/ .v-datepicker {
-  width: 100% !important;
-}
-
-.date-separator {
-  padding: 0 5px;
-}
-
-.safe_checkbox_sty{
-  vertical-align:text-bottom;
-  margin-right: 3px;
-
-}
-.safe_ul_sty{
-  list-style-type: none;
-  font-size: 13px;
-  padding-left: 5px;
-}
-.safe_li_sty{
-  font-size: 13px;
-  margin-top: 5px;
-}
-.safe_p{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0 0 0 10px;
-
-  font-size: 12px;
-}
-.safe_list_li{
-  margin-top: 5px;
-  background-color: #ffffff;
-  border: solid 1px #f0f4fa !important;
-  color: #666666 !important;
-  font-size: 1.3rem !important;
-  font-family: PINGFANG-MEDIUM !important;
-  padding: 8px;
-}
-.safe_list_li:hover{
-  background-color: rgb(203,234,241);
-}
-.safe_deimg{
-  vertical-align: text-bottom;
-  width: 15px;
-  margin-right: 3px;
-}
-</style>
+<template>
+  <div class="flex-row">
+    <div class="basic-main" style="flex:7">
+      <div id="check_map" style="height:100%">
+      </div>
+    </div>
+    <div id="zzz" class="basic-main" style="flex:1;margin-left: 0px;overflow: hidden">
+      <div class="panel panel-info" style="margin-top:0px; height: 100%; display: flex; flex-direction: column;">
+        <div class="panel-heading" style="height: 50px">
+          <h3 class="panel-title">状态选择</h3>
+        </div>
+        <div class="panel-body">
+          <ul class="safe_ul_sty">
+            <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level1" @change="enableChange('level1',mulchs.level1)" type="checkbox"/><img class="safe_deimg" src="../../assets/警告 (3).png"/>拒检</li>
+            <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level3" @change="enableChange('level3',mulchs.level3)" type="checkbox"/><img class="safe_deimg" src="../../assets/警告 (4).png"/>到访不遇</li>
+            <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.problems" @change="enableChange('problems',mulchs.problems)" type="checkbox"/><img class="safe_deimg" src="../../assets/警告 (5).png"/>正常</li>
+          </ul>
+        </div>
+        <div class="panel-heading" style="height: 50px">
+          <h3 class="panel-title">时间选择</h3>
+        </div>
+        <div class="panel-body">
+          <div class="row" style="height: 50px">
+            <datepicker
+              :value.sync="f_check_start"
+              placeholder='开始时间'
+              :disabled-days-of-week="[]"
+              @change="safeRefresh"
+              :format="'yyyy-MM-dd'"
+              :show-rest-button="reset"
+              v-model="f_check_start">
+            </datepicker>
+          </div>
+
+          <div class="row" style="height: 50px">
+            <datepicker
+              :value.sync="f_check_end"
+              placeholder='结束时间'
+              :disabled-days-of-week="[]"
+              @change="safeRefresh"
+              :format="'yyyy-MM-dd'"
+              :show-rest-button="reset"
+              v-model="f_check_end">
+            </datepicker>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as Util from '../Util'
+import {HttpResetClass} from 'vue-client'
+
+export default {
+  title: '用户安检定位信息',
+  data() {
+    return {
+      loading: false,
+      f_check_start:'',
+      f_check_end:'',
+      map:null,
+      infoWindow:null,
+      level1Mulchs:null,//拒检点位
+      level3Mulchs:null,//到访不遇点位
+      problemsMulchs:null,//正常点位
+      level1:[],
+      level3:[],
+      problems:[],
+      defectList:{rows:[]},
+      intervalNum:'',
+      mulchs:{//覆盖物控制显示
+        level1:true,
+        level3:true,
+        problems:true
+      },
+      styleObject :[
+        {
+          url: require('../../assets/警告 (3).png'), //拒检图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: require('../../assets/警告 (4).png'), //到访不遇图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: require('../../assets/警告 (5).png'), //正常图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        }
+      ]
+    }
+  },
+  async ready(){
+    this.initMap()
+    await this.getNewData(`f_longitude is not null and f_latitude is not null`)
+    this.assemblyData()
+    this.intervalNum=window.setInterval(this.safeRefresh, 240000)
+  },
+  methods: {
+    async getNewData (condition) {
+      this.loading = true
+      let arr = await new HttpResetClass().load('POST', `api/af-safecheck/sql/safe_singleTable_OrderBy`,
+        {
+          data: {
+            items:'tcp.*,tab.f_adjustable_name,tr.f_name  as  f_region_name  ',
+            tablename: 't_check_paper tcp left join t_userfiles uf on uf.f_userinfo_id = tcp.f_userinfoid  left  join  t_adjustablebox   tab   on  tab.id=uf.f_adjustable_id  left  join   t_region  tr  on tab.f_region_id=tr.id',
+            condition: condition,
+            orderitem: 'tcp.f_entry_status'
+          }}, {resolveMsg: null, rejectMsg: null})
+      if (arr.data) {
+        this.level1 = []
+        this.level3 = []
+        this.problems = []
+        arr.data.forEach((defect) => {
+          if (defect.f_entry_status == '拒检' ) {
+            this.level1.push(defect)
+          } else if (defect.f_entry_status == '到访不遇' ) {
+            this.level3.push(defect)
+          } else {
+            this.problems.push(defect)
+          }
+        })
+      }
+      this.loading = false
+      this.defectList.rows = arr.data
+    },
+    getDefectContent(row){
+      return `
+             <div style="padding:0px;margin-left: 8px;"><b>安检内容</b></div>
+              <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
+                <div class="panel-body">
+                  <ul style="list-style-type: none;font-size: 15px;">
+                      <li style="margin: 3px 0;">用户姓名: ${row.f_user_name}</li>
+                      <li style="margin: 3px 0;">用户地址: ${row.f_address}</li>
+                      <li style="margin: 3px 0;">安检状态: ${row.f_entry_status}</li>
+                      <li style="margin: 3px 0;">安检时间: ${row.f_offsite_time}</li>
+                      <li style="margin: 3px 0;">安检人员: ${row.f_checker_name}</li>
+                      <li style="margin: 3px 0;">调压箱: ${row.f_adjustable_name?row.f_adjustable_name:'无'}</li>
+                       <li style="margin: 3px 0;">所属区域: ${row.f_region_name?row.f_region_name:'无'}</li>
+                  </ul>
+                </div>
+              </div>`
+    },
+    assemblyData(){
+      let a2=[]
+      for(let i=0;i<this.level1.length;i++){
+        a2.push({
+          lnglat: [this.level1[i].f_longitude, this.level1[i].f_latitude], //点标记位置
+          name: '拒检',
+          id:i,
+          rowstr:this.level1[i]
+        })
+      }
+      this.level1Mulchs.setData(a2);
+      this.level1Mulchs.setMap(this.map);
+
+      let a4=[]
+      for(let p=0;p<this.level3.length;p++){
+        if (this.level3[p].f_longitude&&this.level3[p].f_latitude){
+          a4.push({
+            lnglat: [this.level3[p].f_longitude, this.level3[p].f_latitude], //点标记位置
+            name: '到访不遇',
+            id:p,
+            rowstr:this.level3[p]
+          })
+        }
+      }
+      this.level3Mulchs.setData(a4);
+      this.level3Mulchs.setMap(this.map);
+
+      let a5=[]
+      for(let l=0;l<this.problems.length;l++){
+        if (this.problems[l].f_longitude&&this.problems[l].f_latitude){
+          a5.push({
+            lnglat: [this.problems[l].f_longitude, this.problems[l].f_latitude], //点标记位置
+            name: '正常',
+            id:l,
+            rowstr:this.problems[l]
+          })
+        }
+      }
+      this.problemsMulchs.setData(a5);
+      this.problemsMulchs.setMap(this.map);
+    },
+    enableChange(vname,val){
+      switch(vname){
+        case 'level1':
+          if(val){
+            this.level1Mulchs.show()
+          }else{
+            this.level1Mulchs.hide()
+          }
+          break;
+        case 'level3':
+          if(val){
+            this.level3Mulchs.show()
+          }else{
+            this.level3Mulchs.hide()
+          }
+          break;
+        case 'problems':
+          if(val){
+            this.problemsMulchs.show()
+          }else{
+            this.problemsMulchs.hide()
+          }
+          break;
+        default:
+      }
+    },
+    initMap(){
+      let that=this
+      this.map = new AMap.Map('check_map', {
+        zoom: 17,
+        viewMode: '2D',
+        lang: 'zh_cn',
+        zindex: 99,
+        zooms: [3, 18], // 设置地图缩放范围为3到18级
+        center: [110.121181, 37.088921],
+      });
+      AMap.plugin(
+        ['AMap.ToolBar','AMap.Geolocation'], () => {
+          var geolocation = new AMap.Geolocation({
+            enableHighAccuracy: true,
+            showbutton: true,
+            timeout: 10000,
+            buttonOffset: new AMap.Pixel(10, 20),
+            buttonPosition: 'LB'
+          })
+          that.map.addControl(geolocation)
+          geolocation.getCurrentPosition();
+          that.map.addControl(new AMap.ToolBar())
+        });
+      this.map.setDefaultCursor('move');
+      this.infoWindow = new AMap.InfoWindow({
+        anchor: 'bottom-center',
+        autoMove:true,
+        content: '',
+        offset: new AMap.Pixel(0, -25)
+      })
+
+      this.level1Mulchs=new AMap.MassMarks([], {
+        opacity: 0.8,
+        zIndex: 111,
+        cursor: 'pointer',
+        style: this.styleObject[0]
+      });
+      this.level1Mulchs.on('mouseover',function (e) {
+        let defectContent=that.getDefectContent(e.data.rowstr)
+        that.infoWindow.setContent(defectContent)
+        that.infoWindow.open(that.map, e.data.lnglat);
+      })
+      this.level1Mulchs.on('mouseout',function (e) {
+        that.infoWindow.close();
+      })
+      this.level3Mulchs=new AMap.MassMarks([], {
+        opacity: 0.8,
+        zIndex: 111,
+        cursor: 'pointer',
+        style: this.styleObject[1]
+      });
+      this.level3Mulchs.on('mouseover',function (e) {
+        let defectContent=that.getDefectContent(e.data.rowstr)
+        that.infoWindow.setContent(defectContent)
+        that.infoWindow.open(that.map, e.data.lnglat);
+      })
+      this.level3Mulchs.on('mouseout',function (e) {
+        that.infoWindow.close();
+      })
+      this.problemsMulchs=new AMap.MassMarks([], {
+        opacity: 0.8,
+        zIndex: 111,
+        cursor: 'pointer',
+        style: this.styleObject[2]
+      });
+      this.problemsMulchs.on('mouseover',function (e) {
+        let defectContent=that.getDefectContent(e.data.rowstr)
+        that.infoWindow.setContent(defectContent)
+        that.infoWindow.open(that.map, e.data.lnglat);
+      })
+      this.problemsMulchs.on('mouseout',function (e) {
+        that.infoWindow.close();
+      })
+    },
+    async safeRefresh(){
+      let condition =`f_longitude is not null and f_latitude is not null`
+      if (this.f_check_start){
+        condition += ` and f_offsite_time >=  '${this.f_check_start} 00:00:00'`
+      }
+      if (this.f_check_end){
+        condition += ` and f_offsite_time <=  '${this.f_check_end} 23:59:59'`
+      }
+      await this.getNewData(condition)
+      this.assemblyData()
+    }
+  },
+  destroyed() {
+    window.clearInterval(this.intervalNum)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.time-picker-container {
+  display: flex;
+  align-items: center;
+}
+
+.time-picker-container /deep/ .v-datepicker {
+  width: 100% !important;
+}
+
+.date-separator {
+  padding: 0 5px;
+}
+
+.safe_checkbox_sty{
+  vertical-align:text-bottom;
+  margin-right: 3px;
+
+}
+.safe_ul_sty{
+  list-style-type: none;
+  font-size: 13px;
+  padding-left: 5px;
+}
+.safe_li_sty{
+  font-size: 13px;
+  margin-top: 5px;
+}
+.safe_p{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0 0 0 10px;
+
+  font-size: 12px;
+}
+.safe_list_li{
+  margin-top: 5px;
+  background-color: #ffffff;
+  border: solid 1px #f0f4fa !important;
+  color: #666666 !important;
+  font-size: 1.3rem !important;
+  font-family: PINGFANG-MEDIUM !important;
+  padding: 8px;
+}
+.safe_list_li:hover{
+  background-color: rgb(203,234,241);
+}
+.safe_deimg{
+  vertical-align: text-bottom;
+  width: 15px;
+  margin-right: 3px;
+}
+</style>