提交顶部导航

潘建波
Commit 12b1ca04 authored Jan 09, 2020 by 潘建波
Showing 6 changed files with 329 additions and 33 deletions
src/assets/css/public.css
src/assets/js/vporto.js
src/views/Layout/index.vue
src/views/Layout/menu.vue
src/views/trafficShow/alarmEvent.vue
src/views/trafficShow/map.vue
--- a/src/assets/css/public.css
+++ b/src/assets/css/public.css
@@ -158,3 +158,24 @@ html,body{
  right: .5em;
  top:auto!important;
 }
+.nav-tag-box {
+  line-height: 40px;
+}
+.nav-tag-box .el-tag{
+  border-radius: 0;
+  border: 0;
+  border-right: 1px solid #ccc;
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 25px;
+  background: none;
+  cursor: pointer;
+  color: #888888;
+}
+.el-tag .el-icon-close{
+  color: #888888;
+}
+.el-tag .el-icon-close:hover{
+  background: none;
+  color: #3BB7FF;
+}
\ No newline at end of file
--- a/src/assets/js/vporto.js
+++ b/src/assets/js/vporto.js
 import Vue from "vue";
+
+/**
+ * tar文件上传设置
+ */
+Vue.prototype.uploadFile = function(file, type, size) {
+  const isType = file.raw.type === type;
+  let isSize = true;
+  if (size) {
+    isSize = file.size / 1024 / 1024 < size;
+  }
+
+  if (!isType) {
+    this.$message.error(`上传头像文件只能${type}是格式!`);
+  }
+  if (size && !isSize) {
+    this.$message.error(`文件大小不能超过 ${size}MB!`);
+  }
+  return isType && isSize;
+};
+Vue.prototype.globalWs = null;
+
+Vue.prototype.getCode = function(codeName, code) {
+  var name = window.localStorage.getItem(codeName + "-" + code);
+  name = name ? name : "";
+  return name;
+};
+/**
+ * @param {src} 图片路径
+ * 图片放大
+ */
+Vue.prototype.zoomImg = function(data) {
+  store.commit("setImgsrc", data);
+};
+Vue.filter("sexfn", function(value) {
+  if (!value) return;
+  var str = "";
+  if (value == 1) str = "男";
+  if (value == 2) str = "女";
+  return str;
+});
+
+Vue.filter("dbnamefn", function(value) {
+  let dbData = store.state.initinfo.facedbdata,
+    dbname = "";
+  dbData.forEach(ele => {
+    if (ele.code == value) {
+      dbname = ele.name;
+    }
+  });
+  return dbname;
+});
+
+Vue.filter("filterDeployType", function(value) {
+  let dbData = store.state.alarmtype,
+    dbname = "";
+  dbData.forEach(ele => {
+    if (ele.type == value) {
+      dbname = ele.name;
+    }
+  });
+  return dbname;
+});
+
+/**
+ * @param {provenceid} 省份id
+ * @param {cityid} 城市id
+ */
+Vue.prototype.showCity = function(provenceid, cityid) {
+  this.cData = this.$store.state.initinfo.province;
+  var province = provenceid;
+  var provinceNmae = "";
+  var cityName = "";
+  var curProvince = "";
+  var city = cityid;
+  if (province) {
+    this.cData.forEach(function(ele) {
+      if (ele.code == province) {
+        if (ele.cities) curProvince = ele.cities;
+        provinceNmae = ele.name;
+      }
+    }, this);
+    if (city) {
+      if (curProvince)
+        curProvince.list_data.forEach(function(ele) {
+          if (ele.code == city) {
+            cityName = ele.name;
+          }
+        });
+    }
+  } else {
+    provinceNmae = "--";
+    cityName = "--";
+  }
+  return provinceNmae + "-" + cityName;
+};
+/**
+ * @param {obj}
+ *  格式化时间
+ */
+Vue.prototype.timeForm = function(obj) {
+  var nowY = obj.getFullYear();
+  var nowM =
+    obj.getMonth() + 1 < 10 ? "0" + (obj.getMonth() + 1) : obj.getMonth() + 1;
+  var nowD = obj.getDate() < 10 ? "0" + obj.getDate() : obj.getDate();
+  var nowH = obj.getHours() < 10 ? "0" + obj.getHours() : obj.getHours();
+  var nowMi = obj.getMinutes() < 10 ? "0" + obj.getMinutes() : obj.getMinutes();
+  var nowS = obj.getSeconds() < 10 ? "0" + obj.getSeconds() : obj.getSeconds();
+  var timeNow =
+    nowY + "-" + nowM + "-" + nowD + " " + nowH + ":" + nowMi + ":" + nowS;
+  return timeNow;
+};
+
+/**
+ * @param {obj}
+ * UTC时间处理
+ */
+Vue.prototype.setUtcTime = function(obj) {
+  if (obj && obj != "") {
+    let num = new Date(obj).getTime();
+    let offset = Math.abs(new Date().getTimezoneOffset());
+    let time;
+    if (isNaN(num)) {
+      let ary = obj.split(":");
+      let h = parseInt(ary[0]) - offset / 60;
+      if (h < 0) {
+        h += 24;
+      }
+      if (h < 10) {
+        h = "0" + h;
+      }
+      time = h + ":" + ary[1] + ":" + ary[2];
+    } else {
+      time = this.timeForm(new Date(new Date(obj).getTime() - offset * 60000));
+    }
+    return time;
+  }
+};
+/**IE
+ * 检查浏览器
+ */
+function checkIE() {
+  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+  var isIE =
+    userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
+  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
+  var isIE11 =
+    userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
+  if (isIE || isEdge || isIE11) {
+    return true;
+  } else {
+    return false;
+  }
+}
+Vue.prototype.showLocalTime = function(obj) {
+  if (obj == undefined) return;
+  let dt = "",
+    ndt = "";
+  if (checkIE()) {
+    dt = obj.replace(/-/g, "/");
+    ndt = String(dt).split(".")[0];
+  } else {
+    ndt = obj;
+  }
+  let num = new Date(ndt).getTime();
+  let offset = Math.abs(new Date().getTimezoneOffset());
+  let time;
+  if (isNaN(num)) {
+    let ary = obj.split(":");
+    let h = Number(ary[0]) + offset / 60;
+    if (h >= 24) {
+      h -= 24;
+    }
+    if (h < 10) {
+      h = "0" + h;
+    }
+    time = h + ":" + ary[1] + ":" + ary[2];
+  } else {
+    time = this.timeForm(new Date(new Date(ndt).getTime() + offset * 60000));
+  }
+  return time;
+};
+
+/**
+ * 本地存储相机信息
+ */
+Vue.prototype.setCameralocalStor = function(key, val) {
+  if (window.localStorage) {
+    localStorage[key] = val;
+  } else {
+    alert("浏览器不支持本地存储");
+  }
+};
+
+/**
+ * @param {key}
+ * 获取本地存储相机信息
+ */
+Vue.prototype.getCameralocalStor = function(key) {
+  var val = "";
+  if (window.localStorage) {
+    val = localStorage[key];
+  } else {
+    alert("浏览器不支持本地存储");
+  }
+  return val;
+};
+
 /**
 * 图片上传限制
 */
