警力设备列表状态显示

guanqb

2022-11-11 a5cb66cf3a48dc431ce78a70d98e6fb639d5173f

警力设备列表状态显示

 src/assets/data/car.js

@@ -15,7 +15,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '2号警车',
    lng: 116.029917,
@@ -23,7 +24,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '空闲',
}, {
    name: '3号警车',
    lng: 116.031044,
@@ -31,7 +33,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '4号警车',
    lng: 115.966750,
@@ -39,7 +42,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '空闲',
}, {
    name: '5号警车',
    lng: 116.150081,
@@ -47,7 +51,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '空闲',
}, {
    name: '6号警车',
    lng: 116.029917,
@@ -55,7 +60,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '7号警车',
    lng: 116.235801,
@@ -63,7 +69,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '8号警车',
    lng: 116.210143,
@@ -71,7 +78,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '空闲',
}, {
    name: '9号警车',
    lng: 116.072665,
@@ -79,7 +87,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '10号警车',
    lng: 116.121559,
@@ -87,7 +96,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '空闲',
}, {
    name: '11号警车',
    lng: 116.106692,
@@ -95,7 +105,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '空闲',
}, {
    name: '12号警车',
    lng: 116.043007,
@@ -103,7 +114,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '13号警车',
    lng: 116.002395,
@@ -111,7 +123,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '14号警车',
    lng: 116.009437,
@@ -119,7 +132,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '空闲',
}, {
    name: '15号警车',
    lng: 116.067097,
@@ -127,7 +141,8 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}, {
    name: '16号警车',
    lng: 115.944243,
@@ -135,5 +150,6 @@
    alt: 100,
    url: '/img/icon/car.png',
    carId: '赣E12354',
    carType: '大众'
    carType: '大众',
    state: '使用中',
}]

 src/assets/data/dt.js

@@ -15,8 +15,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '2号电台',
    lng: 116.029917,
@@ -24,8 +25,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '3号电台',
    lng: 116.031044,
@@ -33,8 +35,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '4号电台',
    lng: 115.966750,
@@ -42,8 +45,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '5号电台',
    lng: 116.150081,
@@ -51,8 +55,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '6号电台',
    lng: 116.029917,
@@ -60,8 +65,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '7号电台',
    lng: 116.235801,
@@ -69,8 +75,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '8号电台',
    lng: 116.210143,
@@ -78,8 +85,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '9号电台',
    lng: 116.072665,
@@ -87,8 +95,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '10号电台',
    lng: 116.121559,
@@ -96,8 +105,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '11号电台',
    lng: 116.106692,
@@ -105,8 +115,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '12号电台',
    lng: 116.043007,
@@ -114,8 +125,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '13号电台',
    lng: 116.002395,
@@ -123,8 +135,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '14号电台',
    lng: 116.009437,
@@ -132,8 +145,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '15号电台',
    lng: 116.067097,
@@ -141,8 +155,9 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}, {
    name: '16号电台',
    lng: 115.944243,
@@ -150,6 +165,7 @@
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    dtType: '大众',
    person: "李会军",
    state: "在线",
}]

 src/assets/data/phone.js

@@ -7,7 +7,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '2号手持记录仪',
    person: "李会军",
@@ -17,7 +18,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '3号手持记录仪',
    person: "李会军",
@@ -27,7 +29,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '4号手持记录仪',
    person: "李会军",
@@ -37,7 +40,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '5号手持记录仪',
    person: "李会军",
@@ -47,7 +51,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '6号手持记录仪',
    person: "李会军",
@@ -57,7 +62,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '7号手持记录仪',
    person: "李会军",
@@ -67,7 +73,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '8号手持记录仪',
    person: "李会军",
@@ -77,7 +84,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '9号手持记录仪',
    person: "李会军",
@@ -87,7 +95,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '10号手持记录仪',
    person: "李会军",
@@ -97,7 +106,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '11号手持记录仪',
    person: "李会军",
@@ -107,7 +117,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '12号手持记录仪',
    person: "李会军",
@@ -117,7 +128,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '13号手持记录仪',
    person: "李会军",
@@ -127,7 +139,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '14号手持记录仪',
    person: "李会军",
@@ -137,7 +150,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '15号手持记录仪',
    person: "李会军",
@@ -147,7 +161,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '16号手持记录仪',
    person: "李会军",
@@ -157,7 +172,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '17号手持记录仪',
    person: "李会军",
@@ -167,7 +183,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '18号手持记录仪',
    person: "李会军",
@@ -177,7 +194,8 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '19号手持记录仪',
    person: "李会军",
@@ -187,5 +205,6 @@
    url: '/img/icon/phone.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}]

 src/assets/data/zf.js

