统计页面添加布局

guanqb

2023-03-10 530a78a71da4567e759e268047e4b46cb9082cca

统计页面添加布局

 package-lock.json

@@ -9,9 +9,11 @@
      "version": "0.1.0",
      "dependencies": {
        "@dvgis/dc-sdk": "^2.17.0",
        "axios": "^1.3.4",
        "core-js": "^3.8.3",
        "echarts": "^5.4.1",
        "element-ui": "^2.15.13",
        "js-base64": "^3.7.5",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1"
      },
@@ -3321,6 +3323,11 @@
        "babel-runtime": "6.x"
      }
    },
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3351,6 +3358,16 @@
      },
      "peerDependencies": {
        "postcss": "^8.1.0"
      }
    },
    "node_modules/axios": {
      "version": "1.3.4",
      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
      "dependencies": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
        "proxy-from-env": "^1.1.0"
      }
    },
    "node_modules/babel-helper-vue-jsx-merge-props": {
@@ -3963,6 +3980,17 @@
      "resolved": "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz",
      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
      "dev": true
    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
      "dependencies": {
        "delayed-stream": "~1.0.0"
      },
      "engines": {
        "node": ">= 0.8"
      }
    },
    "node_modules/commander": {
      "version": "8.3.0",
@@ -4594,6 +4622,14 @@
      },
      "engines": {
        "node": ">= 0.4"
      }
    },
    "node_modules/delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
      "engines": {
        "node": ">=0.4.0"
      }
    },
    "node_modules/depd": {
@@ -5789,7 +5825,6 @@
      "version": "1.15.2",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
      "dev": true,
      "engines": {
        "node": ">=4.0"
      },
@@ -5797,6 +5832,19 @@
        "debug": {
          "optional": true
        }
      }
    },
    "node_modules/form-data": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
      "dependencies": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "mime-types": "^2.1.12"
      },
      "engines": {
        "node": ">= 6"
      }
    },
    "node_modules/forwarded": {
@@ -6593,6 +6641,11 @@
        "@sideway/pinpoint": "^2.0.0"
      }
    },
    "node_modules/js-base64": {
      "version": "3.7.5",
      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz",
      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
    },
    "node_modules/js-message": {
      "version": "1.0.7",
      "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -7165,7 +7218,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -7174,7 +7226,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -8588,6 +8639,11 @@
      "engines": {
        "node": ">= 0.10"
      }
    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
    },
    "node_modules/pseudomap": {
      "version": "1.0.2",
@@ -13534,6 +13590,11 @@
        "babel-runtime": "6.x"
      }
    },
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -13552,6 +13613,16 @@
        "normalize-range": "^0.1.2",
        "picocolors": "^1.0.0",
        "postcss-value-parser": "^4.2.0"
      }
    },
    "axios": {
      "version": "1.3.4",
      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
      "requires": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
        "proxy-from-env": "^1.1.0"
      }
    },
    "babel-helper-vue-jsx-merge-props": {
@@ -14066,6 +14137,14 @@
      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
      "dev": true
    },
    "combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
      "requires": {
        "delayed-stream": "~1.0.0"
      }
    },
    "commander": {
      "version": "8.3.0",
      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -14557,6 +14636,11 @@
        "has-property-descriptors": "^1.0.0",
        "object-keys": "^1.1.1"
      }
    },
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
    },
    "depd": {
      "version": "2.0.0",
@@ -15529,8 +15613,17 @@
    "follow-redirects": {
      "version": "1.15.2",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
      "dev": true
      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
    },
    "form-data": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
      "requires": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "mime-types": "^2.1.12"
      }
    },
    "forwarded": {
      "version": "0.2.0",
@@ -16162,6 +16255,11 @@
        "@sideway/pinpoint": "^2.0.0"
      }
    },
    "js-base64": {
      "version": "3.7.5",
      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz",
      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
    },
    "js-message": {
      "version": "1.0.7",
      "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -16623,14 +16721,12 @@
    "mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
      "dev": true
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
    },
    "mime-types": {
      "version": "2.1.35",
      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
      "dev": true,
      "requires": {
        "mime-db": "1.52.0"
      }
@@ -17676,6 +17772,11 @@
        }
      }
    },
    "proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
    },
    "pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",

 package.json