@@ -16,21 +223,48 @@ Vue.prototype.uploadImgCondition = function(file) {
 };

 /**
- * tar文件上传设置
+ * base64图片
 */
-Vue.prototype.uploadFile = function(file, type, size) {
-  const isType = file.raw.type === type;
-  let isSize = true;
-  if (size) {
-    isSize = file.size / 1024 / 1024 < size;
+Vue.prototype.base64Img = function(file) {
+  // eslint-disable-next-line no-redeclare
+  var file = file.file;
+  return new Promise((resolve, reject) => {
+    var srcs = "";
+    var reader = new FileReader();
+    if (file) {
+      reader.readAsDataURL(file);
    }
+    reader.onloadend = function(evt) {
+      srcs = reader.result.split(",")[1];
+      let data = {
+        pic_base64: srcs,
+        format: file.type.split("/")[1],
+        ofilename: file.name,
+        t_format: "jpg"
+      };
+      data.src = evt.target.result;
+      resolve(data);
+    };
+  });
+};

-  if (!isType) {
-    this.$message.error(`上传头像文件只能${type}是格式!`);
-  }
-  if (size && !isSize) {
-    this.$message.error(`文件大小不能超过 ${size}MB!`);
-  }
-  return isType && isSize;
+/**
+ * code操作
+ */
+
+var codeNation = 1004; //民族
+var codeCulture = 1005; //文化程度
+var codeBlood = 1006; //血型
+var codeRelationTOhead = 1009; //与户主关系
+var codePersonType = 1012; //人员类别
+var profession = 1013; //职业
+var faith = 1020; //宗教信仰
+var army = 1021; //服兵役情况
+var personType = 1067; //关注人员类型
+var marriage = 1007; //婚姻状况
+// 获取code编码
+Vue.prototype.getCode = (codeName, code) => {
+  var name = localStorage.getItem(codeName + "-" + code);
+  name = name ? name : "";
+  return name;
 };
-Vue.prototype.globalWs = null;
\ No newline at end of file
--- a/src/views/Layout/index.vue
+++ b/src/views/Layout/index.vue
@@ -11,10 +11,21 @@
 	  </el-header>
      <el-container style="min-height:calc(100vh - 64px);">
        <el-aside :width="menuwidth">
-          <menus></menus>
+          <menus @setTopBar="setTopBar" ref="leftmenu"></menus>
 		    </el-aside>
        <el-main>
-			<div class="nav"></div>
+          <div class="nav">
+            <div class="nav-tag-box">
+              <el-tag
+                v-for="tag in topbarArr" :key="tag"
+                closable
+                @click="toPath(tag)"
+                :type="tag.type">
+                <i :class="tag.icon"></i>
+                {{tag.name}}
+              </el-tag>
+            </div>
+          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
@@ -33,8 +44,29 @@ export default {
 			conHeight:0,
 			menuwidth:"254px",
      full:false,
+      topbarArr:[]
 	  };
  },
+  methods:{
+    setTopBar(data){
+      if(this.topbarArr.length < 1) {
+        this.topbarArr.push(data)
+      }
+      debugger
+      let hasBar = false;
+      for(let i = 0; i < this.topbarArr.length; i++) {
+        if(this.topbarArr[i].path == data.path){
+          hasBar = true
+        } 
+      }
+      if(!hasBar) {
+         this.topbarArr.push(data)
+      }
+    },
+    toPath(data){
+      this.$refs.leftmenu.handleSelect(data.path)
+    }
+  },
  created(){
  },
  components:{

--- a/src/views/Layout/menu.vue
+++ b/src/views/Layout/menu.vue
@@ -39,14 +39,15 @@ export default {
    return {
      full: false,
      isCollapse: false,
-      activemenu: "/"
+      activemenu: "/",
+      topbar:[]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
      localStorage.setItem("curmenu", key);
-      console.log(key, keyPath);
+      this.activemenu = key
    }
  },
  computed: {
@@ -61,7 +62,16 @@ export default {
      this.$router.push('/');
      this.activemenu = '/';
    }
-    
+  },
+  watch:{
+    $route(t, f){
+      let obj = {
+        name:f.name,
+        path:f.path,
+        icon:f.meta.icon
+      }
+    this.$emit("setTopBar",obj)
+    }
  }
 };
 </script>

--- a/src/views/trafficShow/alarmEvent.vue
+++ b/src/views/trafficShow/alarmEvent.vue
@@ -2,9 +2,9 @@
  <div>
    <el-table :data="tableData" height="30vh">
      <el-table-column type="index" align="center" label="#"></el-table-column>
-      <el-table-column align="center" prop="eventType" label="事件地点"></el-table-column>
-      <el-table-column align="center" prop="locationName" label="抓拍类型"></el-table-column>
-      <el-table-column align="center" prop="startDt" label="发生时间"></el-table-column>
+      <el-table-column align="center" prop="camername" label="事件地点"></el-table-column>
+      <el-table-column align="center" prop="illname" label="抓拍类型"></el-table-column>
+      <el-table-column align="center" prop="illdt" label="发生时间"></el-table-column>
      <el-table-column align="center" prop="operation" label="操作">
        <template slot-scope="scope">
          <el-tooltip content="查看" placement="bottom" effect="light" :visible-arrow="false">
@@ -71,19 +71,22 @@ export default {
        }, 20000);
    }
    //事件推送信息
