创建新仓库

src/renderer/views/404.vue

@@ -0,0 +1,229 @@
+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404">
+        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">版权所有<a class="link-type" href="https://wallstreetcn.com" target='_blank'>华尔街见闻</a></div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+        <a href="/" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_404 from '@/assets/404_images/404.png'
+import img_404_cloud from '@/assets/404_images/404_cloud.png'
+
+export default {
+  data() {
+    return {
+      img_404,
+      img_404_cloud
+    }
+  },
+  computed: {
+    message() {
+      return '特朗普说这个页面你不能进......'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 0;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+</style>

src/renderer/views/dashboard/modelTransform.js

@@ -0,0 +1,146 @@
+import {Fbx2glb} from "../../../main/back/convert/fbx2gltf";
+
+export default {
+  data() {
+    return {
+      transformTypes: [
+        {
+          title: "osgb转换为tileset",
+          name: "osgbToglb",
+          selectType: "openDirectory",
+          placeholder: '请选择xml文件所在文件夹',
+          outplaceholder: '请输入文件夹路径',
+        },
+        {
+          title: "shape转换为tileset",
+          name: "shapeToglb",
+          filters: {
+            name: "",
+            extensions: ['shp'],
+          },
+          selectType: "openFile",
+          outplaceholder: '请输入文件夹路径'
+        },
+        {
+          title: "obj转换为glb",
+          name: "objToglb",
+          filters: {
+            name: "",
+            extensions: ['obj'],
+          },
+
+          selectType: "openFile"
+        }, {
+          title: "fbx转换为glb",
+          name: "Fbx2glb",
+          filters: {
+            name: "",
+            extensions: ['fbx','FBX'],
+          },
+          selectType: "openFile"
+        },
+        {
+          title: "b3dm转换为glb",
+          name: "b3dmToglb",
+
+          selectType: "openFile",
+          filters: {
+            name: "",
+            extensions: ['b3dm'],
+          },
+        },
+        {
+          title: "dae转换为gltf",
+          name: "daeTogltf",
+
+          selectType: "openFile",
+          filters: {
+            name: "",
+            extensions: ['dae'],
+          },
+        },
+      ],
+      transformTypeActiveName: "",
+      input: "",
+      output: ""
+    }
+  },
+  methods: {
+    changeActive() {
+      this.output = ''
+      this.input = ''
+    },
+    transform() {
+
+      if (this.input && this.output) {
+        $root_home_index.fullScreenLoading=true
+
+        this.$sendElectronChanel("transformModel", {
+          fun: this.transformTypeActiveName,
+          input: this.input,
+          output: this.output
+        });
+        this.$recvElectronChanel("transformModelRes", (e, msg,err) => {
+          console.log(msg)
+          console.log(err)
+          $root_home_index.fullScreenLoading=false
+
+          this.$message.info(msg)
+          // cb(paths);
+        });
+      }
+
+      // window[this.transformTypeActiveName](this.input, this.output)
+      else
+        this.$message.warning("确保存在源文件路径和存放路径")
+    },
+    openDialog({selectType, filters}) {
+      let option = {
+        properties: [selectType, /*"multiSelections"*/],
+        filters: [filters]
+      }
+      this.$sendElectronChanel("open-directory-dialog", option);
+      this.$recvElectronChanel("selectedItem", (e, paths) => {
+        console.log(paths)
+        this.input = paths[0];
+        // cb(paths);
+      });
+    },
+    openSaveDialog({selectType, name}) {
+
+      if (selectType == 'openDirectory' || name == 'shapeToglb') {
+        let option = {
+          properties: ["openDirectory", /*"multiSelections"*/],
+        }
+        this.$sendElectronChanel("open-directory-dialog", option);
+        this.$recvElectronChanel("selectedItem", (e, paths) => {
+          console.log(paths)
+          this.output = paths[0];
+          // cb(paths);
+        });
+      } else {
+        let filename = "文件", extensions = 'glb'
+        if (name == 'daeTogltf') {
+          extensions = 'gltf'
+        }
+        if (this.input) {
+          let arr = this.input.split("/")
+
+          filename = arr[arr.length - 1]
+          filename = filename.split(".")[0]
+        }
+        this.$sendElectronChanel("saveFile", {
+          title: "保存文件",
+          filename,
+          filters: [{
+            name: "",
+            extensions: [extensions],
+          }]
+        })
+        this.$recvElectronChanel("selectedFileItem", (e, path) => {
+          this.output = path
+        })
+      }
+    },
+  },
+}

src/renderer/views/dashboard/test.js

@@ -0,0 +1,272 @@
+import {get_source_list} from "../../api/gisAPI";
+
+const test = {
+  data() {
+    return {
+      earthsDom: ['earth', 'earths'],
+
+    };
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    callback(Event) {
+      console.log(Event)
+      this.earthsDom.forEach(dom => {
+        $("#" + dom).removeClass("selectedEarthCss")
+      })
+      $("#" + Event.path[4].id).addClass("selectedEarthCss")
+
+      if (Event.path[4].id == "earths") {
+        window.Earth1 = window.Earths
+        copy(window.right_entityMap)
+      } else {
+        window.Earth1 = window.Earth
+        copy(window.left_entityMap)
+      }
+
+      function copy(map) {
+        if (map == "undefined") {
+          map = new Map()
+        }
+        window._entityMap.clear()
+        // empty = null
+        window._entityMap = new Map([...map])
+        console.log("copy之后")
+        console.log(_entityMap)
+        console.log(left_entityMap)
+        console.log(right_entityMap)
+        // console.log(Earth1)
+        // console.log(Earth)
+        // console.log(Earths)
+      }
+    },
+    tongbu() {
+      let _this = this.$refs.tree
+
+      // this.$refs.tree.
+      // $("#earths").click()
+      window.Earth1 = window.Earths
+      $("#earths").addClass("selectedEarthCss")
+      $("#earth").removeClass("selectedEarthCss")
+      get_source_list().then(response => {
+        if ([0, 200].includes(response.code)) {
+          let data = JSON.parse(JSON.stringify(response.data.list || []))
+          data.sort(_this.keysort('tree_index'))
+          //给node设置树形如icon；是否允许添加子节点，以及右键菜单
+
+          if (window.right_entityMap == 'undefined')
+            window.right_entityMap = new Map()
+
+          console.log("被同步的数据", data)
+          console.log("被同步的数据", window.Earth1)
+          console.log("window.right_entityMap", window.right_entityMap)
+          data.forEach(node => {
+            console.log("node.source_type", node.source_type, ['point', 'line', 'panel',
+              'circle', 'attackArrow',
+              'pincerArrow', 'groundImage',
+              'layer', 'ArcgisWXImagery'].includes(node.source_type))
+
+            if (!window.right_entityMap.get(node.source_id) &&
+                ['model', 'point', 'line', 'panel',
+                  'circle', 'attackArrow',
+                  'pincerArrow', 'groundImage',
+                  'layer', 'ArcgisWXImagery'].includes(node.source_type)) {
+              if (node.detail)
+                node.detail = JSON.parse(node.detail)
+
+              //设置树上图标，并渲染到地球上
+              _this.setOptions(node)
+
+            }
+
+          })
+          if (window.right_entityMap == 'undefined')
+            window.right_entityMap = new Map()
+          window.right_entityMap = new Map([...window._entityMap])
+        }
+      })
+    },
+    /*  twoscreen() {
+
+        // window.earth = null
+        //
+
+        this.$changeComponentShow(".tongbu", true)
+
+        this.halfEarth = !this.halfEarth
+
+        console.log(this.halfEarth)
+        if (this.halfEarth) {
+          $("#earth").addClass("halfEarth")
+          $("#earths").addClass("halfEarth")
+          $("#earths")[0].style.left = "50%"
+
+
+          let earths = new YJ.YJEarth('earths')
+          // YJ.setSecondEarth(earths.earth)
+          // earths.earth.czm.viewer.scene.mode = Cesium.SceneMode.SCENE2D
+          // earths.earth.czm.viewer.scene.screenSpaceCameraController.enableTranslate = true
+          window.Earths = earths
+          // console.log("earth", earths)
+          // console.log(
+          //     earths.earth.sceneTree.$refs
+          // )
+          YJ.Global.setMode2D(earths.earth)
+
+          $("#earth").addClass("selectedEarthCss")
+
+          this.earthsDom.forEach(dom => {
+            $("#" + dom)[0].addEventListener("click", this.callback, {capture: true})
+          })
+
+          window.right_entityMap = new Map()
+          window.left_entityMap = new Map([...window._entityMap])
+        } else {
+          this.$changeComponentShow(".tongbu", false)
+          this.earthsDom.forEach(dom => {
+            $("#" + dom)[0].removeEventListener("click", this.callback, {capture: true})
+            $("#" + dom).removeClass("halfEarth")
+            $("#" + dom).removeClass("selectedEarthCss")
+          })
+          window._entityMap = window.left_entityMap
+          window.Earth1 = window.Earth
+          window.Earths.earth.destroy()
+          $("#earths").empty();
+          window.Earths = null
+        }
+
+      },*/
+    tongbu2D() {
+      let _this = this.$refs.tree
+      get_source_list().then(response => {
+        if ([0, 200].includes(response.code)) {
+          let data = JSON.parse(JSON.stringify(response.data.list || []))
+          data.sort(_this.keysort('tree_index'))
+          //给node设置树形如icon；是否允许添加子节点，以及右键菜单
+
+          if (!window.right_entityMap)
+            window.right_entityMap = new Map()
+
+          console.log("被同步的数据", data)
+          console.log("被同步的数据", window.Earth1)
+          console.log("window.right_entityMap", window.right_entityMap)
+          data.forEach(node => {
+
+
+            if (!window.right_entityMap.get(node.source_id) &&
+                ['model', 'point', 'line', 'panel',
+                  'circle', 'attackArrow',
+                  'pincerArrow', 'groundImage',
+                  'layer', 'ArcgisWXImagery'].includes(node.source_type)) {
+              if (node.detail)
+                node.detail = JSON.parse(node.detail)
+
+              //设置树上图标，并渲染到地球上
+              _this.setOptions2d(node)
+            }
+
+          })
+          /*if (window.right_entityMap == 'undefined')
+            window.right_entityMap = new Map()
+          window.right_entityMap = new Map([...window._entityMap])*/
+        }
+      })
+    },
+    map2d() {
+      this.$changeComponentShow(".tongbu", true)
+      this.halfEarth = !this.halfEarth
+      if (this.halfEarth) {
+        $("#earth").addClass("halfEarth")
+        $("#map2d").addClass("halfEarth")
+        $("#map2d")[0].style.left = "50%"
+        YJMap.on().then(() => {
+          window.map2d = new YJMap.Map("map2d")
+          new YJMap.Obj.Tms(map2d, {
+            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
+          })
+
+          /* const projection = new ol.proj.Projection({
+             code: 'EPSG:4326',
+             extent: [-180, -90, 180, 90],
+             metersPerUnit: 2 * Math.PI * 6378137 / 360
+           })
+           let GGLWLayer = new ol.layer.Tile({
+
+             source: new ol.source.XYZ({
+               attributions:
+                   'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
+                   'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
+               url:
+                   'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+                   'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+             }),
+             /!* source: new ol.source.XYZ({
+                url: "http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
+              }),
+              visible: false*!/
+           })
+           window.Map = new ol.Map({
+             target: "map2d",
+             layers: [
+               GGLWLayer
+             ],
+             view: new ol.View({
+               center: [106.814931000, 34.945231000, 16000],
+               projection: projection,
+               minZoom: 4,
+               maxZoom: 21,
+               // extent : maxExtent, //限定到地图视图拖动范围
+               zoom: 5 // 地图初始化的缩放级别
+             })
+           })*/
+
+          $(".ol-control")[0].style.bottom = ".5em"
+          $(".ol-zoom").css("top", '')
+        })
+
+      } else {
+        this.$changeComponentShow(".tongbu", false)
+        this.earthsDom.forEach(dom => {
+          $("#" + dom)[0].removeEventListener("click", this.callback, {capture: true})
+          $("#" + dom).removeClass("halfEarth")
+          $("#" + dom).removeClass("selectedEarthCss")
+        })
+        window._entityMap = window.left_entityMap
+        // window.Earth1 = window.Earth
+        // window.Earths.earth.destroy()
+        $("#map2d").empty();
+        window.Earths = null
+      }
+    },
+    testglb() {
+
+      // let rocketPrimitive: Cesium.Model
+      let position = Cesium.Cartesian3.fromDegrees(106.31598580143364, 29.62610729142745, 264.2444551526038);
+      const hpRoll = new Cesium.HeadingPitchRoll();
+      const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator("north", "west");
+      const rocketPrimitive = window.Earth1.earth._viewer.scene.primitives.add(
+          Cesium.Model.fromGltf({
+            url: "https://assets.agi.com/models/launchvehicle.glb",
+            modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
+                position,
+                hpRoll,
+                Cesium.Ellipsoid.WGS84,
+                fixedFrameTransform
+            ),
+            minimumPixelSize: 128,
+          })
+      );
+
+      /*rocketPrimitive.setArticulationStage( //对应属性改变参数值
+          'SRBFlames Size',
+          1
+      );
+      rocketPrimitive.applyArticulations(); //使得修改的属性生效*/
+      window.rocketPrimitive = rocketPrimitive
+    }
+  }
+};
+export default test;

src/renderer/views/layout/Layout.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="app-wrapper" :class="classObj">
+    <!--    <sidebar class="sidebar-container"></sidebar>-->
+    <!--    <div class="main-container">-->
+    <!--      <navbar></navbar>-->
+    <app-main></app-main>
+    <!--    </div>-->
+  </div>
+</template>
+
+<script>
+import { Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'layout',
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "../../styles/mixin.scss";
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>
+<style>
+.edit-box {
+  top: 20%;
+  left: 30%;
+}
+</style>

src/renderer/views/layout/components/AppMain.vue

@@ -0,0 +1,19 @@
+<template>
+  <section class="app-main">
+    <transition name="fade" mode="out-in">
+      <!-- <router-view :key="key"></router-view> -->
+      <router-view></router-view>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+}
+</script>

src/renderer/views/layout/components/Navbar.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-menu class="navbar" mode="horizontal">
+    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <breadcrumb></breadcrumb>
+    <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+        <router-link class="inlineBlock" to="/">
+          <el-dropdown-item>
+            Home
+          </el-dropdown-item>
+        </router-link>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">LogOut</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  border-radius: 0px !important;
+  .hamburger-container {
+    line-height: 58px;
+    height: 50px;
+    float: left;
+    padding: 0 10px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+

src/renderer/views/layout/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-for="item in routes" v-if="!item.hidden&&item.children">
+
+      <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
+        :key="item.children[0].name">
+        <el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
+          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
+          <span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span>
+        </el-menu-item>
+      </router-link>
+
+      <el-submenu v-else :index="item.name||item.path" :key="item.name">
+        <template slot="title">
+          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+          <span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
+        </template>
+
+        <template v-for="child in item.children" v-if="!child.hidden">
+          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
+
+          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
+            <el-menu-item :index="item.path+'/'+child.path">
+              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
+              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarItem',
+  props: {
+    routes: {
+      type: Array
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    hasOneShowingChildren(children) {
+      const showingChildren = children.filter(item => {
+        return !item.hidden
+      })
+      if (showingChildren.length === 1) {
+        return true
+      }
+      return false
+    }
+  }
+}
+</script>

src/renderer/views/layout/components/Sidebar/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <scroll-bar>
+    <el-menu
+      mode="vertical"
+      :show-timeout="200"
+      :default-active="$route.path"
+      :collapse="isCollapse"
+      background-color="#304156"
+      text-color="#bfcbd9"
+      active-text-color="#409EFF"
+    >
+      <sidebar-item :routes="routes"></sidebar-item>
+    </el-menu>
+  </scroll-bar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+import ScrollBar from '@/components/ScrollBar'
+
+export default {
+  components: { SidebarItem, ScrollBar },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    routes() {
+      return this.$router.options.routes
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>

src/renderer/views/layout/components/index.js

@@ -0,0 +1,3 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'

src/renderer/views/layout/mixin/ResizeHandler.js

@@ -0,0 +1,41 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 1024
+const RATIO = 3
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('CloseSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('ToggleDevice', 'mobile')
+      store.dispatch('CloseSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - RATIO < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}

src/renderer/views/login/index11.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="login-container">
+    <div style="position: relative;z-index: 9999;display: grid;grid-template-columns: repeat(3, 1fr);"
+      v-for="(url, index) in urls" :key="index">
+      <webrtc :ref="`webrtc-${index}`"></webrtc>
+      <button @click="startPlay(url, index)">播放</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import webrtc from "../../components/webrtc.vue";
+// import setAgreement from "./setAgreementInfo/setAgreement.vue";
+export default {
+  name: "login",
+  // components: {setAgreement},
+  computed: {},
+  components: {
+    webrtc
+  },
+  data() {
+    return {
+      urls: ['http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE4SEDL9C001X8GE165-0-7normal-0',
+        'http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE1581F5BMD238V00172JR39-0-7normal-0',
+        'http://121.37.237.116:28453/rtc/v1/whep/?app=live&stream=4SEDL9C001X8GE1581F5BMD238V00172JR53-0-0normal-0'
+      ]
+    };
+  },
+
+
+  methods: {
+    startPlay(url, index) {
+      // console.log(this.$refs[`webrtc-${index}`][0]);
+      this.$refs[`webrtc-${index}`][0].startPlay(url);
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss"></style>

src/renderer/views/login/setAgreementInfo/setAgreement.vue

@@ -0,0 +1,204 @@
+<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>
+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>