@@ -9,9 +9,11 @@
  },
  "dependencies": {
    "@dvgis/dc-sdk": "^2.17.0",
    "axios": "^1.3.4",
    "core-js": "^3.8.3",
    "echarts": "^5.4.1",
    "element-ui": "^2.15.13",
    "js-base64": "^3.7.5",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },

 public/favicon.ico

Binary files differ

 public/img/exit.png

 public/img/title-bg.png

Binary files differ

 public/index.html

@@ -15,7 +15,6 @@
            Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

 src/App.vue

@@ -1,9 +1,5 @@
<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav> -->
    <router-view/>
  </div>
</template>
@@ -15,20 +11,5 @@
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

 src/api/layout/index.js

New file
@@ -0,0 +1,7 @@
import request from "@/router/axios.js"

export const getWeather = () => request({
    url: 'https://apia.aidioute.cn/weather/index.php',
    method: 'get',
    requestBaseUrl: 'open',
})

 src/main.js

@@ -1,6 +1,6 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import router from './router/pages'

import * as echarts from 'echarts'
import * as ElementUI from 'element-ui'
@@ -12,6 +12,8 @@
import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min' //mapv包
import DcS3M from '@dvgis/dc-sdk/dist/dc.s3m.min' //s3m包
import '@dvgis/dc-sdk/dist/dc.core.min.css' // 主要样式

import axios from './router/axios'

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
@@ -26,7 +28,7 @@
DC.use(DcS3M) //安装DcS3M库

Vue.use(ElementUI)

Vue.use(axios)