@@ -7,7 +7,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '2号执法记录仪',
    person: "李会军",
@@ -17,7 +18,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '3号执法记录仪',
    person: "李会军",
@@ -27,7 +29,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '4号执法记录仪',
    person: "李会军",
@@ -37,7 +40,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '5号执法记录仪',
    person: "李会军",
@@ -47,7 +51,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '6号执法记录仪',
    person: "李会军",
@@ -57,7 +62,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '7号执法记录仪',
    person: "李会军",
@@ -67,7 +73,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '8号执法记录仪',
    person: "李会军",
@@ -77,7 +84,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '9号执法记录仪',
    person: "李会军",
@@ -87,7 +95,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '10号执法记录仪',
    person: "李会军",
@@ -97,7 +106,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '11号执法记录仪',
    person: "李会军",
@@ -107,7 +117,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '12号执法记录仪',
    person: "李会军",
@@ -117,7 +128,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '13号执法记录仪',
    person: "李会军",
@@ -127,7 +139,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '14号执法记录仪',
    person: "李会军",
@@ -137,7 +150,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '15号执法记录仪',
    person: "李会军",
@@ -147,7 +161,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '16号执法记录仪',
    person: "李会军",
@@ -157,7 +172,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}, {
    name: '17号执法记录仪',
    person: "李会军",
@@ -167,7 +183,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '18号执法记录仪',
    person: "李会军",
@@ -177,7 +194,8 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '在线',
}, {
    name: '19号执法记录仪',
    person: "李会军",
@@ -187,5 +205,6 @@
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
    location: '信州区XXXX大道XXXX路',
    state: '离线',
}]

 src/views/home/components/rightContainer.vue

@@ -279,7 +279,9 @@
                    equipmentmyChart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0,
                        dataIndex: curIndex
                        dataIndex: curIndex,
                        position: ['5%', '5%'],

                    })
                }, 1000)
            })

 src/views/police/index.vue

@@ -11,45 +11,70 @@

<template>
    <div class="container">
        <div v-show='boxShow' class="container-content">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>

            <div class="list-show" ref="tableBox" v-show="!detailFlag">
                <div class="search-box">
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

                <div v-show="searchValBoxShow" class="search-val-box">
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{ item.name }}</div>
                </div>

                <div class="list" v-show="navType == 1">
                    <el-table :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="140"></el-table-column>
                        <el-table-column prop="carType" label="类型" width="120"></el-table-column>
                        <el-table-column prop="name" label="名称" width="120"></el-table-column>
                        <el-table-column prop="carType" label="类型" width="60"></el-table-column>
                        <el-table-column prop="state" label="状态" width="80"></el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -57,33 +82,51 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="carList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="carList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 2">
                    <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="120"></el-table-column>
                        <el-table-column prop="phoneType" label="手台类型" width="120"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" width="80"></el-table-column>
                        <el-table-column prop="state" label="状态" width="70"></el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -91,67 +134,51 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="phoneList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="phoneList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 3">
                    <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="140"></el-table-column>
                        <el-table-column prop="carType" label="类型" width="120"></el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="dtList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 4">
                    <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="120"></el-table-column>
                        <el-table-column prop="phoneType" label="手台类型" width="120"></el-table-column>
                        <el-table-column prop="dtType" label="类型" width="60"></el-table-column>
                        <el-table-column prop="state" label="状态" width="80"></el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -159,10 +186,67 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="zfList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="dtList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 4">
                    <el-table
                        :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="120"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" width="80"></el-table-column>
                        <el-table-column prop="state" label="状态" width="70"></el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="zfList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
@@ -193,9 +277,15 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期">
                            </el-date-picker>
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </div>
                    </li>

@@ -228,9 +318,15 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期">
                            </el-date-picker>
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </div>
                    </li>

@@ -241,15 +337,33 @@
            </div>
        </div>


        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -630,14 +744,13 @@
        color: #fff;
        background: $bg-color;


        .switch-box {
            padding: 6px;
            // background: blue;
            display: flex;
            justify-content: space-around;

            &>div {
            & > div {
                flex: 1;
            }
        }
@@ -704,7 +817,7 @@
                border-radius: 10px;
                overflow-y: auto;

                &>div {
                & > div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -770,18 +883,18 @@
                color: #fff;
                border-bottom: 1px solid #fff;

                &>div {
                & > div {
                    text-align: center;
                }

                &>div:first-child {
                & > div:first-child {
                    flex: 2;
                }

                &>div:last-child {
                & > div:last-child {
                    flex: 6;

                    &>div {
                    & > div {
                        width: 100% !important;
                    }
                }