+    let _this = this;
    this.cws.onmessage = (evt) =>{
      let data = JSON.parse(evt.data)
      try {
        if(data.event_data.illegal.state == 1){
-           let illame = this.getCode('违法类型',data.event_data.illegal.code);
+           let illname = _this.getCode('违法类型',data.event_data.illegal.code) || '';
           let camername = data.event_data.location.name
           let dt = this.setUtcTime(data.event_dt).split(' ')[1];
           let pics = 'data:image/jpeg;base64,'+ data.pics[0].pic_base64
+           let pos = data.event_data.location.pos
           let obj = {
-             illame:illame,
+             illname:illname,
             illdt:dt,
             camername:camername,
-             pics:pics
+             pics:pics,
+             pos:pos
           }
          if(that.tableData.length > 40) {
            that.tableData.pop(obj)
@@ -93,11 +96,6 @@ export default {
          that.tableData.unshift(obj)
        } else{
         
-          if(that.tableData.length > 40) {
-            that.tableData.pop(data)
-          } else {
-              that.tableData.unshift(data)
-          }	
        }
      } catch (error) {


--- a/src/views/trafficShow/map.vue
+++ b/src/views/trafficShow/map.vue
@@ -167,20 +167,21 @@ export default {
        duration: 400,
        zoom:14
      });
-      this.addLayer(pos)
+      this.addLayer(data,pos)
      },
    closepopup(){
      overlay.setPosition(undefined);
      closer.blur();
      return false;
    },
-    addLayer(pdata) {
+    addLayer(pdata,pos) {
+      console.log(pdata)
       let HTML= '<div>车牌号:京V8888</div><div>车辆类型:小型客车</div><div>车身颜色:白</div><div>违法类型：闯红灯</div><div></div>' 
       content.innerHTML = '<div class="content-box"><div class="img-box"><img src='+ require('../../assets/img/home/defaultImg.png')+'></div>'+ HTML +'</div>'
       overlay = new Overlay({
          element: container,
          autoPan: true,
-          position:pdata,
+          position:pos,
          autoPanAnimation: {
            duration: 500
          }