new Vue({
    router,

 src/router/axios.js

New file
@@ -0,0 +1,46 @@
import axios from "axios"

// 获取公共配置域名
import { Base64 } from 'js-base64'
import * as auth from '@/utils/auth'

// 调用后台管理的
const service = axios.create({
    timeout: 600000, // request timeout
})

// 返回其他状态码
service.defaults.validateStatus = function (status) {
    return status >= 200 && status <= 500
}

// 跨域请求，允许保存cookie
// service.defaults.withCredentials = true

// http request拦截
service.interceptors.request.use(
    (config) => {
        // 调用监控平台的
        if (config.requestBaseUrl == 'open') {
            config.baseURL = ''
        } else {
            const meta = config.meta || {}
            const isToken = meta.isToken === false
            if (auth.getToken() && !isToken) {
                config.headers['Blade-Auth'] = "bearer " + auth.getToken()
            }
        }

        //headers判断是否需要
        const authorization = config.authorization === false
        if (!authorization) {
            config.headers["Authorization"] = `Basic ${Base64.encode("saber:saber_secret")}`
        }
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

export default service

 src/router/pages/index.js

File was renamed from src/router/index.js
@@ -1,6 +1,6 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import layout from '../views/layout/index.vue'
import layout from '../../views/layout/index.vue'

Vue.use(VueRouter)

@@ -21,28 +21,28 @@
                meta: {
                    title: '综合统计'
                },
                component: () => import('../views/statistics/index.vue')
                component: () => import('../../views/statistics/index.vue')
            },
            {
                path: 'fireWarning',
                meta: {
                    title: '防火预警'
                },
                component: () => import('../views/fireWarning/index.vue')
                component: () => import('../../views/fireWarning/index.vue')
            },
            {
                path: 'armyLocal',
                meta: {
                    title: '军地协同'
                },
                component: () => import('../views/armyLocal/index.vue')
                component: () => import('../../views/armyLocal/index.vue')
            },
            {
                path: 'management',
                meta: {
                    title: '运维管理'
                },
                component: () => import('../views/management/index.vue')
                component: () => import('../../views/management/index.vue')
            }
        ]
    },

 src/utils/auth.js

New file
@@ -0,0 +1,35 @@
export const getToken = () => {
    return window.sessionStorage.getItem('token')
}

export const setToken = token => {
    return window.sessionStorage.setItem('token', token)
}

export const removeToken = () => {
    return window.sessionStorage.removeItem('token')
}

export function getRefreshToken () {
    return window.sessionStorage.getItem('refresh-token')
}

export function setRefreshToken (token) {
    return window.sessionStorage.setItem('refresh-token', token)
}

export function removeRefreshToken () {
    return window.sessionStorage.removeItem('refresh-token')
}

export const getUserInfo = () => {
    return window.sessionStorage.getItem('userInfo')
}

export const setUserInfo = user => {
    return window.sessionStorage.setItem('userInfo', JSON.stringify(user))
}

export const removeUserInfo = () => {
    return window.sessionStorage.removeItem('userInfo')
}

 src/views/layout/index.vue

@@ -55,6 +55,13 @@
                        </div>
                    </div>
                </div>
                <div class="weather">
                    <span>{{ weather }}</span><span>{{ temperature}}&#8451</span>
                </div>
                <div class="userInfo">
                    <span>{{ userName }}</span>
                    <div class="exit"><img src="/img/exit.png" alt=""></div>
                </div>
            </div>
    </div>
    <div class="main-container">
@@ -75,11 +82,12 @@

<script>
import mapBox from '@/components/map/index.vue'
import { getWeather } from '@/api/layout/index.js'

export default {
  name: 'layout',
  components: {
    mapBox
    mapBox,
  },
  data(){
    return {
@@ -113,7 +121,10 @@
        userOn: false,
        isShowUserDetail: false,
        currentUrl: '/layout/statistics',
        time: "----年--月--日 --:--"
        time: "----年--月--日 --:--",
        weather:'',
        temperature:'',
        userName:'管理员',
    }
  },

@@ -148,6 +159,11 @@
      setInterval(this.getTime, 500);
    },

    // 天气组件
    currentWeather(){
        setInterval(this.getWeather, 60000);
    },

    // 时间组件
    getTime() {
      let yy = new Date().getFullYear();
@@ -171,6 +187,11 @@

  mounted() {
    this.currentTime();
    
    getWeather().then(res=>{
        this.weather = res.data.data.weather.weather
        this.temperature = res.data.data.weather.temp
    })
  },

  watch: {
@@ -245,6 +266,8 @@

        .menu-list.left {
            margin-left: 10px;
            // width: calc((100% - 450px)/2);
            justify-content: space-between;

            .nav-list {
                background: $menu-tab-bg-color;
@@ -253,9 +276,27 @@

        .menu-list.right {
            margin-right: 72px;
            // width: calc((100% - 450px)/2);
            justify-content: space-between;

            .nav-list {
                background: $menu-tab-bg-color;
            }

            .weather {
                width: 100px;
                font-size: 16px;
                span:first-child{
                    margin-right: 10px;
                }
            }

            .userInfo {
                font-size: 16px;
                display: flex;
                .exit {
                    margin-left: 10px;
                }
            }
        }

@@ -290,14 +331,12 @@
                    width: 100%;
                    cursor: default;
                    z-index: 999;
                    // transform: skew(58deg);

                    div {
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        font-size: 16px;
                        // background: $bg-blue;
                        background: $menu-tab-bg-color;
                        cursor: pointer;
                        box-sizing: content-box;
@@ -414,18 +453,6 @@
        position: relative;
        width: 100%;
        height: 100%;

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

        .main-content.take-back {
            width: 0px;
        }
    }
}
</style>

 src/views/statistics/components/leftContainer.vue

New file
@@ -0,0 +1,31 @@
<template>
    <div class="container">
        <h1 style="color:red;font-size:40px,">左边！！</h1>
    </div>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  methods:{}
}

</script>

<style scoped lang="scss">
  .container {
    position: relative;
    width: 100%;
    background-color: blue;
    h1{
        height: 50%;
        width: 80%;
        background-color: red;
    }
  }

</style>

 src/views/statistics/components/rightContainer.vue

New file
@@ -0,0 +1,26 @@
<template>
    <div class="container">
        'right'
    </div>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  methods:{}
}

</script>

<style scoped lang="scss">
  .container {
    position: relative;
    width: 100%;
    height: 100%;
  }

</style>

 src/views/statistics/index.vue

@@ -1,12 +1,18 @@
<template>
    <div class="container">
        'statistics'
        <left-container class="left-container"></left-container>
        <right-container class="right-container"></right-container>
    </div>
</template>

<script>
import leftContainer from './components/leftContainer'
import rightContainer from './components/rightContainer'

export default {
  name: 'statistics',
  components:{leftContainer,rightContainer},

  data(){
    return {

@@ -20,6 +26,28 @@
<style scoped lang="scss">
  .container {
    position: relative;
    width: 100%;
    .left-container {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 400px;
        height: calc(100vh - 60px);
        z-index: 90;
    }

    .right-container {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        width: 400px;
        height: calc(100vh - 60px);
        z-index: 90;
    }
  }

</style>