暂时隐藏综合搜索

shuishen

2024-12-26 5d97138aee496cac01d71a543e9fda6daa646393

暂时隐藏综合搜索

 src/views/layout/index.vue

@@ -9,72 +9,72 @@
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                    <span :class="{ on: showChange(item) }">{{ item.menuName }}</span>
  <div class="wrapper">
    <div class="main-header">
      <div class="menu-list left">
        <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
          @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
          <span :class="{ on: showChange(item) }">{{ item.menuName }}</span>

                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem)">
                            {{
                                subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
          <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
            <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem)">
              {{
                subItem.menuName
              }}
            </div>
          </div>
        </div>
      </div>

            <div class="title">
                <h3>社区警务可视化管理平台</h3>
      <div class="title">
        <h3>社区警务可视化管理平台</h3>
      </div>

      <!-- 菜单导航 -->
      <div class="menu-list right">
        <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
          @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
          <span :class="{ on: showChange(item) }">
            {{
              item.menuName }}
          </span>

          <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
            <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }" v-for="(subItem, subIndex) in item.children"
              :key="subIndex" @click.stop="goToPath(subItem, 4)">
              {{
                subItem.menuName
              }}
            </div>
          </div>
        </div>
      </div>

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: showChange(item) }">
                        {{
                            item.menuName }}
                    </span>

                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }"
                            v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem, 4)">
                            {{
                                subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
      <!-- 用户登录展示的 -->
      <div class="user-infor" @click="openUser">
        <div class="userIcon" :class="{ on: userOn == true }">
          <i class="el-icon-more"></i>
        </div>
        <div class="userDetail" v-if="isShowUserDetail">
          <div class="triangle"></div>
          <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
          <div class="userBtn">
            <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
              <i class="el-icon-user-back"></i>
              运维管理
            </div>

            <!-- 用户登录展示的 -->
            <div class="user-infor" @click="openUser">
                <div class="userIcon" :class="{ on: userOn == true }">
                    <i class="el-icon-more"></i>
                </div>
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
                        </div>
                        <div class="edit" @click="resetPsd">
                            <i class="el-icon-edit"></i>
                            修改密码
                        </div>
                        <div class="edit" @click="goTOLogout">
                            <i class="el-icon-user-quit"></i>
                            退出登录
                        </div>
                    </div>
                </div>
            <div class="edit" @click="resetPsd">
              <i class="el-icon-edit"></i>
              修改密码
            </div>
            <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
            <div class="edit" @click="goTOLogout">
              <i class="el-icon-user-quit"></i>
              退出登录
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{userName}}</div>
@@ -87,68 +87,68 @@
                    </div>
                </div>
            </div>-->
        </div>

        <div class="main-container">
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                    <router-view ref="target-name"></router-view>
                </div>

                <div slot="copyrightText">
                    <div class="copyright-box" v-show="!this.$store.state.popupParams.isShowHomeContent">版权所有：信州分局
                        <br />技术支持：户政大队/科信大队
                    </div>
                    <div :class="{ 'copyright-box-shouye': isShouYe, 'copyright-box': !isShouYe, }"
                        v-show="this.$store.state.popupParams.isShowHomeContent">
                        版权所有：信州分局
                        <br />技术支持：户政大队/科信大队
                    </div>
                </div>

                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
                <div slot="resetPopup">
                    <el-dialog title="修改密码" :visible.sync="resetPsdPopupShow" :modal="true" :before-close="resetBeforeClose"
                        :modal-append-to-body="false" :close-on-click-modal="false" class="reset-popup-box">
                        <div class="reset-popup-body">
                            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                                <el-form-item label="原密码" prop="oldPassword">
                                    <el-input v-model="form.oldPassword" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassword">
                                    <el-input v-model="form.newPassword" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="newPassword1">
                                    <el-input v-model="form.newPassword1" type="password"></el-input>
                                </el-form-item>
                                <div class="btn-box">
                                    <el-button type="primary" @click="submitForm">提交</el-button>
                                    <el-button @click="cancelSF">取消</el-button>
                                </div>
                            </el-form>
                        </div>
                    </el-dialog>
                </div>
            </map-box>
        </div>
    </div>

    <div class="main-container">
      <!-- 地图区域 -->
      <map-box ref="modalForm">
        <!-- 主体内容区域 -->
        <div slot="mainContent" class="main-content" id="MainContent"
          :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
          <router-view ref="target-name"></router-view>
        </div>

        <div slot="copyrightText">
          <div class="copyright-box" v-show="!this.$store.state.popupParams.isShowHomeContent">版权所有：信州分局
            <br />技术支持：户政大队/科信大队
          </div>
          <div :class="{ 'copyright-box-shouye': isShouYe, 'copyright-box': !isShouYe, }"
            v-show="this.$store.state.popupParams.isShowHomeContent">
            版权所有：信州分局
            <br />技术支持：户政大队/科信大队
          </div>
        </div>

        <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
          :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
          :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
          @click="flexibelClick"></el-button>
        <div slot="resetPopup">
          <el-dialog title="修改密码" :visible.sync="resetPsdPopupShow" :modal="true" :before-close="resetBeforeClose"
            :modal-append-to-body="false" :close-on-click-modal="false" class="reset-popup-box">
            <div class="reset-popup-body">
              <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input v-model="form.oldPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="form.newPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="newPassword1">
                  <el-input v-model="form.newPassword1" type="password"></el-input>
                </el-form-item>
                <div class="btn-box">
                  <el-button type="primary" @click="submitForm">提交</el-button>
                  <el-button @click="cancelSF">取消</el-button>
                </div>
              </el-form>
            </div>
          </el-dialog>
        </div>
      </map-box>
    </div>
  </div>
</template>

<script>
let HTUrl = ''

if (process.env.NODE_ENV == 'development') {
    // 开发
    HTUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_HTURL
  // 开发
  HTUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_HTURL
} else {
    // 部署
    HTUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_HTURL
  // 部署
  HTUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_HTURL
}


@@ -162,355 +162,355 @@
import { mapGetters } from "vuex"

export default {
    provide() {
        return {
            userInfo: JSON.parse(getUserInfo()),
        }
    },

    data() {
        return {
            form: {},
            rules: {
                oldPassword: [{ required: true, message: "必填" }],
                newPassword: [{ required: true, message: "必填" }],
                newPassword1: [{ required: true, message: "必填" }]
            },
            resetPsdPopupShow: false,
            menuLeftList: [
                {
                    menuName: '首页',
                    path: '/layout/home'
                },
                {
                    menuName: '社区感知',
                    path: '/layout/house'
                },
                {
                    menuName: '警力资源',
                    path: '/layout/policeresouce'

                },
                {
                    menuName: '视频监控',
                    path: '/layout/video/list',
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '视频预览',
                            path: '/layout/video/list'
                        },
                        {
                            menuName: '视频巡逻',
                            path: '/layout/video/region'
                        }
                    ]
                },
            ],
            menuRightList: [
                {
                    menuName: '电子沙盘',
                    path: '/layout/activity'
                },
                {
                    menuName: '三张图',
                    path: '/layout/policeinfor',
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '警情信息',
                            path: '/layout/policeinfor'
                        },
                        {
                            menuName: '可用资源图',
                            path: '/layout/available'
                        },
                        {
                            menuName: '风险隐患图',
                            path: '/layout/risk'
                        }
                    ]
                },
                {
                    menuName: '扫码应用',
                    path: '/layout/scanOrCode',
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '群众上报',
                            path: '/layout/scanOrCode'
                        },
                        {
                            menuName: '九小场所',
                            path: '/layout/site'
                        },
                        {
                            menuName: '矛盾纠纷',
                            path: '/layout/contradictionEventShow'
                        },
                        {
                            menuName: '反诈宣防',
                            path: '/layout/antiFraudShow'
                        },
                        {
                            menuName: '租赁信息',
                            path: '/layout/rentalInfo'
                        },
                        {
                            menuName: '阵地管理',
                            path: '/layout/positionManage'
                        },
                        {
                            menuName: '从业人员',
                            path: '/layout/practitionersManage'
                        },
                        {
                            menuName: '扫码报警',
                            path: '/layout/policeAlarmRecordsManage'
                        },
                        {
                            menuName: '综合搜索',
                            path: '/layout/comprehensiveSearch'
                        },
                    ]
                },
                {
                    menuName: '智能搜索',
                    path: '/layout/intelligentSearch'
                }
            ],

            show: true,

            leftShow: true,

            boxWidth: 0,

            currentUrl: '/layout/home',
            userOn: false,
            isShowUserDetail: false,
            user: {},

            currentUserInfo: JSON.parse(getUserInfo()),

            //刷新token锁
            refreshLock: false,
            //刷新token的时间
            refreshTime: "",
            isShouYe: true,
        }
    },

    computed: {
        ...mapGetters(['permission']),

        showChange() {
            return (item) => {
                if ('children' in item && item.children.length) {
                    return item.children.some(i => this.currentUrl == i.path)
                } else {
                    return this.currentUrl.indexOf(item.path) != -1
                }
            }
        }
    },

    created() {
        this.currentUrl = this.$route.path
        this.init()

        //实时检测刷新token
        this.refreshToken()
    },

    watch: {
        $route: {
            handler(newPath, oldPath) {
                this.currentUrl = newPath.path

                this.$nextTick(() => {
                    // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.compass-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                })

                if (this.currentUrl == '/layout/home') {
                    this.leftShow = false
                    this.isShouYe = true
                } else {
                    this.leftShow = true
                    this.isShouYe = false
                }
            },
            immediate: true
        }
    },

    mounted() {
    },

    methods: {
        // 重置密码
        resetPsd() {
            this.resetPsdPopupShow = true
        },

        // 提交修改
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    updatePassword(md5(this.form.oldPassword), md5(this.form.newPassword), md5(this.form.newPassword1)).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: "success",
                                message: "修改密码成功!"
                            })
                            this.resetBeforeClose()
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg
                            })
                        }
                    }, error => {
                        window.console.log(error)
                    })
                } else {
                    return false
                }
            })
        },

        // 取消提交
        cancelSF() {
            this.resetBeforeClose()
        },

        // 弹窗关闭事件
        resetBeforeClose() {
            this.$refs.form.resetFields()
            this.resetPsdPopupShow = false
        },

        init() {
            this.user = this.$store.state.user.userInfo
        },
        //登出
        goTOLogout() {
            this.$store.dispatch("LogOut").then(() => {
                this.$router.push({ path: "/login" })
            })
        },

        // 跳转页面
        goToPage(pagePath) {
            this.$router.push(pagePath)
        },

        /**
         * @description: 跳转运维管理平台
         * @return {*}
         */
        goToBack() {
            var path = HTUrl + "?token=" + getToken()
            window.open(path)
        },
        /**
         * @description: 路由跳转的事件
         *                  通过给父元素绑定事件-子元素触发，并传入参数
         * @param {*} e 子元素上绑定的的自定义属性
         * @return {*} 没有返回值
         */
        goToPath(params, key = 0) {
            console.log(params, key, 465)

            if (params.path) {
                if (this.$route.path == params.path) return
                this.$router.push(params.path)
            } else {
                params.childrenFlag = !params.childrenFlag
            }
        },

        flexibelClick() {
            this.show = !this.show

            if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

            if (this.show) {
                // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                document.querySelector('.over-look-btn').classList.add('shrink-btn')
                document.querySelector('.compass-btn').classList.add('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
            } else {
                // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                document.querySelector('.compass-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
            }
        },

        resize(val, flag = false) {
            this.boxWidth = val

            this.show = flag

            if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

            this.$nextTick(() => {
                if (this.show) {
                    // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                    document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                    document.querySelector('.over-look-btn').classList.add('shrink-btn')
                    document.querySelector('.compass-btn').classList.add('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
                } else {
                    // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.compass-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                }
            })
        },

        openUser() {
            this.userOn = !this.userOn
            this.isShowUserDetail = !this.isShowUserDetail
        },

        // 定时检测token
        refreshToken() {
            this.refreshTime = setInterval(() => {
                const token = getStore({
                    name: "store-token",
                    debug: true
                }) || {}
                const date = calcDate(token.datetime, new Date().getTime())
                if (validatenull(date)) return
                if (date.seconds >= 3000 && !this.refreshLock) {
                    this.refreshLock = true
                    this.$store
                        .dispatch("refreshToken")
                        .then(() => {
                            this.refreshLock = false
                        })
                        .catch(() => {
                            this.refreshLock = false
                        })
                }
            }, 10000)
        }
  provide () {
    return {
      userInfo: JSON.parse(getUserInfo()),
    }
  },

  data () {
    return {
      form: {},
      rules: {
        oldPassword: [{ required: true, message: "必填" }],
        newPassword: [{ required: true, message: "必填" }],
        newPassword1: [{ required: true, message: "必填" }]
      },
      resetPsdPopupShow: false,
      menuLeftList: [
        {
          menuName: '首页',
          path: '/layout/home'
        },
        {
          menuName: '社区感知',
          path: '/layout/house'
        },
        {
          menuName: '警力资源',
          path: '/layout/policeresouce'

        },
        {
          menuName: '视频监控',
          path: '/layout/video/list',
          childrenFlag: false,
          children: [
            {
              menuName: '视频预览',
              path: '/layout/video/list'
            },
            {
              menuName: '视频巡逻',
              path: '/layout/video/region'
            }
          ]
        },
      ],
      menuRightList: [
        {
          menuName: '电子沙盘',
          path: '/layout/activity'
        },
        {
          menuName: '三张图',
          path: '/layout/policeinfor',
          childrenFlag: false,
          children: [
            {
              menuName: '警情信息',
              path: '/layout/policeinfor'
            },
            {
              menuName: '可用资源图',
              path: '/layout/available'
            },
            {
              menuName: '风险隐患图',
              path: '/layout/risk'
            }
          ]
        },
        {
          menuName: '扫码应用',
          path: '/layout/scanOrCode',
          childrenFlag: false,
          children: [
            {
              menuName: '群众上报',
              path: '/layout/scanOrCode'
            },
            {
              menuName: '九小场所',
              path: '/layout/site'
            },
            {
              menuName: '矛盾纠纷',
              path: '/layout/contradictionEventShow'
            },
            {
              menuName: '反诈宣防',
              path: '/layout/antiFraudShow'
            },
            {
              menuName: '租赁信息',
              path: '/layout/rentalInfo'
            },
            {
              menuName: '阵地管理',
              path: '/layout/positionManage'
            },
            {
              menuName: '从业人员',
              path: '/layout/practitionersManage'
            },
            {
              menuName: '扫码报警',
              path: '/layout/policeAlarmRecordsManage'
            },
            /* {
                menuName: '综合搜索',
                path: '/layout/comprehensiveSearch'
            }, */
          ]
        },
        {
          menuName: '智能搜索',
          path: '/layout/intelligentSearch'
        }
      ],

      show: true,

      leftShow: true,

      boxWidth: 0,

      currentUrl: '/layout/home',
      userOn: false,
      isShowUserDetail: false,
      user: {},

      currentUserInfo: JSON.parse(getUserInfo()),

      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      isShouYe: true,
    }
  },

  computed: {
    ...mapGetters(['permission']),

    showChange () {
      return (item) => {
        if ('children' in item && item.children.length) {
          return item.children.some(i => this.currentUrl == i.path)
        } else {
          return this.currentUrl.indexOf(item.path) != -1
        }
      }
    }
  },

  created () {
    this.currentUrl = this.$route.path
    this.init()

    //实时检测刷新token
    this.refreshToken()
  },

  watch: {
    $route: {
      handler (newPath, oldPath) {
        this.currentUrl = newPath.path

        this.$nextTick(() => {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
          document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
          document.querySelector('.over-look-btn').classList.remove('shrink-btn')
          document.querySelector('.compass-btn').classList.remove('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
        })

        if (this.currentUrl == '/layout/home') {
          this.leftShow = false
          this.isShouYe = true
        } else {
          this.leftShow = true
          this.isShouYe = false
        }
      },
      immediate: true
    }
  },

  mounted () {
  },

  methods: {
    // 重置密码
    resetPsd () {
      this.resetPsdPopupShow = true
    },

    // 提交修改
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          updatePassword(md5(this.form.oldPassword), md5(this.form.newPassword), md5(this.form.newPassword1)).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改密码成功!"
              })
              this.resetBeforeClose()
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              })
            }
          }, error => {
            window.console.log(error)
          })
        } else {
          return false
        }
      })
    },

    // 取消提交
    cancelSF () {
      this.resetBeforeClose()
    },

    // 弹窗关闭事件
    resetBeforeClose () {
      this.$refs.form.resetFields()
      this.resetPsdPopupShow = false
    },

    init () {
      this.user = this.$store.state.user.userInfo
    },
    //登出
    goTOLogout () {
      this.$store.dispatch("LogOut").then(() => {
        this.$router.push({ path: "/login" })
      })
    },

    // 跳转页面
    goToPage (pagePath) {
      this.$router.push(pagePath)
    },

    /**
     * @description: 跳转运维管理平台
     * @return {*}
     */
    goToBack () {
      var path = HTUrl + "?token=" + getToken()
      window.open(path)
    },
    /**
     * @description: 路由跳转的事件
     *                  通过给父元素绑定事件-子元素触发，并传入参数
     * @param {*} e 子元素上绑定的的自定义属性
     * @return {*} 没有返回值
     */
    goToPath (params, key = 0) {
      console.log(params, key, 465)

      if (params.path) {
        if (this.$route.path == params.path) return
        this.$router.push(params.path)
      } else {
        params.childrenFlag = !params.childrenFlag
      }
    },

    flexibelClick () {
      this.show = !this.show

      if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

      if (this.show) {
        // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
        document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
        document.querySelector('.screen-full-btn').classList.add('shrink-btn')
        document.querySelector('.over-look-btn').classList.add('shrink-btn')
        document.querySelector('.compass-btn').classList.add('shrink-btn')
        document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
      } else {
        // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
        document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
        document.querySelector('.over-look-btn').classList.remove('shrink-btn')
        document.querySelector('.compass-btn').classList.remove('shrink-btn')
        document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
      }
    },

    resize (val, flag = false) {
      this.boxWidth = val

      this.show = flag

      if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

      this.$nextTick(() => {
        if (this.show) {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
          document.querySelector('.screen-full-btn').classList.add('shrink-btn')
          document.querySelector('.over-look-btn').classList.add('shrink-btn')
          document.querySelector('.compass-btn').classList.add('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
        } else {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
          document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
          document.querySelector('.over-look-btn').classList.remove('shrink-btn')
          document.querySelector('.compass-btn').classList.remove('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
        }
      })
    },

    openUser () {
      this.userOn = !this.userOn
      this.isShowUserDetail = !this.isShowUserDetail
    },

    // 定时检测token
    refreshToken () {
      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: "store-token",
          debug: true
        }) || {}
        const date = calcDate(token.datetime, new Date().getTime())
        if (validatenull(date)) return
        if (date.seconds >= 3000 && !this.refreshLock) {
          this.refreshLock = true
          this.$store
            .dispatch("refreshToken")
            .then(() => {
              this.refreshLock = false
            })
            .catch(() => {
              this.refreshLock = false
            })
        }
      }, 10000)
    }
  }
}
</script>

