Merge pull request 'master' (#4) from master into lukeyan

Reviewed-on: #4

package.json

@@ -3,18 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+  
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "dev": "vue-cli-service serve"
   },
   "dependencies": {
+    "@liveqing/liveplayer": "2.6.9",
     "axios": "^1.3.5",
     "cookie": "^0.5.0",
+    "copy-webpack-plugin": "4.6.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.13",
     "js-cookie": "^3.0.1",
-    "less": "4",
+    "less": "3.9.0",
     "less-loader": "7",
     "vue": "^2.6.11",
     "vue-router": "3",

public/index.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
+    <script src="<%= BASE_URL %>liveplayer-lib.min.js"></script>
     <title>镇海平安企业系统</title>
   </head>
   <style>

src/App.vue

@@ -58,7 +58,69 @@
   font-size: 0;
 }
 
+.el-tooltip__popper {
+  max-width: 600px;
+}
+
 .el-scrollbar__thumb {
   display: none;
 }
+
+.bottomZS {
+  position: absolute;
+  width: 100%;
+  height: 30px;
+  bottom: 3px;
+  left: 0;
+  background: url("~@/assets/companyFile/装饰0921.png") no-repeat;
+  background-size: 100% 100%;
+  transform: rotateX(180deg);
+}
+
+.topZS {
+  position: absolute;
+  width: 100%;
+  height: 30px;
+  top: 3px;
+  left: 0;
+  background: url("~@/assets/companyFile/装饰0921.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.block {
+  position: absolute;
+  box-sizing: border-box;
+  right: 10px;
+  bottom: 10px;
+  width: 100%;
+  height: 42px;
+
+  .el-pagination.is-background .btn-next,
+  .el-pagination.is-background .btn-prev,
+  .el-pagination.is-background .el-pager li {
+    margin: 0 5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: #eaeff7;
+    min-width: 30px;
+    border-radius: 2px;
+    border: 1px solid rgba(40, 132, 126, 1);
+  }
+
+  .btn-prev {
+    margin: 0 5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: #eaeff7;
+    min-width: 30px;
+    border-radius: 2px;
+    border: 1px solid rgba(40, 132, 126, 1);
+  }
+
+  // /deep/.el-select-dropdown {
+
+  //     background-color: rgba(255, 255, 255, 0);
+  //     background: url('~@/assets/companyFile/001.png') no-repeat;
+  //     background-size: 100% 100%;
+  //     border: 0;
+  // }
+}
 </style>

src/api/archives/index.js

@@ -7,3 +7,36 @@ export function safeIndex(params) {
         params
     })
 }
+//企业平安指数
+export function realTimeMonitoring(params) {
+    return request({
+        url: '/safety/enterpriseArchives/realTimeMonitoring',
+        method: 'get',
+        params
+    })
+}
+//实时人脸卡口流量
+export function realTimePassageFlowFace(params) {
+    return request({
+        url: '/safety/enterpriseArchives/realTimePassageFlow/face',
+        method: 'get',
+        params
+    })
+}
+//实时车辆卡口流量
+export function realTimePassageFlowVehicle(params) {
+    return request({
+        url: '/safety/enterpriseArchives/realTimePassageFlow/vehicle',
+        method: 'get',
+        params
+    })
+}
+//预警处置
+export function warningDisposal(params) {
+    return request({
+        url: '/safety/enterpriseArchives/warningDisposal',
+        method: 'get',
+        params
+    })
+}
+

src/api/monitor/index.js

@@ -0,0 +1,99 @@
+import request from '@/utils/request'
+
+const API = {
+    //获取设备列表
+    getinfoList: function (params) {
+        return request({
+            url: '/video/control/getVideoList',
+            method: 'post',
+            params
+        })
+    },
+    //     getToken:function(){
+    // return axios({
+    //     url:'http://192.168.0.45:20000/api/v1/login?username=admin&password=af7548eedff8e737c0e4b2a669497290&url_token_only=true',
+    //     method:'post'
+    // })
+    //},
+    //实时直播
+    liveStart: function (params) {
+        return request({
+            url: '/video/control/stream/start',
+            method: 'post',
+            params
+        })
+    },
+    //结束直播
+    liveStop: function (params) {
+        return request({
+            url: '/video/control/stream/stop',
+            method: 'post',
+            params
+        })
+    },
+    //云台控制
+    cloudControl: function (params) {
+        return request({
+            url: '/video/control/getCloudControl',
+            method: 'post',
+            params
+        })
+    },
+    //焦点光圈
+    fiControl: function (params) {
+        return request({
+            url: '/video/control/getFiControl',
+            method: 'post',
+            params
+        })
+    },
+    //语音喊话
+    getTalk: function (params) {
+        return request({
+            url: '/video/control/getTalk',
+            method: 'post',
+            params
+        })
+    },
+    //开始回放
+    playbackStart: function (params) {
+        return request({
+            url: '/video/control/playback/start',
+            method: 'post',
+            params
+        })
+    },
+    //结束回放
+    playbackStop: function (params) {
+        return request({
+            url: '/video/control/playback/stop',
+            method: 'post',
+            params
+        })
+    },
+    //回放控制
+    playbackControl: function (params) {
+        return request({
+            url: '/video/control/playback/control',
+            method: 'post',
+            params
+        })
+    },
+    //更新监控设备状态
+    deviceChannellist: function (params) {
+        return request({
+            url: '/video/control/device/channellist',
+            method: 'post',
+            params
+        })
+    },
+    //获取字典表
+    getDictList: function (params) {
+        return request({
+            url: '/gatherCommon/dict/list',
+            method: 'get',
+            params
+        })
+    }
+}
+export default API

