创建新仓库

src/renderer/components/myHeaderAll1/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="header_top ">
+   <!-- <svg-icon icon-class="Head" :class-name="['headItem']"></svg-icon> -->
+      <img :src="require('@/assets/images/81/'+skinInfo+'/head.png')" alt="">
+    <div class="dateTime">
+      <span>{{ date.ymd }}</span>
+      <span>{{ $t("headerTitles.week")[date.week] }}</span>
+    </div>
+    <setTool></setTool>
+    <systemPopup ref="systemPopup" v-if="showSystem"></systemPopup>
+  </div>
+</template>
+
+<script>
+//右侧按钮弹框
+import setTool from "./setTool/setTool.vue";
+// 系统设置弹框
+import systemPopup from "./systemPopup/systemPopup.vue";
+
+export default {
+  name: "index",
+  components: { setTool, systemPopup },
+
+  data() {
+    return {
+      xxx:"pause",
+      date: {
+        ymd: "2023/11/20",
+        week: "1",
+      },
+      showSystem: false, //设置框
+      head: "",
+      skinInfo:JSON.parse(localStorage.getItem("systemSetting")).skinInfo,
+      appVersion:localStorage.getItem("appVersion")
+    };
+  },
+  beforeMount() {
+    // this.$sendElectronChanel("getHead");
+    // this.$recvElectronChanel("headRes", (e, res) => {
+    //
+    //   this.head = res;
+    // });
+  },
+  mounted() {
+
+    // this.setTime()
+    this.setTime()
+    // console.log("dsfdsad", process.env.Head)
+    setInterval(() => {
+      this.setTime()
+    },1000)
+    const that=this
+    window.addEventListener("setItemEvent",(e)=>{
+      if (e.key=="systemSetting"){
+        let obj=JSON.parse(e.newValue)
+        that.skinInfo=obj.skinInfo
+      }
+    })
+  },
+  methods: {
+    setTime() {
+      let date = new Date();
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      let day = date.getDate();
+      let hours = date.getHours()
+      if(hours<10){
+        hours = '0'+ hours
+      }
+      let minutes = date.getMinutes()
+      if(minutes<10){
+        minutes = '0'+ minutes
+      }
+      let seconds = date.getSeconds()
+      if(seconds<10){
+        seconds = '0'+ seconds
+      }
+      this.date.ymd = year + "/" + month + "/" + day + "  " + hours + ":" + minutes + ":" + seconds;
+      this.date.week = date.getDay();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.header_top {
+  width: 100%;
+  //height: 120px;
+  height: 6.25vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 19;
+
+  .dateTime {
+    position: absolute;
+    left: 20px;
+    //top: 15px;
+    top: 0.35vw;
+    height: 36px;
+    //border: 1px solid red;
+    //width: 200px;
+    color: var(--svg-headColor3);
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 18px;
+
+    >span {
+      margin: 0 5px;
+    }
+
+    &>span:first-child {
+      letter-spacing: 1px;
+    }
+  }
+}
+</style>

src/renderer/components/myHeaderAll1/setTool/js/setTool.js

@@ -0,0 +1,139 @@
+// 顶部右侧展示栏功能
+import { remote } from "electron";
+import { $sendElectronChanel } from "../../../../utils/communication";
+import { delDepart, getStatus } from "../../../../api/gisAPI";
+import { getIP } from "../../../../utils";
+
+export default {
+  data() {
+    return {
+      LocateCurrent: null,
+      clicknum: 0,
+      clickTimer: null,
+      isSuccess: true,
+      airShow: false,
+    };
+  },
+  watch: {
+    value: {
+      handler(newV, oldV) {
+        if (newV) {
+          this.$emit("showAirListAndAttr");
+        }
+      },
+    },
+  },
+  mounted() {},
+  methods: {
+    logout() {
+      this.$confirm("确认是否退出？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // window.Earth1.destroy()
+          window.Earth1 = null;
+
+          $sendElectronChanel("restart");
+        })
+        .catch(() => {
+          /*this.$message({
+                  type: 'info',
+                  message: '已取消删除'
+                });*/
+        });
+
+      /*this.$store.dispatch("FedLogOut").then(() => {
+              this.$router.push({path: '/login'})
+            })*/
+    },
+    resetShow(item) {
+      //重置
+      new YJ.Tools(window.Earth1).flyHome();
+    },
+    flyTo() {
+      clearTimeout(this.clickTimer);
+      this.clicknum = 0;
+      if (this.LocateCurrent) this.LocateCurrent.flyTo();
+    },
+    // 无人机
+    airLine() {
+      $root_home_index.changeState();
+      $root_home_index.$refs.tree.isShowTree();
+      this.$changeComponentShow(".flyer", true);
+      this.$changeComponentShow(".logo", false);
+      this.$changeComponentShow(".tree", false);
+      this.$changeComponentShow(".header_top", false);
+      YJ.Global.setKeyboardEventActive(window.Earth1, false);
+    },
+    locate(item) {
+      this.clicknum++;
+      if (this.clicknum == 1) {
+        this.clickTimer = setTimeout(() => {
+          let host = new URL(getIP()).host;
+          if (this.LocateCurrent) {
+            this.isSuccess = true;
+            this.LocateCurrent.remove();
+            this.LocateCurrent = null;
+          } else {
+            this.LocateCurrent = new YJ.Obj.LocateCurrent(
+              window.Earth1,
+              { host },
+              (res) => {
+                console.log(res);
+                if (!res) {
+                  this.isSuccess = false;
+                } else {
+                  if (res.is_valid) {
+                    this.isSuccess = true;
+                  } else {
+                    this.isSuccess = false;
+                  }
+                }
+              }
+            );
+            this.LocateCurrent.loaded(() => {
+              this.LocateCurrent.flyTo();
+            });
+          }
+          this.clicknum = 0;
+        }, 200);
+      }
+      // console.log(window.);
+      //重置
+    },
+    //新增态势
+    fullScreen(item = null) {
+      let fullScreen = remote.getCurrentWindow().isFullScreen();
+      !item && !fullScreen && (item = this.setList[3]);
+
+      if (item) {
+        //全屏与退出全屏
+        if (!fullScreen) {
+          // 设置退出全屏svg
+          item.icon = "shrink";
+          item.index = 3;
+          remote.getCurrentWindow().setFullScreen(true);
+        } else {
+          // 设置全屏svg
+          item.icon = "fullScreen";
+          item.index = 1;
+          remote.getCurrentWindow().setFullScreen(false);
+        }
+      }
+    },
+    setShow(item) {
+      //设置
+      if (!this.$parent.showSystem) {
+        this.$parent.showSystem = true;
+        this.$nextTick(() => {
+          this.$parent.$refs.systemPopup.getData();
+        });
+      }
+    },
+    shrinkScreen() {
+      //退出全屏
+    },
+  },
+};

src/renderer/components/myHeaderAll1/setTool/setTool.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="setTool">
+    <div class="set_item" :title="$t('headerTitles.iconTitle.' + item.icon)" v-for="(item, i) of setList" :key="i"
+      @click="item.callback(item)" @dblclick="item.dbcallback ? item.dbcallback(item) : ''">
+      <svg-icon :icon-class="item.icon" :class-name="[
+        item.icon,
+        item.className,
+        LocateCurrent && item.icon == 'locate' ? 'selected' : '',
+        item.icon == 'locate' && (isSuccess ? '' : 'satelliteFail'),
+      ]"></svg-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "./js/setTool";
+
+export default {
+  name: "setTool",
+  mixins: [mixins],
+  data() {
+    return {
+      setList: [
+        //北斗图标
+        // 标准版本
+        // {
+        //   id: 0,
+        //   index: 0,
+        //   icon: "locate",
+        //   className: "header_public",
+        //   dbcallback: this.flyTo,
+        //   callback: this.locate,
+        // },
+        // // 无人机
+        {
+          id: 6,
+          index: 5,
+          icon: "air",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.airLine,
+        },
+        {
+          id: 1,
+          index: 1,
+          icon: "reset",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.resetShow,
+        },
+        {
+          id: 2,
+          index: 2,
+          icon: "fullScreen",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.fullScreen,
+        },
+        {
+          id: 3,
+          index: 3,
+          icon: "set",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.setShow,
+        },
+        // {id: 4, index: 2, icon: 'layerTitleBg', className: 'header_public', callback: this.setShow},
+        {
+          id: 5,
+          index: 4,
+          icon: "logout",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.logout,
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss">
+.setTool {
+  height: 36px;
+  position: absolute;
+  right: 70px;
+  top: 7%;
+  border-radius: 5px;
+  background: var(--svg-headColorbg);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--svg-headColor3);
+  padding: 10px 0;
+
+  >div {
+    margin: 0 10px;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 10px;
+  }
+}
+
+.el-dropdown-menu {
+  background-color: rgba(0, 0, 0, 1);
+  border-color: rgba(0, 255, 255, 0.5);
+  border-width: 2px;
+}
+
+.el-dropdown-menu__item {
+  color: #fff;
+}
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background: rgba(0, 255, 255, 0.2);
+  color: rgba(0, 255, 255, 1);
+}
+
+.el-popper[x-placement^="bottom"] .popper__arrow {
+  display: none;
+}
+</style>

src/renderer/components/myHeaderAll1/systemPopup/components/permission/permission.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="permission">
+    <!-- 用户权限抽屉 -->
+    <div v-if="type=='role'">
+      <el-drawer
+          title="权限配置"
+          :visible.sync="drawer"
+          direction="rtl"
+          :before-close="handleClose"
+          :modal="false"
+      >
+        <div v-for="item in list" :key="item.key" class="item">
+          <div class="name">{{ item.name }}:</div>
+          <div class="val" v-for="(val,index) in item.list" :key="index">
+            <el-checkbox v-model="val.status" @change="submitrole(val)">{{ val.name }}</el-checkbox>
+          </div>
+        </div>
+      </el-drawer>
+    </div>
+    <div v-else-if="type=='user'">
+      <el-drawer
+          title="用户配置"
+          :visible.sync="drawer"
+          direction="rtl"
+          :before-close="handleClose"
+          :modal="false"
+      >
+        <el-checkbox-group v-model="checkList">
+          <template v-for="item in list">
+            <el-checkbox :label="item.role_id" @change="submituser(item)">{{ item.role_name }}</el-checkbox>
+          </template>
+        </el-checkbox-group>
+      </el-drawer>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {getRole, editRole, useraddRole} from "@/api/gisAPI";
+
+export default {
+  name: "permission",
+  data() {
+    return {
+      drawer: false,
+      list: [],
+      types: ["user", "source", "role", "depart"],
+      role_id: '',
+      type: '',
+      checkList: []
+    };
+  },
+  mounted() {
+    //用户权限抽屉-yjq
+    this.$recvChanel("drawer", (props) => {
+      console.log(props)
+      this.list = []
+      this.drawer = props.drawer;
+      this.type = props.type
+
+      if (props.type == 'role') {
+        this.role_id = props.id
+        this.getlist(props.id)
+      } else if (props.type == 'user') {
+        this.list = props.data
+        this.checkList = []
+        this.checkList.push(props.row.role_id)
+        this.list.forEach(item => {
+          item.username = props.row.username
+        })
+      }
+    });
+  },
+  methods: {
+    // 用户权限抽屉-yjq
+    handleClose(done) {
+      this.$changeComponentShow("#modal", false);
+      done();
+
+    },
+    getname(key) {
+      let s = ""
+      switch (key) {
+        case "user":
+          s = "用户"
+          break;
+        case "source":
+          s = "资源"
+          break;
+        case "role":
+          s = "角色"
+          break;
+        case "depart":
+          s = "部门"
+          break;
+        case "permission":
+          s = "权限"
+          break;
+        default:
+          break;
+      }
+      return s
+    },
+    //获取角色列表
+    getlist(id) {
+      getRole({role_id: id}).then((res) => {
+        console.log(res)
+        let _map = new Map()
+        res.data.list.forEach((item) => {
+          if (_map.has(item.p_type)) {
+            _map.get(item.p_type).list.push(item)
+          } else {
+            _map.set(item.p_type, {key: item.p_type, name: this.getname(item.p_type), list: [item]})
+          }
+        });
+        window._map = _map
+        let arr = Array.from(_map.values())
+        console.log(arr)
+        arr.sort(function (a, b) {
+          return a.name - b.name
+        })
+        this.list = arr
+      });
+
+    },
+    //  修改权限
+    submitrole(e) {
+      console.log(e)
+      editRole({
+        "role_id": this.role_id,
+        "key": e.key,
+        "status": e.status
+      }, (res) => {
+        console.log(res)
+      })
+    },
+    //修改用户的角色
+    submituser(e) {
+      this.checkList = []
+      this.checkList[0] = e.role_id
+      useraddRole({
+        "username": e.username,
+        "role_id": e.role_id
+      }, (res) => {
+        this.$sendChanel("getUserList", true)
+      })
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.permission {
+
+  .item {
+    .name {
+      margin: 30px 0 5px;
+      font-size: 18px;
+    }
+
+    .val {
+      padding-left: 20px;
+      margin-bottom: 5px;
+    }
+  }
+
+  .user_item {
+    //padding-left: 20px;
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+
+  .el-drawer__body {
+    padding-left: 20px;
+  }
+}
+</style>

src/renderer/components/myHeaderAll1/systemPopup/components/setAgreementInfo/setAgreement.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="set_Agreement" id="set_Agreement">
+<!--    <div class="agreement_move" id="agreement_move">-->
+<!--      {{ $t('headerTitles.service.agreements.setAgreement')  }}-->
+<!--    </div>-->
+<!--    <div class="close" @click="onClose">✖</div>-->
+    <div class="agreement_detail">
+      <div>
+        <span>{{ $t('headerTitles.service.agreements.Agreement') }}</span>
+        <el-select :disabled="disabled"  v-model="agreement" placeholder="请选择">
+          <el-option
+              v-for="item in agreementList"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+      <div>
+        <span>{{ $t('headerTitles.service.agreements.port')  }}</span>
+        <input :disabled="disabled" type="number" min="1" max="65535"/>
+      </div>
+      <div>
+        <span>{{ $t('headerTitles.service.agreements.location')  }}</span>
+        <div class="nvr_address">
+            <input :disabled="disabled" type="number" v-model="adress.A" max="255" min="1">
+            <span></span>
+            <input :disabled="disabled" type="number" v-model="adress.B" max="255" min="1">
+            <span></span>
+            <input :disabled="disabled" type="number" v-model="adress.C" max="255" min="1">
+            <span></span>
+            <input :disabled="disabled" type="number" v-model="adress.D" max="255" min="1">
+        </div>
+      </div>
+<!--      <button class="btn" @click="onSubmit">确认</button>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import {setMove} from '../../js/moveDiv'
+export default {
+  name: "setAgreement",
+  props:['disabled'],
+  data(){
+    return{
+      agreement:1,
+      agreementList:[
+        {id:1,label:'HTTPS'},
+        {id:2,label:'HTTP'},
+      ],
+      adress:{
+        A:192,
+        B:168,
+        C:1,
+        D:1
+      }
+    }
+  },
+  mounted() {
+    // setMove('agreement_move','set_Agreement')
+  },
+  methods:{
+    onClose(){
+      this.$parent.agreement_show=false
+    },
+    onSubmit(){ //提交确认
+      console.log('确认提交')
+    }
+  }
+}
+</script>
+
+<style  lang="scss">
+.set_Agreement{
+  //position: absolute;
+  //left: 50%;
+  //top: 50%;
+  width: 400px;
+  //height: 240px;
+  //transform: translate(-50%,-50%);
+  //background: #f1f1f1;
+  z-index: 8888;
+  //border: 2px solid #0ff;
+  border-radius: 5px;
+  .agreement_move{
+    width: 100%;
+    height: 30px;
+    //background: #08efe4c2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: grid;
+    place-items: center;
+    font-size: 18px;
+    color: #fff;
+    font-weight: bolder;
+  }
+  .close{
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-size: 20px;
+    color: #fff;
+    border: 2px solid #0ff;
+    width: 25px;
+    height: 25px;
+    background: #0acefb;
+    cursor: pointer;
+  }
+  .agreement_detail{
+    width: 100%;
+    //height: calc(100% - 30px);
+    //background: #65bbd2;
+    //margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding: 10px;
+    .nvr_address {
+        display: flex;
+        align-items: center;
+        background-color: white;
+        margin-right: 10px;
+        border-radius: 4px;
+        margin-left: 4px;
+
+        > span {
+          display: block;
+          width: 3px;
+          height: 3px;
+          border-radius: 50%;
+          background-color: #000;
+        }
+
+        input {
+          height: 30px;
+          border-radius: 6px;
+          border: none;
+          width: 50px;
+          box-sizing: border-box;
+          padding-left:4px;
+          display: grid;
+          place-items: center;
+        }
+    }
+    >div{
+      height: 40px;
+      display: flex;
+      align-items: center;
+      margin: 5px 0;
+      .el-select{
+        width: 100px !important;
+        .el-input__inner{
+          height: 30px !important;
+        }
+      }
+      >span{
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        min-width: 100px;
+        font-size: 16px;
+        color: #0ff;
+        font-weight: bolder;
+      }
+      >input{
+        outline: none;
+        border: 0;
+        background: #fff;
+        height: 30px;
+        border-radius: 5px;
+        padding: 10px ;
+        width: 100px;
+        box-sizing: border-box;
+      }
+    }
+    .btn{
+      width: 120px;
+      height: 30px;
+      font-size: 16px;
+      font-weight: bolder;
+      margin: 0 auto;
+      outline: none;
+      border: 1px solid #0ff;
+      background: #0acefb;
+      border-radius: 5px;
+      color: #fff;
+    }
+  }
+}
+</style>

src/renderer/components/myHeaderAll1/systemPopup/js/moveDiv.js

@@ -0,0 +1,43 @@
+function setMove(downId, moveID) {
+  let moveDiv = document.getElementById(downId);
+  // console.log(moveDiv)
+  moveDiv.style.cssText += ";cursor:move;";
+  let informationBox = document.getElementById(moveID);
+  const sty = (() => {
+    if (window.document.currentStyle) {
+      return (dom, attr) => dom.currentStyle[attr];
+    } else {
+      return (dom, attr) => getComputedStyle(dom, false)[attr];
+    }
+  })();
+  moveDiv.onmousedown = e => {
+    // 鼠标按下，计算当前元素距离可视区的距离
+    const disX = e.clientX - moveDiv.offsetLeft;
+    const disY = e.clientY - moveDiv.offsetTop;
+    // 获取到的值带px 正则匹配替换
+    let styL = sty(informationBox, "left");
+    let styT = sty(informationBox, "top");
+    // 第一次获取到的值为组件自带50% 移动之后赋值为px
+    if (styL.includes("%")) {
+      styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100);
+      styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100);
+    } else {
+      styL = +styL.replace(/\px/g, "");
+      styT = +styT.replace(/\px/g, "");
+    }
+    document.onmousemove = function(e) {
+      // 通过事件委托，计算移动的距离
+      let left = e.clientX - disX;
+      let top = e.clientY - disY;
+      // 移动当前元素
+      informationBox.style.cssText += `;left:${left + styL}px;top:${top +
+        styT}px;`;
+    };
+    document.onmouseup = function(e) {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    };
+  };
+}
+
+module.exports.setMove = setMove;