1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等

xiaoxie

2022-04-21 fb843d41c1e186b2109bfeea73509cad2b135cdc

 web_src/src/components/devicePosition.vue

@@ -1,43 +1,35 @@
<template>
    <div id="devicePosition" style="height: 100%">
        <el-container style="height: 100%">
            <el-header>
                <uiHeader></uiHeader>
            </el-header>
            <el-main>
                <div style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
                    <span style="font-size: 1rem; font-weight: 500">设备定位 ({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span>
                </div>
                <div style="background-color: #ffffff; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left; font-size: 14px;">
                    <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem" type="primary" @click="showDevice">返回</el-button>
                    <!-- <span class="demonstration">从</span> -->
                    <el-date-picker v-model="searchFrom" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
                    <el-date-picker v-model="searchTo" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
                    <el-button-group>
                        <el-button icon="el-icon-search" size="mini" type="primary" @click="showHistoryPath">历史轨迹</el-button>
                        <el-button icon="el-icon-search" size="mini" style="margin-right: 1rem" type="primary" @click="showLatestPosition">最新位置</el-button>
                    </el-button-group>
                    <el-tag style="width: 5rem; text-align: center" size="medium">过期时间</el-tag>
                    <el-input-number size="mini" v-model="expired" :min="300" :controls="false" style="width: 4rem;"></el-input-number>
                    <el-tag style="width: 5rem; text-align: center" size="medium">上报周期</el-tag>
                    <el-input-number size="mini" v-model="interval" :min="1" :controls="false" style="width: 4rem;"></el-input-number>
                    <el-button-group>
                        <el-button icon="el-icon-search" size="mini" type="primary" @click="subscribeMobilePosition">位置订阅</el-button>
                        <el-button icon="el-icon-search" size="mini" type="primary" @click="unSubscribeMobilePosition">取消订阅</el-button>
                    </el-button-group>
                    <el-checkbox size="mini" style="margin-right: 1rem; float: right" v-model="autoList" @change="autoListChange" >自动刷新</el-checkbox>
                </div>
                <div class="mapContainer" style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center; height: calc(100% - 10rem);">
                    <div class="baidumap" id="allmap"></div>
                </div>
            </el-main>
        </el-container>
      <div style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
        <span style="font-size: 1rem; font-weight: 500">设备定位 ({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span>
      </div>
      <div style="background-color: #ffffff; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left; font-size: 14px;">
        <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem" type="primary" @click="showDevice">返回</el-button>
        <!-- <span class="demonstration">从</span> -->
        <el-date-picker v-model="searchFrom" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
        <el-date-picker v-model="searchTo" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
        <el-button-group>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="showHistoryPath">历史轨迹</el-button>
          <el-button icon="el-icon-search" size="mini" style="margin-right: 1rem" type="primary" @click="showLatestPosition">最新位置</el-button>
        </el-button-group>
        <el-tag style="width: 5rem; text-align: center" size="medium">过期时间</el-tag>
        <el-input-number size="mini" v-model="expired" :min="300" :controls="false" style="width: 4rem;"></el-input-number>
        <el-tag style="width: 5rem; text-align: center" size="medium">上报周期</el-tag>
        <el-input-number size="mini" v-model="interval" :min="1" :controls="false" style="width: 4rem;"></el-input-number>
        <el-button-group>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="subscribeMobilePosition">位置订阅</el-button>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="unSubscribeMobilePosition">取消订阅</el-button>
        </el-button-group>
        <el-checkbox size="mini" style="margin-right: 1rem; float: right" v-model="autoList" @change="autoListChange" >自动刷新</el-checkbox>
      </div>
      <div class="mapContainer" style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center; height: calc(100% - 10rem);">
        <div class="baidumap" id="allmap"></div>
      </div>
    </div>
</template>

<script>
import uiHeader from "./UiHeader.vue";
import moment from "moment";
import uiHeader from "../layout/UiHeader.vue";
import geoTools from "./GeoConvertTools.js";
export default {
    name: "devicePosition",
@@ -171,13 +163,14 @@
                this.endTime = null;
            }
            let self = this;
            this.$axios.get(`/api/position/history/${this.deviceId}`, {
            this.$axios({
                method: 'get',
                url:`/api/position/history/${this.deviceId}`,
                params: {
                    start: self.startTime,
                    end: self.endTime,
                },
            })
            .then(function (res) {
            }).then(function (res) {
                self.total = res.data.length;
                self.mobilePositionList = res.data;
                console.log(self.mobilePositionList);
@@ -192,8 +185,7 @@
                        self.showMarkPoints(self);
                    });
                }
            })
            .catch(function (error) {
            }).catch(function (error) {
                console.log(error);
            });
        },
@@ -202,8 +194,10 @@
            this.mapPointList = [];
            this.mobilePositionList = [];
            let self = this;
            this.$axios.get(`/api/position/latest/${this.deviceId}`)
            .then(function (res) {
            this.$axios({
                method: 'get',
                url:`/api/position/latest/${this.deviceId}`
            }).then(function (res) {
                console.log(res.data);
                self.total = res.data.length;
                self.mobilePositionList.push(res.data);
@@ -219,20 +213,20 @@
                        self.showMarkPoints(self);
                    });
                }
            })
            .catch(function (error) {
            }).catch(function (error) {
                console.log(error);
            });
        },
        subscribeMobilePosition: function() {
            let self = this;
            this.$axios.get(`/api/position/subscribe/${this.deviceId}`, {
                params: {
                    expires: self.expired,
                    interval: self.interval,
                },
            })
            .then(function (res) {
            this.$axios({
               method: 'get',
               url:`/api/position/subscribe/${this.deviceId}`,
                    params: {
                        expires: self.expired,
                        interval: self.interval,
                    },
            }).then(function (res) {
                console.log(res.data);
            })
            .catch(function (error) {
@@ -241,22 +235,23 @@
        },
        unSubscribeMobilePosition: function() {
            let self = this;
            this.$axios.get(`/api/position/subscribe/${this.deviceId}`, {
                params: {
                    expires: 0,
                    interval: self.interval,
                },
            this.$axios({
               method: 'get',
               url:`/api/position/subscribe/${this.deviceId}`,
                    params: {
                        expires: 0,
                        interval: self.interval,
                    },
            })
            .then(function (res) {
                console.log(res.data);
            })
            .catch(function (error) {
            }).catch(function (error) {
                console.log(error);
            });
        },
        toGBString: function (dateTime) {
            return (
                dateTime.getFullYear() + 
                dateTime.getFullYear() +
                "-" + this.twoDigits(dateTime.getMonth() + 1) +
                "-" + this.twoDigits(dateTime.getDate()) +
                "T" + this.twoDigits(dateTime.getHours()) +