src/components/videoPlayer/index.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="player">
+        <!-- <button @click="closeLive()" class="closeLive" v-if="button"></button> -->
+        <LivePlayer :id='"A" + video.index' :videoUrl="video.url" fluent :autoplay="true" :loading="true" live stretch
+            :controls="control" @error="playError">
+        </LivePlayer>
+    </div>
+</template>
+
+<script>
+// import API from "@/api/monitor";
+// import axios from 'axios'
+import LivePlayer from '@liveqing/liveplayer'
+export default {
+    name: "playVideo",
+    components: {
+        LivePlayer
+    },
+    props: {
+        video: {
+            url: "",
+            index: 0,
+            list: {},
+        },
+        control: {
+            type: Boolean,
+            default: false
+        },
+        button: {
+            type: Boolean,
+            default: true
+        },
+    },
+    data() { return { loading: true } },
+    mounted() {
+        this.initVideoPlayer();
+    },
+    methods: {
+        initVideoPlayer() {
+
+        },
+        // closeLive() {
+        //     API.liveStop({ villageCode: this.video.list.villageCode, gbsNvrNo: this.video.list.gbsNvrNo, gbsChannelNo: this.video.list.gbsChannelNo })
+        //         .then((res) => {
+        //             new axios({
+        //                 url: res.data,
+        //                 method: 'get'
+        //             }).then(() => {
+        //                 this.$emit("liveClose")
+
+
+        //             })
+        //         })
+        // },
+        playError(val) {
+            console.log(val, '播放出错回调');
+        }
+    }
+}
+</script>
+<style scoped lang="less">
+.player {
+    background-color: rgba(0, 0, 0, 0);
+    margin: 0 auto;
+
+    color: white;
+    text-align: center;
+
+    .closeLive {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        background-color: #fff;
+        background: url("~@/assets/companyFile/常态.png") no-repeat;
+        background-size: 100% 100%;
+        top: 30px;
+        right: 30px;
+        z-index: 11;
+
+    }
+
+}
+
+#A5 {
+    width: 85.4%;
+    height: 100%;
+    margin: 0 auto;
+}
+
+.video-js .vjs-tech {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-position: center;
+    /* object-fit: cover; */
+}
+
+.A1-dimensions {
+    width: 100%;
+    height: 100%;
+}
+
+.A2-dimensions {
+    width: 100%;
+    height: 100%;
+}
+
+.A3-dimensions {
+    width: 100%;
+    height: 100%;
+}
+
+.A4-dimensions {
+    width: 100%;
+    height: 100%;
+}
+
+.A5-dimensions {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/utils/request.js

@@ -5,6 +5,7 @@ import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
   baseURL: 'http://172.18.113.50:8080',
+  // baseURL: `http://${window.location.host}`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },
 })

src/views/archives/index.vue

@@ -147,27 +147,30 @@
                         </div>
                         <div class="jibenhang">
                             <div class="jibenhangTitle">企业地址</div>
-                            <div class="jibenhangText">{{ companyData.companyAddress }}</div>
+                            <el-tooltip :content="companyData.companyAddress" placement="bottom-start">
+                                <div class="jibenhangText">{{ companyData.companyAddress }}</div>
+                            </el-tooltip>
                         </div>
                         <div class="jibenhang">
                             <div class="jibenhangTitle">营业执照经营范围</div>
-                            <div class="jibenhangText">{{ companyData.businessScope }}</div>
+                            <el-tooltip :content="companyData.businessScope" placement="bottom-start">
+                                <div class="jibenhangText">{{ companyData.businessScope }}</div>
+                            </el-tooltip>
                         </div>
                     </div>
                     <div class="bottomZS"></div>
                     <el-dialog title="企业图片" :visible.sync="diaVisible" class="picForm">
                         <img :src="companyData.picUrl" @mouseover="showpic()">
-                        <div class="zhezhao" v-if="picShow" @mouseout="closepic()">
+                        <div class="zhezhao" v-if="picShow" @mouseleave="closepic()">
                             <el-button>重新上传</el-button>
                             <el-button type="primary">下载图片</el-button>
                         </div>
                     </el-dialog>
                 </div>
                 <monitor></monitor>
-                <monitor></monitor>
+                <kakou></kakou>
-                <monitor></monitor>
+                <yujing></yujing>
             </el-scrollbar>
-
         </div>
     </div>
 </template>
@@ -176,9 +179,13 @@
 //import download from '@/api/download'
 import { safeIndex } from '@/api/archives'
 import monitor from './monitor.vue'