@@ -518,325 +518,325 @@
$bg-blue: rgba(24, 33, 92, 0.9);

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .main-header {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: left;
    font-size: 44px;
    font-weight: bold;
    color: #fff;
    z-index: 99;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(/img/box/title-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index: -1;
      opacity: 0.85;
    }

    .title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 450px;
      font-size: 24px;
      // text-align: center;
      overflow: hidden;
      letter-spacing: 6px;

      &>img {
        // width: 100%;
        height: 80%;
        margin: 0 10px 0 10px;
        // margin-top: -5px;
      }
    }

    .menu-list.left {
      margin-left: 58px;

      .nav-list {
        background: $menu-tab-bg-color;
        // border-radius: 10px 16px 10px 16px;
        transform: skew(61.5deg);

        &>span {
          transform: skew(-61.5deg);
        }
      }
    }

    .menu-list.right {
      margin-right: 58px;

      .nav-list {
        background: $menu-tab-bg-color;
        // border-radius: 16px 10px 16px 10px;
        transform: skew(-61.5deg);

        &>span {
          transform: skew(61.5deg);
        }
      }
    }

    .menu-list {
      display: flex;
      align-items: center;

      &>.nav-list {

        // color: rgba(32, 106, 181, 1);
        // border-bottom: 2px solid #409eff;
        &>span.on {
          color: rgba(252, 189, 86, 1);
        }
      }

      .nav-list {
        margin: 0 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 36px;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0.5px;
        cursor: pointer;
      }

      .sub-nav-list {
        border-top: 14px solid transparent;
        position: absolute;
        top: 28px;
        width: 100%;
        cursor: default;
        z-index: 999;
        transform-origin: top;

        div {
          height: 36px;
          text-align: center;
          line-height: 36px;
          font-size: 16px;
          // background: $bg-blue;
          background: $table-body-tr-n-color;
          cursor: pointer;
          box-sizing: content-box;

          &.on {
            color: rgba(252, 189, 86, 1);
          }
        }

        div:first-child {
          padding-top: 10px;
        }

        div:last-child {
          padding-bottom: 10px;
        }

        div:hover {
          background: $table-body-tr-2n-color !important;
        }
      }

      &.left {
        .sub-nav-list {
          left: 12px;
          transform: skew(-61.5deg);
        }
      }

      &.right {
        .sub-nav-list {
          left: -12px;
          transform: skew(61.5deg);
        }
      }
    }

    .user-infor {
      position: absolute;
      top: 0;
      right: 0;
      width: 42px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      cursor: pointer;

      .userIcon {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: $menu-tab-bg-color;
        box-shadow: inset 0 0 10px $menu-tab-shadow;
        border-radius: 50%;
      }

      .userIcon.on {
        color: rgba(252, 189, 86, 1);
      }

      .userDetail {
        width: 160px;
        position: absolute;
        top: 64px;
        right: 4px;
        background: $menu-tab-bg-color;
        border-radius: 8px;
        cursor: default;

        .triangle {
          position: absolute;
          top: -16px;
          right: 20px;
          width: 0px;
          height: 0px;
          border: 8px solid #000;
          border-top-color: transparent;
          border-bottom-color: rgba(3, 82, 102, 0.8);
          border-left-color: transparent;
          border-right-color: transparent;
        }

        .userName {
          margin-top: 4px;
          width: 100%;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          font-weight: 500;
          box-sizing: content-box;
          color: #fff;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        .userBtn {
          margin-bottom: 4px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;
          font-weight: normal;

          &>div {
            margin-top: 4px;
            width: 100px;
            height: 32px;
            line-height: 32px;
            background-color: rgba(159, 165, 255, 0.6);
            border-radius: 4px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .main-container {
    position: relative;
    width: 100%;
    height: 100%;

    .main-header {
        display: flex;
        justify-content: space-between;
        position: absolute;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: left;
        font-size: 44px;
        font-weight: bold;
        color: #fff;
        z-index: 99;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(/img/box/title-bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: -1;
            opacity: 0.85;
        }

        .title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 450px;
            font-size: 24px;
            // text-align: center;
            overflow: hidden;
            letter-spacing: 6px;

            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
                // margin-top: -5px;
            }
        }

        .menu-list.left {
            margin-left: 58px;

            .nav-list {
                background: $menu-tab-bg-color;
                // border-radius: 10px 16px 10px 16px;
                transform: skew(61.5deg);

                &>span {
                    transform: skew(-61.5deg);
                }
            }
        }

        .menu-list.right {
            margin-right: 58px;

            .nav-list {
                background: $menu-tab-bg-color;
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-61.5deg);

                &>span {
                    transform: skew(61.5deg);
                }
            }
        }

        .menu-list {
            display: flex;
            align-items: center;

            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }

            .nav-list {
                margin: 0 10px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 110px;
                height: 36px;
                font-size: 18px;
                font-weight: bold;
                letter-spacing: 0.5px;
                cursor: pointer;
            }

            .sub-nav-list {
                border-top: 14px solid transparent;
                position: absolute;
                top: 28px;
                width: 100%;
                cursor: default;
                z-index: 999;
                transform-origin: top;

                div {
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    font-size: 16px;
                    // background: $bg-blue;
                    background: $table-body-tr-n-color;
                    cursor: pointer;
                    box-sizing: content-box;

                    &.on {
                        color: rgba(252, 189, 86, 1);
                    }
                }

                div:first-child {
                    padding-top: 10px;
                }

                div:last-child {
                    padding-bottom: 10px;
                }

                div:hover {
                    background: $table-body-tr-2n-color !important;
                }
            }

            &.left {
                .sub-nav-list {
                    left: 12px;
                    transform: skew(-61.5deg);
                }
            }

            &.right {
                .sub-nav-list {
                    left: -12px;
                    transform: skew(61.5deg);
                }
            }
        }

        .user-infor {
            position: absolute;
            top: 0;
            right: 0;
            width: 42px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 24px;
            cursor: pointer;

            .userIcon {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                background: $menu-tab-bg-color;
                box-shadow: inset 0 0 10px $menu-tab-shadow;
                border-radius: 50%;
            }

            .userIcon.on {
                color: rgba(252, 189, 86, 1);
            }

            .userDetail {
                width: 160px;
                position: absolute;
                top: 64px;
                right: 4px;
                background: $menu-tab-bg-color;
                border-radius: 8px;
                cursor: default;

                .triangle {
                    position: absolute;
                    top: -16px;
                    right: 20px;
                    width: 0px;
                    height: 0px;
                    border: 8px solid #000;
                    border-top-color: transparent;
                    border-bottom-color: rgba(3, 82, 102, 0.8);
                    border-left-color: transparent;
                    border-right-color: transparent;
                }

                .userName {
                    margin-top: 4px;
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    font-size: 14px;
                    font-weight: 500;
                    box-sizing: content-box;
                    color: #fff;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
                }

                .userBtn {
                    margin-bottom: 4px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    font-size: 16px;
                    font-weight: normal;

                    &>div {
                        margin-top: 4px;
                        width: 100px;
                        height: 32px;
                        line-height: 32px;
                        background-color: rgba(159, 165, 255, 0.6);
                        border-radius: 4px;
                        cursor: pointer;
                    }
                }
            }
        }
    .main-content.spread {
      position: absolute;
      top: 60px;
      height: calc(100% - 60px);
      width: 400px;
      z-index: 99;
    }

    .main-container {
        position: relative;
        width: 100%;
        height: 100%;

        .main-content.spread {
            position: absolute;
            top: 60px;
            height: calc(100% - 60px);
            width: 400px;
            z-index: 99;
        }

        .main-content.take-back {
            width: 0px;
        }


        .copyright-box {
            position: fixed;
            bottom: 1%;
            right: 1%;
            color: #fff;
            font-size: 14px;
            text-align: left;
            z-index: 9;
        }

        .copyright-box-shouye {
            position: absolute;
            bottom: calc((100% - maxCountSizeVh(120)) / 3);
            right: calc(400 / 1920 * 100vw);
            color: #fff;
            font-size: 14px;
            text-align: left;
            z-index: 9;
        }
    .main-content.take-back {
      width: 0px;
    }


    .copyright-box {
      position: fixed;
      bottom: 1%;
      right: 1%;
      color: #fff;
      font-size: 14px;
      text-align: left;
      z-index: 9;
    }

    .copyright-box-shouye {
      position: absolute;
      bottom: calc((100% - maxCountSizeVh(120)) / 3);
      right: calc(400 / 1920 * 100vw);
      color: #fff;
      font-size: 14px;
      text-align: left;
      z-index: 9;
    }
  }
}

.flexible-btn {
    padding: 0 2px;
    position: fixed;
    top: 50%;
    left: 0px;
    // z-index: 11;
    z-index: 99;
    width: 32px;
    height: 64px;
    color: #fff;
    background: $bg-color;
    border-color: $bg-color;
    text-align: center;
    line-height: 32px;
    border-radius: 0 5px 5px 0;
    white-space: inherit !important;
    box-shadow: 1px 0px 4px 1px $bg-color;
    transform: translate(0px, -50%);
  padding: 0 2px;
  position: fixed;
  top: 50%;
  left: 0px;
  // z-index: 11;
  z-index: 99;
  width: 32px;
  height: 64px;
  color: #fff;
  background: $bg-color;
  border-color: $bg-color;
  text-align: center;
  line-height: 32px;
  border-radius: 0 5px 5px 0;
  white-space: inherit !important;
  box-shadow: 1px 0px 4px 1px $bg-color;
  transform: translate(0px, -50%);

    i {
        font-size: 16px;
    }
  i {
    font-size: 16px;
  }
}

.flexible-btn.spread {
    left: 400px;
  left: 400px;
}

.flexible-btn.take-back {
    left: 0px;
  left: 0px;
}
</style>