+import kakou from './kakou.vue'
+import yujing from './yujing.vue'
 export default {
     components: {
-        monitor
+        monitor,
+        kakou,
+        yujing,
     },
     data() {
         return {
@@ -420,6 +427,7 @@ export default {
                             background-size: 100% 100%;
                             padding-left: 26px;
                             padding-top: 50px;
+                            z-index: 20;
 
                             .pingan {
                                 box-sizing: border-box;
@@ -498,6 +506,9 @@ export default {
                         color: #FFFFFF;
                         letter-spacing: 0;
                         font-weight: 400;
+                        overflow: hidden;
+                        white-space: nowrap; //禁止换行
+                        text-overflow: ellipsis; //...
                     }
 
                     .jibenhangleftText {
@@ -742,5 +753,14 @@ export default {
         }
     }
 
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+        background-color: rgba(64, 158, 255, 0);
+        color: #ccc;
+        border: 1px solid #76EAE4;
+    }
+
+    /deep/.el-tooltip__popper {
+        max-width: 800px;
+    }
 }
 </style>

src/views/archives/kakou.vue

@@ -0,0 +1,601 @@
+<template>
+    <div class="mainBox">
+        <div class="topZS"></div>
+        <div class="title">
+            实时卡口流量（<span>{{ total }}</span>）
+        </div>
+        <el-form :model="formInline" class="search">
+            <el-form-item label="时间：" class="formItem" style="width:500px">
+                <el-date-picker v-model="chooseTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+                    end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="GetchangeTime"
+                    value-format="yyyy-MM-dd HH:mm:ss">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="身份证号：" class="formItem" v-if="activeName == 'first'">
+                <el-input v-model.trim="formInline.deviceName" class="formIpt"></el-input>
+            </el-form-item>
+            <el-form-item label="姓名：" class="formItem" v-if="activeName == 'first'">
+                <el-input v-model.trim="formInline.deviceName" class="formIpt"></el-input>
+            </el-form-item>
+            <el-form-item label="车牌号：" class="formItem" v-if="activeName == 'second'">
+                <el-input v-model.trim="formInline.plateNo" class="formIpt"></el-input>
+            </el-form-item>
+            <el-button type="primary" @click="getList()">搜索</el-button>
+        </el-form>
+        <el-tabs v-model="activeName" type="card">
+            <el-tab-pane name="first">
+                <div slot="label" class="tabdv">人脸 </div>
+                <div style="width: 100%; height: 622px;  display: flex; justify-content: space-between;">
+                    <div class="imgList">
+                        <div class="imgListItem" v-for="item in tableData" :key="item.id" @click="showDetail(item, $event)">
+                            <div class="detailImg">
+                                <img :src="item.globalPic">
+                            </div>
+                            <div class="ListItem">
+                                <div class="detailText">
+                                    抓拍时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span>
+                                </div>
+                                <div class="detailText">
+                                    经过位置&nbsp;&nbsp;<span>{{ item.deviceAddress }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="imgDetail" v-if="total">
+                        <div class="detailImg">
+                            <img :src="imgDetailList.personPic">
+                        </div>
+                        <div class="detailImg">
+                            <img :src="imgDetailList.globalPic">
+                        </div>
+                        <div>
+                            <div class="detailText">
+                                抓拍时间&nbsp;&nbsp;<span>{{ imgDetailList.partitionField }}</span>
+                            </div>
+                            <div class="detailText">
+                                经过位置&nbsp;&nbsp;<span>{{ imgDetailList.deviceAddress }}</span>
+                            </div>
+                            <div class="detailText">
+                                设备IP&nbsp;&nbsp;<span>{{ imgDetailList.cameraIp }}</span>
+                            </div>
+                            <div class="detailText">
+                                姓名&nbsp;&nbsp;<span>{{ imgDetailList.userName }}</span>
+                            </div>
+                            <div class="detailText">
+                                身份证号&nbsp;&nbsp;<span>{{ imgDetailList.idcard }}</span>
+                            </div>
+                            <div class="detailText">
+                                联系方式&nbsp;&nbsp;<span>{{ imgDetailList.phone }}</span>
+                            </div>
+                            <div class="detailText">
+                                进出方向&nbsp;&nbsp;<span>{{ imgDetailList.directionCn }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane name="second">
+                <div slot="label" class="tabdv">车辆</div>
+                <div style="width: 100%; height: 622px;  display: flex; justify-content: space-between;">
+                    <div class="imgList">
+                        <div class="imgListItem" v-for="item in vechileList" :key="item.id"
+                            @click="showVechileDetail(item, $event)">
+                            <div class="detailImg">
+                                <img :src="item.globalPic">
+                            </div>
+                            <div class="ListItem">
+                                <div class="detailText">
+                                    过车时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span>
+                                </div>
+                                <div class="detailText">
+                                    经过位置&nbsp;&nbsp;<span>{{ item.deviceAddress }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="imgDetail" v-if="total">
+                        <div class="detailImg">
+                            <img :src="vechileDetailList.platePic">
+                        </div>
+                        <div class="detailImg">
+                            <img :src="vechileDetailList.globalPic">
+                        </div>
+                        <div>
+                            <div class="detailText">
+                                过车时间&nbsp;&nbsp;<span>{{ vechileDetailList.partitionField }}</span>
+                            </div>
+                            <div class="detailText">
+                                经过位置&nbsp;&nbsp;<span>{{ vechileDetailList.deviceAddress }}</span>
+                            </div>
+                            <div class="detailText">
+                                设备IP&nbsp;&nbsp;<span>{{ vechileDetailList.cameraIp }}</span>
+                            </div>
+                            <div class="detailText">
+                                车牌号码&nbsp;&nbsp;<span>{{ vechileDetailList.plateNo }}</span>
+                            </div>
+                            <div class="detailText">
+                                车主姓名&nbsp;&nbsp;<span>{{ vechileDetailList.ownerName }}</span>
+                            </div>
+                            <div class="detailText">
+                                身份证号&nbsp;&nbsp;<span>{{ vechileDetailList.idcard }}</span>
+                            </div>
+                            <div class="detailText">
+                                联系方式&nbsp;&nbsp;<span>{{ vechileDetailList.phone }}</span>
+                            </div>
+                            <div class="detailText">
+                                进出方向&nbsp;&nbsp;<span>{{ vechileDetailList.directionCn }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="block">
+            <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
+                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+                :page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+        </div>
+        <div class="bottomZS"></div>
+    </div>
+</template>
+
+<script>
+import { realTimePassageFlowFace, realTimePassageFlowVehicle } from '@/api/archives'
+export default {
+    data() {
+        return {
+            formInline: {},
+            pageSize: 8,
+            pageNum: 1,
+            activeName: 'first',
+            total: 0,
+            tableData: [],
+            vechileList: [],
+            chooseTime: '',
+            imgDetailList: {},
+            vechileDetailList: {},
+        }
+    },
+    computed: {
+        timeDefault() {
+            const date = new Date();
+            let s1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
+            return s1;
+        }
+    },
+    created() {
+        this.formInline.startTime = this.timeDefault + ' 00:00:00';
+        this.formInline.endTime = this.timeDefault + ' 23:59:59';
+        this.getList()
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.chooseTime = [this.timeDefault + ' 00:00:00', this.timeDefault + ' 23:59:59']
+        })
+    },
+    methods: {
+        getList() {
+            realTimePassageFlowFace({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, }).then(res => {
+                this.tableData = res.data
+                this.imgDetailList = res.data[0] || {}
+                this.total = res.total
+            })
+            realTimePassageFlowVehicle({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, }).then(res => {
+                this.vechileList = res.data
+                this.total = res.total
+                this.vechileDetailList = res.data[0] || {}
+            })
+        },
+        GetchangeTime() {
+            console.log(this.chooseTime);
+            if (this.chooseTime != null && this.chooseTime.length > 1) {
+                this.formInline.startTime = this.chooseTime[0]
+                this.formInline.endTime = this.chooseTime[1]
+            } else {
+                this.formInline.startTime = null
+                this.formInline.endTime = null
+            }
+        },
+        showDetail(item) {
+            this.imgDetailList = item
+            let imgs = document.querySelectorAll('.imgListItem')
+            let index = this.tableData.findIndex((i) => {
+                return i.globalPic == item.globalPic
+            })
+            imgs.forEach(a => {
+                a.className = 'imgListItem'
+            })
+            imgs[index].className = 'imgListItem imgListItemFocus'
+        },
+        showVechileDetail(item) {
+            this.vechileDetailList = item
+            let imgs = document.querySelectorAll('.imgListItem')
+            let index = this.vechileList.findIndex((i) => {
+                return i.globalPic == item.globalPic
+            })
+            imgs.forEach(a => {
+                a.className = 'imgListItem'
+            })
+            imgs[index].className = 'imgListItem imgListItemFocus'
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.pageNum = 1;
+            this.pageSize = val;
+            this.getList()
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+            this.pageNum = val;
+            this.getList()
+        },
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.mainBox {
+    width: 100%;
+    height: 812px;
+    background: url('~@/assets/companyFile/背景22136.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 70px 20px 60px;
+    box-sizing: border-box;
+    display: flex;
+    position: relative;
+    margin-top: 20px;
+
+    .monitorBox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .monitorItem {
+            height: 100%;
+            width: calc(20% - 40px);
+            background: url('~@/assets/companyFile/实时监控背景.png') no-repeat;
+            background-size: 100% 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+
+            .online {
+                height: 20px;
+                width: 100%;
+                margin-top: 10px;
+                margin-bottom: 4px;
+                color: #4CF993;
+                line-height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .left {
+                    color: #EAF6FF;
+                }
+
+                .dian {
+                    display: inline-block;
+
+                    height: 10px;
+                    width: 6px;
+                    height: 6px;
+                    background: #4CF993;
+                    border-radius: 3px;
+                    margin: 0 5px;
+                }
+            }
+
+            .outline {
+                height: 20px;
+                width: 100%;
+                margin-top: 10px;
+                margin-bottom: 4px;
+                color: #ccc;
+                line-height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .left {
+                    color: #EAF6FF;
+                }
+
+                .dian {
+                    display: inline-block;
+
+                    height: 10px;
+                    width: 6px;
+                    height: 6px;
+                    background: #ccc;
+                    border-radius: 3px;
+                    margin: 0 5px;
+                }
+            }
+
+            .videoImg {
+                height: 140px;
+                width: calc(100% - 20px);
+                position: relative;
+
+                .boxshadow {
+                    position: absolute;
+                    height: 100%;
+                    width: 100%;
+                    left: 0;
+                    top: 0;
+                    background: rgba(0, 0, 0, 0.3);
+                    z-index: 2;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    letter-spacing: 0;
+                    font-weight: 400;
+
+                    i {
+                        font-size: 16px;
+                    }
+
+                }
+
+                img {
+                    height: 100%;
+                    width: 100%;
+                }
+            }
+
+            .bottomtext {
+                height: 20px;
+                width: 100%;
+                font-size: 12px;
+                color: #FFFFFF;
+                letter-spacing: 1.75px;
+
+                padding-left: 10px;
+
+                .online1 {
+                    color: #4CF993;
+                }
+
+                .outline1 {
+                    color: #ccc;
+                }
+
+            }
+        }
+    }
+
+    .search {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        display: flex;
+
+    }
+
+    /deep/.el-button--primary {
+        margin-top: 5px;
+        margin-left: 20px;
+        width: 60px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0;
+        text-align: center;
+        background: rgba(0, 0, 0, 0);
+        border: 0;
+        background: url('~@/assets/companyFile/2121.png') no-repeat;
+        background-size: 100% 100%;
+        font-size: 14px;
+        color: #F8FBFF;
+        letter-spacing: 0.89px;
+        font-weight: 500;
+    }
+
+    /deep/.el-form-item {
+        display: flex;
+        margin-left: 20px;
+
+        .el-form-item__label {
+            color: #EAF6FF;
+            letter-spacing: 1px;
+            text-align: center;
+            font-weight: 400;
+
+
+        }
+
+    }
+
+    /deep/.el-tabs--card>.el-tabs__header {
+        border: 0;
+
+
+
+        .el-tabs__nav {
+            border: 0;
+        }
+
+        .el-tabs__nav {
+            opacity: 0.7;
+            background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
+            border: 1px solid rgba(91, 116, 140, 1);
+        }
+
+        .el-tabs__item {
+            font-size: 14px;
+            color: #EAF6FF;
+            letter-spacing: 1px;
+            border: 0;
+        }
+
+        .el-pagination__jump {
+            display: none;
+        }
+
+        .el-tabs__item.is-active {
+            border: 0;
+            font-size: 14px;
+            color: #4BFFAD;
+            letter-spacing: 1px;
+            background: rgba(129, 255, 204, 0.26);
+        }
+    }
+
+    /deep/.el-input__inner {
+        // background: url('~@/assets/companyFile/2121.png') no-repeat;
+        background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
+        background-size: 100% 100%;
+        border: 1px solid rgba(40, 132, 126, 1);
+        color: rgba(234, 246, 255, 0.7);
+        ;
+
+        .el-range-separator {
+            color: #ccc;
+        }
+
+        .el-range-input {
+            background: rgba(0, 0, 0, 0);
+            color: #ccc;
+        }
+    }
+
+
+    /deep/.el-tabs {
+        width: 100%;
+
+        .el-tabs__content {
+            width: 100%;
+            height: calc(100% - 60px);
+        }
+    }
+
+    .imgList {
+        box-sizing: border-box;
+        width: 100%;
+
+
+        height: 622px;
+
+        display: flex;
+        justify-content: space-evenly;
+        align-content: space-between;
+        flex-wrap: wrap;
+
+        .imgListItem {
+            height: 280px;
+            width: calc(23% - 10px);
+            background: url("~@/assets/archives/背景9001.png") no-repeat;
+            background-size: 100% 100%;
+            padding: 10px;
+
+            .ListItem {
+                background: url("~@/assets/archives/矩形备份 2921.png") no-repeat;
+                background-size: 100% 100%;
+                width: 96%;
+                height: 80px;
+                margin: 0 auto;
+            }
+
+            .detailImg {
+                margin: 0 auto;
+                width: 96%;
+                height: calc(100% - 90px);
+                ;
+                background: #D8D8D8;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    ;
+                }
+            }
+
+            .detailText {
+                margin-top: 15px;
+                margin-left: 20px;
+                height: 20px;
+                font-family: PingFangSC-Regular;
+                font-size: 12px;
+                color: rgba(234, 246, 255, 0.86);
+                letter-spacing: 1.52px;
+
+                span {
+                    color: rgba(234, 246, 255, 0.86);
+                }
+            }
+        }
+
+        .imgListItemFocus {
+            background: url("~@/assets/archives/矩形备份%2036.png") no-repeat;
+            background-size: 100% 100%;
+
+        }
+    }
+
+    .imgDetail {
+        height: 622px;
+        box-sizing: border-box;
+        width: 304px;
+        background: url("~@/assets/archives/背景9001.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 12px;
+
+        .detailImg {
+            width: 280px;
+            height: 150px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+                width: 130px;
+                height: 130px;
+            }
+        }
+
+        .detailText {
+            margin-top: 15px;
+            margin-left: 20px;
+            height: 20px;
+            font-family: PingFangSC-Regular;
+            font-size: 12px;
+            color: rgba(234, 246, 255, 0.86);
+            ;
+            letter-spacing: 1.52px;
+
+            span {
+                color: rgba(234, 246, 255, 0.86);
+            }
+        }
+    }
+
+    .title {
+        position: absolute;
+        top: 14px;
+        left: 20px;
+        width: 182px;
+        height: 36px;
+        line-height: 36;
+        font-size: 16px;
+        color: #EBFFF4;
+        letter-spacing: 2px;
+        line-height: 36px;
+        text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
+        font-weight: 400;
+
+        span {
+            color: #FF9191;
+        }
+    }
+
+
+
+}
+</style>

src/views/archives/monitor.vue

@@ -2,59 +2,373 @@
     <div class="mainBox">
         <div class="topZS"></div>
         <div class="title">
-            实时监控（<span>{{ }}</span>）
+            实时监控（<span>{{ total }}</span>）
+        </div>
+        <el-form :model="formInline" class="search">
+            <el-form-item label="设备名称：" class="formItem">
+                <el-input v-model.trim="formInline.deviceName" class="formIpt"></el-input>
+            </el-form-item>
+            <el-button type="primary">搜索</el-button>
+        </el-form>
+
+        <div class="monitorBox">
+            <div class="monitorItem" v-for="(item, index) in monitorList" :key="index">
+                <div class="online" v-if="item.isOnline">
+                    <div class="left">{{ item.deviceVideoSubTypeCn }}</div>
+                    <div class="right"><i class="dian"></i><span>在线</span></div>
+                </div>
+                <div class="outline" v-else>
+                    <div class="left">{{ item.deviceVideoSubTypeCn }}</div>
+                    <div class="right"><i class="dian"></i><span>离线</span></div>
+                </div>
+                <div class="videoImg">
+                    <div class="boxshadow" v-if="isShow[index].show" @mouseleave="closeShadow(index)"
+                        @click="showDia(item)">
+                        <div><i class="el-icon-video-play"></i>&nbsp;&nbsp;查看实时监控</div>
+                    </div>
+                    <img :src="item.snapURL" alt="" @mouseover="showShadow(index)">
+                </div>
+                <div class="bottomtext"><i class="el-icon-location online1" v-if="false"></i><i
+                        class="el-icon-location outline1" v-else></i>&nbsp;&nbsp;{{ item.channelName }}</div>
+                <el-dialog title="企业图片" :visible.sync="diaVisible" class="picForm">
+                    <playVideo :video="{ url: item.wsFlv, index: index }" :control="true" v-if="diaVisible"></playVideo>
+                </el-dialog>
+            </div>
+
+        </div>
+        <div class="block">
+            <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
+                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+                :page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
         </div>
         <div class="bottomZS"></div>
     </div>
 </template>
 
 <script>
+import playVideo from '@/components/videoPlayer'
+import { realTimeMonitoring } from '@/api/archives'
 export default {
-
+    data() {
+        return {
+            formInline: {},
+            pageSize: 5,
+            pageNum: 1,
+            total: 0,
+            isShow: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
+            diaVisible: false,
+            monitorList: [],
+        }
+    },
+    components: {
+        playVideo
+    },
+    created() {
+        this.getList()
+    },
+    methods: {
+        getList() {
+            realTimeMonitoring({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, }).then(res => {
+                this.monitorList = res.data
+                this.total = res.total
+            })
+        },
+        showShadow(val) {
+            this.isShow[val].show = true
+        },
+        closeShadow(val) {
+            this.isShow[val].show = false
+        },
+        showDia() {
+            this.diaVisible = true
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.pageNum = 1;
+            this.pageSize = val;
+            this.getList()
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+            this.pageNum = val;
+            this.getList()
+        },
+    },
 }
 </script>
 
 <style lang="less" scoped>
 .mainBox {
     width: 100%;
-    height: 300px;
+    height: 406px;
     background: url('~@/assets/companyFile/背景22136.png') no-repeat;
     background-size: 100% 100%;
-    padding: 55px 20px 20px;
+    padding: 70px 20px 60px;
     box-sizing: border-box;
     display: flex;
     position: relative;
     margin-top: 20px;
 
-    .bottomZS {
+    .monitorBox {
-        position: absolute;
         width: 100%;
-        height: 30px;
+        height: 100%;
-        bottom: 3px;
+        display: flex;
-        left: 0;
+        justify-content: space-between;
-        background: url("~@/assets/companyFile/装饰0921.png") no-repeat;
+        align-items: center;
-        background-size: 100% 100%;
+
-        transform: rotateX(180deg);
+        .monitorItem {
+            height: 100%;
+            width: calc(20% - 40px);
+            background: url('~@/assets/companyFile/实时监控背景.png') no-repeat;
+            background-size: 100% 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+
+            .online {
+                height: 20px;
+                width: 100%;
+                margin-top: 10px;
+                margin-bottom: 4px;
+                color: #4CF993;
+                line-height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .left {
+                    color: #EAF6FF;
+                }
+
+                .dian {
+                    display: inline-block;
+
+                    height: 10px;
+                    width: 6px;
+                    height: 6px;
+                    background: #4CF993;
+                    border-radius: 3px;
+                    margin: 0 5px;
+                }
+            }
+
+            .outline {
+                height: 20px;
+                width: 100%;
+                margin-top: 10px;
+                margin-bottom: 4px;
+                color: #ccc;
+                line-height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .left {
+                    color: #EAF6FF;
+                }
+
+                .dian {
+                    display: inline-block;
+
+                    height: 10px;
+                    width: 6px;
+                    height: 6px;
+                    background: #ccc;
+                    border-radius: 3px;
+                    margin: 0 5px;
+                }
+            }
+
+            .videoImg {
+                height: 140px;
+                width: calc(100% - 20px);
+                position: relative;
+
+                .boxshadow {
+                    position: absolute;
+                    height: 100%;
+                    width: 100%;
+                    left: 0;
+                    top: 0;
+                    background: rgba(0, 0, 0, 0.3);
+                    z-index: 2;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    letter-spacing: 0;
+                    font-weight: 400;
+
+                    i {
+                        font-size: 16px;
+                    }
+
+                }
+
+                img {
+                    height: 100%;
+                    width: 100%;
+                }
+            }
+
+            .bottomtext {
+                height: 20px;
+                width: 100%;
+                font-size: 12px;
+                color: #FFFFFF;
+                letter-spacing: 1.75px;
+
+                padding-left: 10px;
+
+                .online1 {
+                    color: #4CF993;
+                }
+
+                .outline1 {
+                    color: #ccc;
+                }
+
+            }
+        }
     }
 
-    .topZS {
+    .picForm {
+        /deep/ .el-dialog {
+            background-color: rgba(0, 0, 0, 0);
+            background: url('~@/assets/companyFile/背景.png') no-repeat;
+            background-size: 100% 100%;
+            width: 811px;
+            height: 534px;
+
+            .el-dialog__title {
+                font-size: 16px;
+                color: #EBFFF4;
+                letter-spacing: 2px;
+
+                text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
+                font-weight: 400;
+            }
+
+            .el-dialog__body {
+                box-sizing: border-box;
+                height: 480px;
+                position: relative;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    background: #f9f5f5;
+                }
+
+                .zhezhao {
+                    width: 771px;
+                    height: 420px;
+                    position: absolute;
+                    top: 30px;
+                    left: 20px;
+                    z-index: 1;
+                    background: rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .el-button--default {
+                        width: 99px;
+                        height: 46px;
+                        padding: 0;
+                        line-height: 46px;
+                        text-align: center;
+                        background: #163C53;
+                        font-size: 16px;
+                        color: #F8FBFF;
+                        letter-spacing: 0.89px;
+                        font-weight: 500;
+                        border: 0;
+                    }
+
+                    .el-button--primary {
+                        width: 99px;
+                        height: 46px;
+                        line-height: 46px;
+                        padding: 0;
+                        text-align: center;
+                        background: rgba(0, 0, 0, 0);
+                        border: 0;
+                        background: url('~@/assets/companyFile/2121.png') no-repeat;
+                        background-size: 100% 100%;
+                        font-size: 16px;
+                        color: #F8FBFF;
+                        letter-spacing: 0.89px;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+    }
+
+    .search {
         position: absolute;
-        width: 100%;
+        right: 20px;
+        top: 20px;
+        display: flex;
+
+    }
+
+    /deep/.el-button--primary {
+        margin-top: 5px;
+        margin-left: 20px;
+        width: 60px;
         height: 30px;
-        top: 3px;
+        line-height: 30px;
-        left: 0;
+        padding: 0;
-        background: url("~@/assets/companyFile/装饰0921.png") no-repeat;
+        text-align: center;
+        background: rgba(0, 0, 0, 0);
+        border: 0;
+        background: url('~@/assets/companyFile/2121.png') no-repeat;
         background-size: 100% 100%;
+        font-size: 14px;
+        color: #F8FBFF;
+        letter-spacing: 0.89px;
+        font-weight: 500;
     }
 
+    /deep/.el-form-item {
+        display: flex;
+
+        .el-form-item__label {
+            color: #EAF6FF;
+            letter-spacing: 1px;
+            text-align: center;
+            font-weight: 400;
+
+
+        }
+
+    }
+
+    /deep/.el-input {
+        .el-input__inner {
+            // background: url('~@/assets/companyFile/2121.png') no-repeat;
+            background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
+            background-size: 100% 100%;
+            border: 1px solid rgba(40, 132, 126, 1);
+            color: rgba(234, 246, 255, 0.7);
+            ;
+        }
+    }
+
+
     .title {
         position: absolute;
         top: 14px;
         left: 20px;
-        width: 122px;
+        width: 162px;
         height: 36px;
         line-height: 36;
-        text-align: center;
+
         font-size: 16px;
         color: #EBFFF4;
         letter-spacing: 2px;
@@ -67,5 +381,6 @@ export default {
         }
     }
 
+
 }
 </style>

src/views/archives/yujing.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="mainBox">
+        <div class="topZS"></div>
+        <div class="title">
+            预警处置（<span>{{ total }}</span>）
+        </div>
+        <div class="monitorBox">
+            <el-table :cell-style="{ background: 'revert' }" :data="tableData" class="table"
+                style="width: calc(100% - 40px);  margin: 20px;" :row-style="tableRowStyle"
+                :header-cell-style="tableHeaderColor">
+                <el-table-column show-overflow-tooltip prop="villageName" label="小区名称">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="gridName" label="网格名称">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="buildingName" label="楼栋名称">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="upFloor" label="楼层">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="longitude" label="楼栋经度">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="latitude" label="楼栋纬度">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip label="操作" width="80">
+                    <template slot-scope="scope">
+                        <div class="detail" @click="checkDetail(scope.row)">
+                            <button class="xiangqing">详情</button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="block">
+            <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
+                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+                :page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+        </div>
+        <div class="bottomZS"></div>
+    </div>
+</template>
+
+<script>
+
+import { warningDisposal } from '@/api/archives'
+export default {
+    data() {
+        return {
+
+            pageSize: 5,
+            pageNum: 1,
+            total: 0,
+            isShow: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
+            diaVisible: false,
+            tableData: [],
+        }
+    },
+
+    created() {
+        this.getList()
+    },
+    methods: {
+        getList() {
+            warningDisposal({ pageSize: this.pageSize, pageNum: this.pageNum, }).then(res => {
+                this.tableData = res.data
+                this.total = res.total
+            })
+        },
+        showShadow(val) {
+            this.isShow[val].show = true
+        },
+        closeShadow(val) {
+            this.isShow[val].show = false
+        },
+        showDia() {
+            this.diaVisible = true
+        },
+        tableRowStyle({ rowIndex }) {
+            if ((rowIndex + 1) % 2 == 1) {
+                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
+            } else {
+                return { 'background': '#3D5566', 'border': '0' }
+            }
+        },
+        tableHeaderColor() {
+            //{'background-image': 'linear-gradient(90deg, #263958 0%, #375683 17%, #22324A 100%)'}
+            return { 'background-image': 'linear-gradient(90deg, #182436 0%, #1A3760 50%, #182436 100%)', 'color': '#fff' }
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.pageNum = 1;
+            this.pageSize = val;
+            this.getList()
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+            this.pageNum = val;
+            this.getList()
+        },
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.mainBox {
+    width: 100%;
+    height: 370px;
+    background: url('~@/assets/companyFile/背景22136.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 70px 20px 60px;
+    box-sizing: border-box;
+    display: flex;
+    position: relative;
+    margin-top: 20px;
+
+    .monitorBox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    /deep/.el-input {
+        .el-input__inner {
+            // background: url('~@/assets/companyFile/2121.png') no-repeat;
+            background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
+            background-size: 100% 100%;
+            border: 1px solid rgba(40, 132, 126, 1);
+            color: rgba(234, 246, 255, 0.7);
+            ;
+        }
+    }
+
+
+    .title {
+        position: absolute;
+        top: 14px;
+        left: 20px;
+        width: 162px;
+        height: 36px;
+        line-height: 36;
+
+        font-size: 16px;
+        color: #EBFFF4;
+        letter-spacing: 2px;
+        line-height: 36px;
+        text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
+        font-weight: 400;
+
+        span {
+            color: #FF9191;
+        }
+    }
+
+
+}
+</style>

src/views/enterpriseArchives/result.vue

@@ -17,31 +17,28 @@
 
         </div>
         <div class="resultBox">
-            <div class="resultTotal">搜索结果（<span class="red">{{ total }}</span>）</div>
+            <div class="resultTotal">搜索结果（<span class="red">{{ total1 }}</span>）</div>
             <div class="resultList">
                 <div class="resultItem" v-for="(item, index) in resultList1" :key="index" @click="goArchives(item)">
                     <p v-html="item.companyName"></p>
                     <div class="impBtnList">
                         <div :class="{ 'shewei': a != '消防重点', 'zhongdian': a == '消防重点' }" v-for="a in item.companyTypes"
-                            :key="a">{{ a }}</div>
+                            :key="a">{{ a }}
-
+                        </div>
                     </div>
                     <div class="itemAddress">
                         {{ item.companyAddress }}
                     </div>
                     <div class="renyuan" v-if="item.legalPerson">
-                        人员：<span v-html="item.legalPerson"></span>
+                        人员：<span v-html="item.legalPerson"></span> &nbsp; 车辆：<span v-html="item.plateNo"></span>
                     </div>
                 </div>
-
             </div>
             <div class="resultHistory">
                 <div class="searchHistory">检索历史</div>
                 <div class="historyItem" v-for="(item, index) in historyList1" :key="index" @click="showResult(item)">{{
                     item
                 }}<br></div>
-
-
             </div>
         </div>
     </div>
@@ -62,6 +59,7 @@ export default {
             totalNum: '',
             isShow: false,
             regex: {},
+            total1: this.total,
             resultList1: [],
             historyList1: this.historyList,
             modifiedText: this.searchVal
@@ -73,9 +71,7 @@ export default {
         }
     },
     mounted() {
-
         this.checkKeyWords()
-
     },
     methods: {
         clearInput() {
@@ -90,7 +86,9 @@ export default {
                 if (item.legalPerson) {
                     item.legalPerson = item.legalPerson.replace(this.regex, '<span class="highlight">$&</span>')
                 }
-
+                if (item.plateNo) {
+                    item.plateNo = item.plateNo.replace(this.regex, '<span class="highlight">$&</span>')
+                }
                 return item
             })
         },
@@ -110,19 +108,17 @@ export default {
             this.modifiedText = val
             searchList({ searchValue: val }).then(res => {
                 if (res.total || res.data.length) {
-                    this.resultList1 = res.data
+                    this.$set(this, 'resultList1', res.data)
-                    this.total = res.total
+                    console.log(this.resultList1, 'this.resultList1');
+                    this.total1 = res.total
                     this.isShow = true
                     this.gethistoryList()
                     this.checkKeyWords()
                 } else {
                     this.$message.warning('未查询到相关数据')
                 }
-
             })
-
         },
-
         gethistoryList() {
             historyList().then((res) => {
                 this.historyList1 = res.data

src/views/head.vue

@@ -5,13 +5,8 @@
         <img src="../assets/companyFile/编组 7212.png" />
       </div>
       <div class="headText">镇海平安企业（园区）</div>
-      <el-menu
+      <el-menu :default-active="activeIndex" class="el-menu-demo topMenu" mode="horizontal" @select="handleSelect"
-        :default-active="activeIndex"
+        :router="true">
-        class="el-menu-demo topMenu"
-        mode="horizontal"
-        @select="handleSelect"
-        :router="true"
-      >
         <div class="shu"></div>
         <el-menu-item index="1" route="/home">平安指数</el-menu-item>
         <div class="shu"></div>
@@ -21,9 +16,7 @@
         <div class="shu"></div>
         <el-menu-item index="4" route="/home">要素资源</el-menu-item>
         <div class="shu"></div>
-        <el-menu-item index="5" route="/home/enterpriseArchives"
+        <el-menu-item index="5" route="/home/enterpriseArchives">企业档案</el-menu-item>
-          >企业档案</el-menu-item
-        >
         <div class="shu"></div>
         <el-menu-item index="6" route="/home">应用超市</el-menu-item>
         <div class="shu"></div>
@@ -153,8 +146,46 @@ export default {
       background-size: 100% 100%;
     }
 
-    .el-menu--horizontal > .el-menu-item.is-active {
+    /deep/.el-menu {
       border: 0;
+      background-color: rgba(0, 0, 0, 0);
+      display: flex;
+      align-items: center;
+
+      .el-menu-item {
+        width: 130px;
+        height: 35px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 20px;
+        background: url('~@/assets/companyFile/Rectangle Copy 4.png') no-repeat;
+
+        background-size: 100% 100%;
+
+        font-size: 16px;
+        color: #D9E7FF;
+        letter-spacing: 3px;
+        text-align: center;
+        font-weight: 400;
+      }
+
+      .shu {
+        border-left: 1px solid rgba(217, 231, 255, 0.4);
+        width: 0;
+        height: 24px;
+        margin: 0 10px;
+      }
+
+      .is-active {
+        background: url('~@/assets/companyFile/891771.png') no-repeat;
+
+        background-size: 100% 100%;
+      }
+
+      .el-menu-item.is-active {
+        border: 0 !important;
+      }
     }
   }
 }

vue.config.js

@@ -0,0 +1,26 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production'
+    ? '/production-sub-path/'
+    : '/',
+  configureWebpack: {
+    plugins: [
+      new CopyWebpackPlugin([
+        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml' },
+        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf' },
+        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/' },
+        // {
+        //   patterns: [{
+        //     from: './public/static', to: 'static'
+        //   }]
+        // }
+      ])
+    ],
+    // externals: {
+    //   'BMap': 'BMap',
+    //   'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
+    // }
+  }
+}
+
+