优化

package.json

@@ -30,6 +30,7 @@
     "element-tree-line": "^0.2.1",
     "ezuikit-js": "^8.0.5-beta.4",
     "file-saver": "2.0.5",
+    "flv.js": "^1.6.2",
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",

src/components/Map/index.vue

@@ -7,273 +7,333 @@
 </template>
 
 <script setup lang="ts">
-import AMapLoader from '@amap/amap-jsapi-loader';
-/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
-因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
-否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
-import { shallowRef } from '@vue/reactivity';
-import { ref } from "vue";
-import { getDicts } from '@/api/system/dict/data'
-import { getGpsData } from '@/api/gpsData/index'
-import carImage from "@/assets/images/icon/小货车.png";
-import add from '@/views/car/carInfo/add.vue';
+    import AMapLoader from '@amap/amap-jsapi-loader';
+    /*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
+    因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
+    否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
+    import { shallowRef } from '@vue/reactivity';
+    import { ref } from "vue";
+    import { getDicts } from '@/api/system/dict/data'
+    import { getGpsData } from '@/api/gpsData/index'
+    import carImage from "@/assets/images/icon/小货车.png";
+    import add from '@/views/car/carInfo/add.vue';
 
-const props = defineProps({
-    showMarket: {
-        type: Boolean,
-        default: true
-    },
-    darkType: {
-        type: Boolean,
-        default: false
-    },
-})
-
-// const map = shallowRef(null);
-const path = ref([]);
-const current_position = ref([]);
-let mapObj = ref()
-let singleMarker = ref(null);
-
-const lineObj = ref(null);
-
-
-const getDictsData = (param) => {
-    getDicts(param).then(res => {
-        for (var index in res.data) {
-            var obj = res.data[index].dictValue.split(",");
-            // console.log(obj.toString())
-            var location = formatGCJ(Number(obj[0]), Number(obj[1]));
-            // console.log(location.toString())
-            addMarker(location, res.data[index], '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 'location')
-        }
+    const props = defineProps({
+        showMarket: {
+            type: Boolean,
+            default: true
+        },
+        darkType: {
+            type: Boolean,
+            default: false
+        },
     })
-}
 
-const getGpsDataList = (param) => {
-    getGpsData(param).then(res => {
-        console.log(res);
-        addLine(res.rows);
-        if (singleMarker.value != null) {
-            mapObj.value.remove(singleMarker.value);
-        }
-        var car = res.rows[res.rows.length - 1]
-        if (car) {
-            var location = formatGCJ(car.lng, car.lat);
-            // addMarker(location, car, "../src/assets/images/icon/小货车.png", 'car')
-            addMarker(location, car, carImage, 'car')
-        }
-    })
-}
+    // const map = shallowRef(null);
+    const path = ref([]);
+    const current_position = ref([]);
+    let mapObj = ref()
+    let singleMarker = ref(null);
 
+    const lineObj = ref(null);
 
-const setDataList = (data) => {
-    tableData.value = data
-}
 
-const initMap = () => {
-    window._AMapSecurityConfig = {
-        securityJsCode: '8e920f73eb2e6880a92ea6662eefc476',
+    const getDictsData = (param) => {
+        getDicts(param).then(res => {
+            for (var index in res.data) {
+                var obj = res.data[index].dictValue.split(",");
+                // console.log(obj.toString())
+                var location = formatGCJ(Number(obj[0]), Number(obj[1]));
+                // console.log(location.toString())
+                addMarker(location, res.data[index], '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 'location')
+            }
+        })
     }
-    AMapLoader.load({
-        key: "88d0fc14bcd5921a4e5a09ef1a3ab31a", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    }).then((AMap) => {
-        const map = new AMap.Map("container", {  //设置地图容器id
-            viewMode: "3D",    //是否为3D地图模式
-            zoom: 13,           //初始化地图级别
-            center: [119.807462, 26.958413], //初始化地图中心点位置
-        });
-        console.log(11111111111);
-        console.log(props.darkType)
-        if (props.darkType) {
-            var styleName = "amap://styles/darkblue";
-            map.setMapStyle(styleName);
-        }
-        console.log(map)
-        mapObj.value = map;
-        console.log(map)
-        // 添加插件
-        // AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
-        //     //异步同时加载多个插件
-        //     // 添加地图插件
-        //     // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
-        //     map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
-        //     map.addControl(new AMap.HawkEye()); // 显示缩略图
-        //     map.addControl(new AMap.Geolocation()); // 定位当前位置
-        //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
 
-        // });
-        if (props.showMarket) {
-            getDictsData("tbl_sites");
-        }
-        // 单击
-        map.on('click', (e) => {
-            // lng ==> 经度值  lat => 维度值
-            current_position.value = [e.lnglat.lng, e.lnglat.lat];
-            path.value.push([e.lnglat.lng, e.lnglat.lat]);
-            //addMarker();
-            // addPolyLine();
+    const getGpsDataList = (param) => {
+        getGpsData(param).then(res => {
+            console.log(res);
+            addLine(res.rows);
+            if (singleMarker.value != null) {
+                mapObj.value.remove(singleMarker.value);
+            }
+            var car = res.rows[res.rows.length - 1]
+            if (car) {
+                var location = formatGCJ(car.lng, car.lat);
+                // addMarker(location, car, "../src/assets/images/icon/小货车.png", 'car')
+                addMarker(location, car, carImage, 'car')
+            }
         })
+    }
 
 
-        // 折线
-        function addPolyLine() {
-            const polyline = new AMap.Polyline({
-                path: path.value,
-                isOutline: true,
-                outlineColor: "#ffeeff",
-                borderWeight: 1,
-                strokeColor: "#3366FF",
-                strokeOpacity: 0.6,
-                strokeWeight: 5,
-                // 折线样式还支持 'dashed'
-                strokeStyle: "solid",
-                // strokeStyle是dashed时有效
-                // strokeDasharray: [10, 5],
-                lineJoin: "round",
-                lineCap: "round",
-                zIndex: 50,
-            });
-            map.add([polyline]);
+    const setDataList = (data) => {
+        tableData.value = data
+    }
+
+    const initMap = () => {
+        window._AMapSecurityConfig = {
+            securityJsCode: '8e920f73eb2e6880a92ea6662eefc476',
         }
+        AMapLoader.load({
+            key: "88d0fc14bcd5921a4e5a09ef1a3ab31a", // 申请好的Web端开发者Key，首次调用 load 时必填
+            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+            // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        }).then((AMap) => {
+            const map = new AMap.Map("container", {  //设置地图容器id
+                viewMode: "3D",    //是否为3D地图模式
+                zoom: 13,           //初始化地图级别
+                center: [119.807462, 26.958413], //初始化地图中心点位置
+            });
+            console.log(11111111111);
+            console.log(props.darkType)
+            if (props.darkType) {
+                var styleName = "amap://styles/darkblue";
+                map.setMapStyle(styleName);
+            }
+            console.log(map)
+            mapObj.value = map;
+            console.log(map)
+            // 添加插件
+            // AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
+            //     //异步同时加载多个插件
+            //     // 添加地图插件
+            //     // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
+            //     map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
+            //     map.addControl(new AMap.HawkEye()); // 显示缩略图
+            //     map.addControl(new AMap.Geolocation()); // 定位当前位置
+            //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
 
+            // });
+            if (props.showMarket) {
+                getDictsData("tbl_sites");
+            }
+            // 单击
+            map.on('click', (e) => {
+                // lng ==> 经度值  lat => 维度值
+                current_position.value = [e.lnglat.lng, e.lnglat.lat];
+                path.value.push([e.lnglat.lng, e.lnglat.lat]);
+                //addMarker();
+                // addPolyLine();
+            })
 
 
-    }).catch(e => {
-        console.log(e);
-    })
-}
+            // 折线
+            function addPolyLine() {
+                const polyline = new AMap.Polyline({
+                    path: path.value,
+                    isOutline: true,
+                    outlineColor: "#ffeeff",
+                    borderWeight: 1,
+                    strokeColor: "#3366FF",
+                    strokeOpacity: 0.6,
+                    strokeWeight: 5,
+                    // 折线样式还支持 'dashed'
+                    strokeStyle: "solid",
+                    // strokeStyle是dashed时有效
+                    // strokeDasharray: [10, 5],
+                    lineJoin: "round",
+                    lineCap: "round",
+                    zIndex: 50,
+                });
+                map.add([polyline]);
+            }
 
-const addMarker = (obj, data, src, type) => {
-    const marker = new AMap.Marker({
-        icon: new AMap.Icon({
-            image: src,
-            imageSize: new AMap.Size(22, 28) //图标大小
-        }),
-        position: obj, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
-        // 通过设置 offset 来添加偏移量
-        offset: new AMap.Pixel(-10, -20),
-    });
-    marker.setLabel({
-        offset: new AMap.Pixel(-30, 20),
-        content: data.dictLabel
-    });
-    if (type == 'car') {
-        singleMarker.value = marker
-    }
-    marker.setMap(mapObj.value);
-    //给marker添加属性
-    marker.setExtData(data)
-    //给marker添加点击事件
-    marker.on('click', clickMarker)
-}
 
-const addLine = (list) => {
-    if (lineObj.value != null) {
-        mapObj.value.remove([lineObj.value])
-    }
-    var dataList = []
-    for (var index in list) {
-        // console.log('转换前坐标' + [list[index].lng, list[index].lat])
-        var location = formatGCJ(list[index].lng, list[index].lat);
-        // console.log('转换后坐标' + [location[0], location[1]])
-        var obj = new AMap.LngLat(location[0], location[1]);
-        dataList.push(obj)
-    }
-    var polyline = new AMap.Polyline({
-        path: dataList,
-        strokeWeight: 2, //线条宽度
-        strokeColor: "red", //线条颜色
-        lineJoin: "round", //折线拐点连接处样式
-    });
-    // polyline.setMap(mapObj);
-    // console.log(mapObj)
-    lineObj.value = polyline
-    mapObj.value.add(polyline);
-}
 
-const emit = defineEmits(['childToParent']);
+        }).catch(e => {
+            console.log(e);
+            if (e == '多个不一致的 key') {
+                const map = new AMap.Map("container", {  //设置地图容器id
+                    viewMode: "3D",    //是否为3D地图模式
+                    zoom: 13,           //初始化地图级别
+                    center: [119.807462, 26.958413], //初始化地图中心点位置
+                });
+                console.log(11111111111);
+                console.log(props.darkType)
+                if (props.darkType) {
+                    var styleName = "amap://styles/darkblue";
+                    map.setMapStyle(styleName);
+                }
+                console.log(map)
+                mapObj.value = map;
+                console.log(map)
+                // 添加插件
+                // AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
+                //     //异步同时加载多个插件
+                //     // 添加地图插件
+                //     // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
+                //     map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
+                //     map.addControl(new AMap.HawkEye()); // 显示缩略图
+                //     map.addControl(new AMap.Geolocation()); // 定位当前位置
+                //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
 
-const clickMarker = (e) => {
-    emit('childToParent', e.target.getExtData())
-}
+                // });
+                if (props.showMarket) {
+                    getDictsData("tbl_sites");
+                }
+                // 单击
+                map.on('click', (e) => {
+                    // lng ==> 经度值  lat => 维度值
+                    current_position.value = [e.lnglat.lng, e.lnglat.lat];
+                    path.value.push([e.lnglat.lng, e.lnglat.lat]);
+                    //addMarker();
+                    // addPolyLine();
+                })
 
-const formatGCJ = (lng, lat) => {
-    const x_PI = 3.14159265358979324 * 3000.0 / 180.0
-    const PI = 3.1415926535897932384626
-    const a = 6378245.0
-    const ee = 0.00669342162296594323
-    if (outOfChina(lng, lat)) {
-        return [lng, lat]
-    }
-    else {
-        var dlat = transformlat(lng - 105.0, lat - 35.0)
-        var dlng = transformlng(lng - 105.0, lat - 35.0)
-        var radlat = lat / 180.0 * PI
-        var magic = Math.sin(radlat)
-        magic = 1 - ee * magic * magic
-        var sqrtmagic = Math.sqrt(magic)
-        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
-        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
-        const mglat = lat + dlat
-        const mglng = lng + dlng
-        return [mglng, mglat]
+
+                // 折线
+                function addPolyLine() {
+                    const polyline = new AMap.Polyline({
+                        path: path.value,
+                        isOutline: true,
+                        outlineColor: "#ffeeff",
+                        borderWeight: 1,
+                        strokeColor: "#3366FF",
+                        strokeOpacity: 0.6,
+                        strokeWeight: 5,
+                        // 折线样式还支持 'dashed'
+                        strokeStyle: "solid",
+                        // strokeStyle是dashed时有效
+                        // strokeDasharray: [10, 5],
+                        lineJoin: "round",
+                        lineCap: "round",
+                        zIndex: 50,
+                    });
+                    map.add([polyline]);
+                }
+            }
+        })
     }
-    /*判断是否在国内，不在国内则不做偏移*/
-    function transformlat(lng, lat) {
-        var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
-        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
-        ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
-        ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
-        return ret
+
+    const addMarker = (obj, data, src, type) => {
+        const marker = new AMap.Marker({
+            icon: new AMap.Icon({
+                image: src,
+                imageSize: new AMap.Size(22, 28) //图标大小
+            }),
+            position: obj, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
+            // 通过设置 offset 来添加偏移量
+            offset: new AMap.Pixel(-10, -20),
+        });
+        marker.setLabel({
+            offset: new AMap.Pixel(-30, 20),
+            content: data.dictLabel
+        });
+        if (type == 'car') {
+            singleMarker.value = marker
+        }
+        marker.setMap(mapObj.value);
+        //给marker添加属性
+        marker.setExtData(data)
+        //给marker添加点击事件
+        marker.on('click', clickMarker)
     }
 
-    /**
-     * 纬度转换
-     * @param { Number } lng 
-     * @param { Number } lat 
-     */
-    function transformlng(lng, lat) {
-        var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
-        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
-        ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
-        ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
-        return ret
+    const addLine = (list) => {
+        if (lineObj.value != null) {
+            mapObj.value.remove([lineObj.value])
+        }
+        var dataList = []
+        for (var index in list) {
+            // console.log('转换前坐标' + [list[index].lng, list[index].lat])
+            var location = formatGCJ(list[index].lng, list[index].lat);
+            // console.log('转换后坐标' + [location[0], location[1]])
+            var obj = new AMap.LngLat(location[0], location[1]);
+            dataList.push(obj)
+        }
+        var polyline = new AMap.Polyline({
+            path: dataList,
+            strokeWeight: 2, //线条宽度
+            strokeColor: "red", //线条颜色
+            lineJoin: "round", //折线拐点连接处样式
+        });
+        // polyline.setMap(mapObj);
+        // console.log(mapObj)
+        lineObj.value = polyline
+        mapObj.value.add(polyline);
     }
 
-    /**
-     * 判断是否在国内，不在国内则不做偏移
-     * @param {*} lng 
-     * @param {*} lat 
-     */
-    function outOfChina(lng, lat) {
-        return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
+    const emit = defineEmits(['childToParent']);
+
+    const clickMarker = (e) => {
+        emit('childToParent', e.target.getExtData())
     }
 
-}
+    const formatGCJ = (lng, lat) => {
+        const x_PI = 3.14159265358979324 * 3000.0 / 180.0
+        const PI = 3.1415926535897932384626
+        const a = 6378245.0
+        const ee = 0.00669342162296594323
+        if (outOfChina(lng, lat)) {
+            return [lng, lat]
+        }
+        else {
+            var dlat = transformlat(lng - 105.0, lat - 35.0)
+            var dlng = transformlng(lng - 105.0, lat - 35.0)
+            var radlat = lat / 180.0 * PI
+            var magic = Math.sin(radlat)
+            magic = 1 - ee * magic * magic
+            var sqrtmagic = Math.sqrt(magic)
+            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
+            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
+            const mglat = lat + dlat
+            const mglng = lng + dlng
+            return [mglng, mglat]
+        }
+        /*判断是否在国内，不在国内则不做偏移*/
+        function transformlat(lng, lat) {
+            var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
+            ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
+            ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
+            ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
+            return ret
+        }
 
+        /**
+         * 纬度转换
+         * @param { Number } lng 
+         * @param { Number } lat 
+         */
+        function transformlng(lng, lat) {
+            var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
+            ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
+            ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
+            ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
+            return ret
+        }
+
+        /**
+         * 判断是否在国内，不在国内则不做偏移
+         * @param {*} lng 
+         * @param {*} lat 
+         */
+        function outOfChina(lng, lat) {
+            return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
+        }
 
-initMap()
-console.log(props.showMarket);
-// getGpsDataList();
-defineExpose({
-    getGpsDataList,
-});
+    }
+
+
+    initMap()
+    console.log(props.showMarket);
+    // getGpsDataList();
+    defineExpose({
+        getGpsDataList,
+    });
 </script>
 
 <style>
-#container {
-    padding: 0px;
-    margin: 0px;
-    width: 100%;
-    height: 100%;
-}
+    #container {
+        padding: 0px;
+        margin: 0px;
+        width: 100%;
+        height: 100%;
+    }
 
-/* .amap-marker-label{
+    /* .amap-marker-label{
     border: 0px solid #00f;
     background-color: transparent;
     color: #ffffff;
 } */
-</style>
+</style>

src/components/Map/videoMap.vue

@@ -93,7 +93,7 @@ const initMap = () => {
         key: "88d0fc14bcd5921a4e5a09ef1a3ab31a", // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    }).then((AMap) => {
+    }).then(async (AMap) => {
         const map = new AMap.Map("container", {  //设置地图容器id
             viewMode: "3D",    //是否为3D地图模式
             zoom: 13,           //初始化地图级别
@@ -170,6 +170,66 @@ const initMap = () => {
 
     }).catch(e => {
         console.log(e);
+        if(e == '多个不一致的 key'){
+            const map = new AMap.Map("container", {  //设置地图容器id
+            viewMode: "3D",    //是否为3D地图模式
+            zoom: 13,           //初始化地图级别
+            center: [119.807462, 26.958413], //初始化地图中心点位置
+        });
+        console.log(11111111111);
+        console.log(props.darkType)
+        if (props.darkType) {
+            var styleName = "amap://styles/darkblue";
+            map.setMapStyle(styleName);
+        }
+        mapObj.value = map;
+        const infoWindow = new AMap.InfoWindow({
+            offset: new AMap.Pixel(16, -45),
+            //隐藏原生弹窗边框和关闭按钮
+            isCustom: false,
+            autoMove: true,
+            avoid: [20, 20, 20, 20],
+            // 点击地图关闭
+            closeWhenClickMap: false,
+        });
+        allInfoWindow.value = infoWindow
+        infoWindow.on('close',closeVideo)
+        // console.log(content)
+        infoWindow.setContent(content.join(""));
+        if (props.showMarket) {
+            getDictsData("tbl_sites");
+        }
+        // 单击
+        map.on('click', (e) => {
+            // lng ==> 经度值  lat => 维度值
+            current_position.value = [e.lnglat.lng, e.lnglat.lat];
+            path.value.push([e.lnglat.lng, e.lnglat.lat]);
+            //addMarker();
+            // addPolyLine();
+        })
+
+
+        // 折线
+        function addPolyLine() {
+            const polyline = new AMap.Polyline({
+                path: path.value,
+                isOutline: true,
+                outlineColor: "#ffeeff",
+                borderWeight: 1,
+                strokeColor: "#3366FF",
+                strokeOpacity: 0.6,
+                strokeWeight: 5,
+                // 折线样式还支持 'dashed'
+                strokeStyle: "solid",
+                // strokeStyle是dashed时有效
+                // strokeDasharray: [10, 5],
+                lineJoin: "round",
+                lineCap: "round",
+                zIndex: 50,
+            });
+            map.add([polyline]);
+        }
+        }
     })
 }
 

src/views/car/carInfo/index.vue

@@ -10,23 +10,23 @@
                 @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="驾驶员" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+              <el-input v-model="queryParams.carNum" placeholder="请输入驾驶员" clearable style="width: 160px"
                 @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="业务类型" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+              <el-input v-model="queryParams.carNum" placeholder="请输入业务类型" clearable style="width: 160px"
                 @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="能耗类型" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+              <el-input v-model="queryParams.carNum" placeholder="请输入能耗类型" clearable style="width: 160px"
                 @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="网格" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+              <el-input v-model="queryParams.carNum" placeholder="请输入网格" clearable style="width: 160px"
                 @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="单位" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+              <el-input v-model="queryParams.carNum" placeholder="请输入单位" clearable style="width: 160px"
                 @keyup.enter="handleQuery" />
             </el-form-item>
           </el-form>

src/views/car/work/carWork.vue

@@ -10,7 +10,7 @@
                 @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="站点" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+              <el-input v-model="queryParams.carNum" placeholder="请输入站点" clearable style="width: 160px"
                 @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="时间" prop="carNum">

src/views/yunying/scheduling/index.vue

@@ -14,7 +14,7 @@
                                 @keyup.enter="handleQuery" />
                         </el-form-item> -->
                         <el-form-item label="站点" prop="station">
-                            <el-input v-model="queryParams.station" placeholder="请输入车牌号" clearable style="width: 160px"
+                            <el-input v-model="queryParams.station" placeholder="请输入站点" clearable style="width: 160px"
                                 @keyup.enter="handleQuery" />
                         </el-form-item>
                         <!-- <el-form-item label="司机" prop="carNum">
@@ -67,7 +67,7 @@
                             <div style="width: 30px;height: 30px; cursor: pointer;" @click="openMapDiv(item)">
                                 <img style="width: 28px;height: 28px;" src="@/assets/images/icon/map1.png" />
                             </div>
-                            <div style="width: 30px;height: 20px; cursor: pointer;" @click="dialog.visible = true">
+                            <div style="width: 30px;height: 20px; cursor: pointer;" @click="openVideo(item)">
                                 <img style="width: 28px;height: 28px;" src="@/assets/images/icon/cam.png" />
                             </div>
                         </div>
@@ -85,117 +85,165 @@
             <mapDiv style="width:40vw;height:40vh;" ref="mapElmDiv"></mapDiv>
         </el-dialog>
 
-        <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
-            <video v-for="item in 1" style="width: 99%;margin-left:0.5%" controls="controls" :autoplay="false"
-                muted="muted" :ref="`videoref${item}`"></video>
+        <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body
+            before-close="destoryVideo">
+            <video style="width: 99%;margin-left: 0.5%;" ref="videoElement" class="centeredVideo" controls autoplay
+                muted></video>
         </el-dialog>
     </div>
 </template>
 
 <script setup name="CarInfo" lang="ts">
-import api from "@/api/system/user"
-import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
-import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
-import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
-import { useRoute, useRouter } from "vue-router";
-import timeLineDiv from "@/components/Public/timeline";
-import { getDicts } from '@/api/system/dict/data'
-import useTagsViewStore from '@/store/modules/tagsView';
-import mapDiv from "@/components/Map/index.vue"
-import { listCarSchedule, getCarSchedule, delCarSchedule, addCarSchedule, updateCarSchedule } from '@/api/carSchedule';
-import { CarScheduleVO, CarScheduleQuery, CarScheduleForm } from '@/api/carSchedule/types';
-import moment from 'moment';
-import { getCountData } from '@/api/gpsData';
-import { countData } from '@/api/gpsData/type';
-
-
-import videojs from "video.js"
-import "video.js/dist/video-js.css"
-import { values } from "video.js/dist/types/utils/obj";
-
-
-
-const route = useRoute();
-const router = useRouter();
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const carInfoList = ref<CarInfoVO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const value2 = ref('')
-const carScheduleList = ref<CarScheduleVO[]>([]);
-const timer = ref(null);
-const mapTimer = ref(null);
-
-const queryFormRef = ref<ElFormInstance>();
-const carInfoFormRef = ref<ElFormInstance>();
-
-
-const gettotalpeople = (item, type) => {
-    if (item.peoplecount != undefined && item.peoplecount != null) {
-        var totalpeople = item.peoplecount['total'];
-        if (type == 1) {
-            return totalpeople.totalin - totalpeople.totalout > 0 ? totalpeople.totalin - totalpeople.totalout : 0;
+    import api from "@/api/system/user"
+    import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
+    import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
+    import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
+    import { useRoute, useRouter } from "vue-router";
+    import timeLineDiv from "@/components/Public/timeline";
+    import { getDicts } from '@/api/system/dict/data'
+    import useTagsViewStore from '@/store/modules/tagsView';
+    import mapDiv from "@/components/Map/index.vue"
+    import { listCarSchedule, getCarSchedule, delCarSchedule, addCarSchedule, updateCarSchedule } from '@/api/carSchedule';
+    import { CarScheduleVO, CarScheduleQuery, CarScheduleForm } from '@/api/carSchedule/types';
+    import moment from 'moment';
+    import { getCountData } from '@/api/gpsData';
+    import { countData } from '@/api/gpsData/type';
+
+
+
+    import flvjs from "flv.js";
+    import { values } from "video.js/dist/types/utils/obj";
+
+
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+    const carInfoList = ref < CarInfoVO[] > ([]);
+    // const videoElement = ref(video)
+    const buttonLoading = ref(false);
+    const loading = ref(true);
+    const showSearch = ref(true);
+    const ids = ref < Array < string | number >> ([]);
+    const single = ref(true);
+    const multiple = ref(true);
+    const total = ref(0);
+    const value2 = ref('')
+    const flvPlayer = ref(null);
+    const carScheduleList = ref < CarScheduleVO[] > ([]);
+    const timer = ref(null);
+    const mapTimer = ref(null);
+
+    const queryFormRef = ref < ElFormInstance > ();
+    const carInfoFormRef = ref < ElFormInstance > ();
+
+
+    const gettotalpeople = (item, type) => {
+        if (item.peoplecount != undefined && item.peoplecount != null) {
+            var totalpeople = item.peoplecount['total'];
+            if (type == 1) {
+                return totalpeople.totalin - totalpeople.totalout > 0 ? totalpeople.totalin - totalpeople.totalout : 0;
+            }
+            if (type == 0) {
+                return totalpeople.totalin;
+            }
+
         }
-        if (type == 0) {
-            return totalpeople.totalin;
+        return 0;
+    }
+
+    const flvLoad = (url) => {
+        console.log(flvjs.isSupported())
+        if (flvjs.isSupported()) {
+            let videoElement = proxy.$refs.videoElement;
+            flvPlayer.value = flvjs.createPlayer(
+                {
+                    type: "flv", //媒体类型
+                    url: url || '', //flv格式媒体URL
+                    isLive: true, //数据源是否为直播流
+                    hasAudio: false, //数据源是否包含有音频
+                    hasVideo: true, //数据源是否包含有视频
+                    enableStashBuffer: false, //是否启用缓存区
+                },
+                {
+                    enableWorker: false, // 是否启用分离的线程进行转换
+                    enableStashBuffer: false, //关闭IO隐藏缓冲区
+                    autoCleanupSourceBuffer: true, //自动清除缓存
+                }
+            );
+            flvPlayer.value.attachMediaElement(videoElement); //将播放实例注册到节点
+            flvPlayer.value.load(); //加载数据流
+            flvPlayer.value.play(); //播放数据流
         }
+    }
 
+    const openVideo = (item) => {
+        var findVideo = false
+        for (var index in carInfoList.value) {
+            if (carInfoList.value[index].carNum == item.carNum) {
+                if (carInfoList.value[index].deviceInfos != null && carInfoList.value[index].deviceInfos != '') {
+                    var drivesInfo = JSON.parse(carInfoList.value[index].deviceInfos)
+                    console.log(drivesInfo)
+                    for(var j in drivesInfo){
+                          if(drivesInfo[j].type == "摄像头"){
+                            findVideo = true
+                            dialog.visible = true;
+                            setTimeout(() => {
+                                flvLoad(drivesInfo[j].code)
+                            }, 1000);
+                          }
+                    }
+                }
+            }
+        }
+        if (!findVideo) {
+            ElMessage({
+                message: '该车辆未配置摄像头',
+                type: 'warning',
+            })
+        }
     }
-    return 0;
-}
-
-const dialogMap = reactive<DialogOption>({
-    visible: false,
-    title: '地图'
-});
-
-const dialog = reactive<DialogOption>({
-    visible: false,
-    title: '在线视频'
-});
-
-const mapElmDiv = ref(mapDiv)
-
-const columns = ref([
-    // {label: '上层位置', prop: 'v', visible: true},
-    { label: '姓名', prop: 'carNum', visible: true, isTemplate: false },
-    { label: '身份证', prop: 'workTime', visible: true, isTemplate: false, },
-    { label: '手机号', prop: 'workName', pprop: "ext1", visible: true, isTemplate: false },
-    { label: '设备号', prop: 'type', pprop: "ext1", visible: true, isTemplate: false, },
-    { label: '车辆', prop: 'wangge', pprop: "ext1", visible: true, isTemplate: false, },
-    { label: '工作小组', prop: 'gpeople', pprop: "ext1", visible: true, isTemplate: false, },
-    { label: '类型', prop: 'people', pprop: "ext1", visible: true, isTemplate: false, },
-])
-
-const reloadData = ref(true)
-
-const initFormData: CarInfoForm = {
-    id: undefined,
-    carNum: undefined,
-    carType: undefined,
-    deviceInfos: undefined,
-    repairInfo: undefined,
-    maintenanceInfo: undefined,
-    insuranceInfo: undefined,
-    inspectionInfo: undefined,
-    trafficAccidentInfo: undefined,
-    violationInfo: undefined,
-    changeInfo: undefined,
-    ext1: undefined,
-    ext2: undefined
-}
-const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
-    form: { ...initFormData },
-    queryParams: {
-        pageNum: 1,
-        pageSize: 10,
+
+    const destoryVideo = () => {
+        if (flvPlayer.value) {
+            flvPlayer.value.pause();
+            flvPlayer.value.unload();
+            flvPlayer.value.detachMediaElement();
+            flvPlayer.value.destroy();
+            flvPlayer.value = null;
+        }
+    }
+
+
+    const dialogMap = reactive < DialogOption > ({
+        visible: false,
+        title: '地图'
+    });
+
+    const dialog = reactive < DialogOption > ({
+        visible: false,
+        title: '在线视频'
+    });
+
+    const mapElmDiv = ref(mapDiv)
+
+    const columns = ref([
+        // {label: '上层位置', prop: 'v', visible: true},
+        { label: '姓名', prop: 'carNum', visible: true, isTemplate: false },
+        { label: '身份证', prop: 'workTime', visible: true, isTemplate: false, },
+        { label: '手机号', prop: 'workName', pprop: "ext1", visible: true, isTemplate: false },
+        { label: '设备号', prop: 'type', pprop: "ext1", visible: true, isTemplate: false, },
+        { label: '车辆', prop: 'wangge', pprop: "ext1", visible: true, isTemplate: false, },
+        { label: '工作小组', prop: 'gpeople', pprop: "ext1", visible: true, isTemplate: false, },
+        { label: '类型', prop: 'people', pprop: "ext1", visible: true, isTemplate: false, },
+    ])
+
+    const reloadData = ref(true)
+
+    const initFormData: CarInfoForm = {
+        id: undefined,
         carNum: undefined,
         carType: undefined,
         deviceInfos: undefined,
@@ -207,388 +255,406 @@ const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
         violationInfo: undefined,
         changeInfo: undefined,
         ext1: undefined,
-        ext2: undefined,
-        params: {
-        }
-    },
-    rules: {
-        id: [
-            { required: true, message: "编号不能为空", trigger: "blur" }
-        ],
-        carNum: [
-            { required: true, message: "车牌号不能为空", trigger: "blur" }
-        ],
-        carType: [
-            { required: true, message: "车类型不能为空", trigger: "change" }
-        ],
-        deviceInfos: [
-            { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
-        ],
-        repairInfo: [
-            { required: true, message: "维修信息不能为空", trigger: "blur" }
-        ],
-        maintenanceInfo: [
-            { required: true, message: "保养信息不能为空", trigger: "blur" }
-        ],
-        insuranceInfo: [
-            { required: true, message: "保险信息不能为空", trigger: "blur" }
-        ],
-        inspectionInfo: [
-            { required: true, message: "年检信息不能为空", trigger: "blur" }
-        ],
-        trafficAccidentInfo: [
-            { required: true, message: "交通事故信息不能为空", trigger: "blur" }
-        ],
-        violationInfo: [
-            { required: true, message: "违章信息不能为空", trigger: "blur" }
-        ],
-        changeInfo: [
-            { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
-        ],
-        ext1: [
-            { required: true, message: "扩展1不能为空", trigger: "blur" }
-        ],
-        ext2: [
-            { required: true, message: "扩展2不能为空", trigger: "blur" }
-        ]
-    }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-const carTypeList = ref([]);
-const energyTypeList = ref([])
-const bussinessTypeList = ref([])
-
-const userList = ref<UserVO[]>();
-
-const goadd = () => {
-    useTagsViewStore().delView(route);
-    router.push("/car/work/addWork")
-}
-
-const getScheduleList = async () => {
-    console.log(value2.value)
-    var startTime = moment(value2.value[0]).format('YYYY-MM-DD')
-    var endTime = moment(value2.value[1]).format('YYYY-MM-DD')
-    reloadData.value = false;
-    var date = new Date();
-    var param = {
-        params: {
-            scheduleDate: moment(date).format('YYYY-MM-DD'),
-            carNum:queryParams.value.carNum,
-            station:queryParams.value.station
-            // starttime:startTime,
-            // endtime:endTime
-            // scheduleDate: '2024-03-16'
-        },
-        pageSize: "1000"
+        ext2: undefined
     }
-    carScheduleList.value = [];
-    const res = await listCarSchedule(param);
-    // carScheduleList.value = res.rows;
-    res.rows.map(i => {
-        var pathLine = JSON.parse(i.pathInfo).pathLine
-        var endTime = moment(date).format('YYYY-MM-DD') + ' ' + pathLine[pathLine.length - 1].planInTime
-        // console.log(new Date().getTime() )
-        // console.log(new Date(endTime).getTime())
-        if (new Date().getTime() < new Date(endTime).getTime()) {
-            if (i.ext1 != undefined && i.ext1 != null) {
-                var datajson = JSON.parse(i.ext1)
-                var times = Object.values(datajson).map(j => {
-                    return j.intime + "|" + j.outtime
-                }).join("$");
-                times += "$" + i.scheduleDate + "|" + moment().format("YYYY-MM-DD HH:mm:ss")
-                getCountData({ "params[times]": `${times}` }).then(res1 => {
-                    var pcount = {}
-                    var index = 0;
-                    Object.keys(datajson).map(j => {
-                        pcount[j] = res1.data[index++]
-                    })
-                    pcount['total'] = res1.data[index]
-                    i['peoplecount'] = pcount;
-                });
+    const data = reactive < PageData < CarInfoForm, CarInfoQuery>> ({
+        form: { ...initFormData },
+        queryParams: {
+            pageNum: 1,
+            pageSize: 10,
+            carNum: undefined,
+            carType: undefined,
+            deviceInfos: undefined,
+            repairInfo: undefined,
+            maintenanceInfo: undefined,
+            insuranceInfo: undefined,
+            inspectionInfo: undefined,
+            trafficAccidentInfo: undefined,
+            violationInfo: undefined,
+            changeInfo: undefined,
+            ext1: undefined,
+            ext2: undefined,
+            params: {
             }
-            carScheduleList.value.push(i)
+        },
+        rules: {
+            id: [
+                { required: true, message: "编号不能为空", trigger: "blur" }
+            ],
+            carNum: [
+                { required: true, message: "车牌号不能为空", trigger: "blur" }
+            ],
+            carType: [
+                { required: true, message: "车类型不能为空", trigger: "change" }
+            ],
+            deviceInfos: [
+                { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
+            ],
+            repairInfo: [
+                { required: true, message: "维修信息不能为空", trigger: "blur" }
+            ],
+            maintenanceInfo: [
+                { required: true, message: "保养信息不能为空", trigger: "blur" }
+            ],
+            insuranceInfo: [
+                { required: true, message: "保险信息不能为空", trigger: "blur" }
+            ],
+            inspectionInfo: [
+                { required: true, message: "年检信息不能为空", trigger: "blur" }
+            ],
+            trafficAccidentInfo: [
+                { required: true, message: "交通事故信息不能为空", trigger: "blur" }
+            ],
+            violationInfo: [
+                { required: true, message: "违章信息不能为空", trigger: "blur" }
+            ],
+            changeInfo: [
+                { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
+            ],
+            ext1: [
+                { required: true, message: "扩展1不能为空", trigger: "blur" }
+            ],
+            ext2: [
+                { required: true, message: "扩展2不能为空", trigger: "blur" }
+            ]
         }
-    })
+    });
 
+    const { queryParams, form, rules } = toRefs(data);
 
-    reloadData.value = true
-}
+    const carTypeList = ref([]);
+    const energyTypeList = ref([])
+    const bussinessTypeList = ref([])
 
-const getTimeFormat = (data) => {
-    var value = JSON.parse(data).pathLine
-    if (value.length > 0) {
-        if (value[0].planInTime && value[value.length - 1].planInTime) {
-            return value[0].planInTime + '-' + value[value.length - 1].planInTime
+    const userList = ref < UserVO[] > ();
+
+    const goadd = () => {
+        useTagsViewStore().delView(route);
+        router.push("/car/work/addWork")
+    }
+
+    const getScheduleList = async () => {
+        console.log(value2.value)
+        var startTime = moment(value2.value[0]).format('YYYY-MM-DD')
+        var endTime = moment(value2.value[1]).format('YYYY-MM-DD')
+        reloadData.value = false;
+        var date = new Date();
+        var param = {
+            params: {
+                scheduleDate: moment(date).format('YYYY-MM-DD'),
+                carNum: queryParams.value.carNum,
+                station: queryParams.value.station
+                // starttime:startTime,
+                // endtime:endTime
+                // scheduleDate: '2024-03-16'
+            },
+            pageSize: "1000"
+        }
+        carScheduleList.value = [];
+        const res = await listCarSchedule(param);
+        // carScheduleList.value = res.rows;
+        res.rows.map(i => {
+            var pathLine = JSON.parse(i.pathInfo).pathLine
+            var endTime = moment(date).format('YYYY-MM-DD') + ' ' + pathLine[pathLine.length - 1].planInTime
+            // console.log(new Date().getTime() )
+            // console.log(new Date(endTime).getTime())
+            if (new Date().getTime() < new Date(endTime).getTime()) {
+                if (i.ext1 != undefined && i.ext1 != null) {
+                    var datajson = JSON.parse(i.ext1)
+                    var times = Object.values(datajson).map(j => {
+                        return j.intime + "|" + j.outtime
+                    }).join("$");
+                    times += "$" + i.scheduleDate + "|" + moment().format("YYYY-MM-DD HH:mm:ss")
+                    getCountData({ "params[times]": `${times}` }).then(res1 => {
+                        var pcount = {}
+                        var index = 0;
+                        Object.keys(datajson).map(j => {
+                            pcount[j] = res1.data[index++]
+                        })
+                        pcount['total'] = res1.data[index]
+                        i['peoplecount'] = pcount;
+                    });
+                }
+                carScheduleList.value.push(i)
+            }
+        })
+        //测试用
+        // carScheduleList.value = res.rows;
+        reloadData.value = true
+    }
+
+    const getTimeFormat = (data) => {
+        var value = JSON.parse(data).pathLine
+        if (value.length > 0) {
+            if (value[0].planInTime && value[value.length - 1].planInTime) {
+                return value[0].planInTime + '-' + value[value.length - 1].planInTime
+            } else {
+                return "请填写路线时间"
+            }
         } else {
             return "请填写路线时间"
         }
-    } else {
-        return "请填写路线时间"
     }
-}
 
-const getAddr = (data) => {
-    var value = JSON.parse(data).pathLine
-    if (value.length > 0) {
-        return value[0].stationName + '-' + value[value.length - 1].stationName
+    const getAddr = (data) => {
+        var value = JSON.parse(data).pathLine
+        if (value.length > 0) {
+            return value[0].stationName + '-' + value[value.length - 1].stationName
+        }
     }
-}
-
-const getList = async () => {
-    console.log(value2.value)
-    // queryParams.value.starttime = value2.value
-    const res = await listCarInfo({ pageSize: 1000 });
-    carInfoList.value = res.rows
-    //   console.log(res);
-}
-
-const getDictsData = (param, obj) => {
-    getDicts(param).then(res => {
-        obj.value = res.data;
-    })
-}
 
-/** 取消按钮 */
-const cancel = () => {
-    reset();
-    dialog.visible = false;
-}
+    const getList = async () => {
+        console.log(value2.value)
+        // queryParams.value.starttime = value2.value
+        const res = await listCarInfo({ pageSize: 1000 });
+        carInfoList.value = res.rows
+        //   console.log(res);
+    }
 
-const getUserList = () => {
-    api.listUser({ pageSize: 1000 }).then(res => {
-        userList.value = res.rows;
-    });
-}
+    const getDictsData = (param, obj) => {
+        getDicts(param).then(res => {
+            obj.value = res.data;
+        })
+    }
 
-const getUserName = (value) => {
-    for (var index in userList.value) {
-        if (value == userList.value[index].userId) {
-            return userList.value[index].nickName
-        }
+    /** 取消按钮 */
+    const cancel = () => {
+        reset();
+        dialog.visible = false;
     }
-}
-
-/** 表单重置 */
-const reset = () => {
-    form.value = { ...initFormData };
-    carInfoFormRef.value?.resetFields();
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-    queryParams.value.pageNum = 1;
-    getList();
-}
-
-const openMapDiv = (data) => {
-    dialogMap.visible = true;
-    const info = getCatInfoData(data.carNum);
-    console.log(info)
-    var deviceInfo = JSON.parse(info.deviceInfos)
-    console.log(deviceInfo)
-    var code = '';
-    for (var index in deviceInfo) {
-        if (deviceInfo[index].type == 'gps') {
-            code = deviceInfo[index].code
+
+    const getUserList = () => {
+        api.listUser({ pageSize: 1000 }).then(res => {
+            userList.value = res.rows;
+        });
+    }
+
+    const getUserName = (value) => {
+        for (var index in userList.value) {
+            if (value == userList.value[index].userId) {
+                return userList.value[index].nickName
+            }
         }
     }
-    var value = JSON.parse(data.pathInfo).pathLine
-    var date = moment(new Date()).format('YYYY-MM-DD')
-    if (value[0].planInTime && value[value.length - 1].planInTime) {
-        var param = {
-            devicecode: code,
-            params: {
-                starttime: date + ' ' + value[0].planInTime,
-                endtime: date + ' ' + value[value.length - 1].planInTime,
+
+    /** 表单重置 */
+    const reset = () => {
+        form.value = { ...initFormData };
+        carInfoFormRef.value?.resetFields();
+    }
+
+    /** 搜索按钮操作 */
+    const handleQuery = () => {
+        queryParams.value.pageNum = 1;
+        getList();
+    }
+
+    const openMapDiv = (data) => {
+        dialogMap.visible = true;
+        const info = getCatInfoData(data.carNum);
+        console.log(info)
+        var deviceInfo = JSON.parse(info.deviceInfos)
+        console.log(deviceInfo)
+        var code = '';
+        for (var index in deviceInfo) {
+            if (deviceInfo[index].type == 'gps') {
+                code = deviceInfo[index].code
             }
         }
-        // console.log(mapElm.value);
-        // mapElm.value.getGpsDataList(param);
-        setTimeout(() => {
-            mapElmDiv.value.getGpsDataList(param);
-            mapTimer.value = setInterval(() => {
-                console.log(2222222222222)
-                console.log(dialogMap.visible)
-                if (dialogMap.visible) {
-                    console.log(222222)
-                    mapElmDiv.value.getGpsDataList(param);
+        var value = JSON.parse(data.pathInfo).pathLine
+        var date = moment(new Date()).format('YYYY-MM-DD')
+        if (value[0].planInTime && value[value.length - 1].planInTime) {
+            var param = {
+                devicecode: code,
+                params: {
+                    starttime: date + ' ' + value[0].planInTime,
+                    endtime: date + ' ' + value[value.length - 1].planInTime,
                 }
-            }, 30000);
-        }, 1000);
-    }
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-    //queryFormRef.value?.resetFields();
-    //handleQuery();
-    getScheduleList();
-    // reloadData.value = false;
-    // setTimeout(() => {
-    //     reloadData.value = true;
-    // }, 500);
-}
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: CarInfoVO[]) => {
-    ids.value = selection.map(item => item.id);
-    single.value = selection.length != 1;
-    multiple.value = !selection.length;
-}
-
-/** 新增按钮操作 */
-const handleAdd = () => {
-    reset();
-    dialog.visible = true;
-    dialog.title = "添加车辆信息";
-}
-
-/** 修改按钮操作 */
-const handleUpdate = async (row?: CarInfoVO) => {
-    reset();
-    const _id = row?.id || ids.value[0]
-    const res = await getCarInfo(_id);
-    Object.assign(form.value, res.data);
-    dialog.visible = true;
-    dialog.title = "修改车辆信息";
-}
-
-/** 提交按钮 */
-const submitForm = () => {
-    carInfoFormRef.value?.validate(async (valid: boolean) => {
-        if (valid) {
-            buttonLoading.value = true;
-            if (form.value.id) {
-                await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
-            } else {
-                await addCarInfo(form.value).finally(() => buttonLoading.value = false);
             }
-            proxy?.$modal.msgSuccess("修改成功");
-            dialog.visible = false;
-            await getList();
+            // console.log(mapElm.value);
+            // mapElm.value.getGpsDataList(param);
+            setTimeout(() => {
+                mapElmDiv.value.getGpsDataList(param);
+                mapTimer.value = setInterval(() => {
+                    console.log(2222222222222)
+                    console.log(dialogMap.visible)
+                    if (dialogMap.visible) {
+                        console.log(222222)
+                        mapElmDiv.value.getGpsDataList(param);
+                    }
+                }, 30000);
+            }, 1000);
         }
-    });
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (row?: CarInfoVO) => {
-    const _ids = row?.id || ids.value;
-    await proxy?.$modal.confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
-    await delCarInfo(_ids);
-    proxy?.$modal.msgSuccess("删除成功");
-    await getList();
-}
-
-/** 导出按钮操作 */
-const handleExport = () => {
-    proxy?.download('system/carInfo/export', {
-        ...queryParams.value
-    }, `carInfo_${new Date().getTime()}.xlsx`)
-}
-
-const initData = async () => {
-    await getDictsData('tbl_car_type', carTypeList);
-    await getDictsData('energy_type', energyTypeList);
-    await getDictsData('business_type', bussinessTypeList);
-    await getList();
-    await getUserList();
-    getScheduleList();
-}
-
-const getDictLabel = (value, list) => {
-    for (var index in list.value) {
-        // console.log(list[index])
-        if (list.value[index].dictValue == value) {
-            return list.value[index].dictLabel
+    }
+
+    /** 重置按钮操作 */
+    const resetQuery = () => {
+        //queryFormRef.value?.resetFields();
+        //handleQuery();
+        getScheduleList();
+        // reloadData.value = false;
+        // setTimeout(() => {
+        //     reloadData.value = true;
+        // }, 500);
+    }
+
+    /** 多选框选中数据 */
+    const handleSelectionChange = (selection: CarInfoVO[]) => {
+        ids.value = selection.map(item => item.id);
+        single.value = selection.length != 1;
+        multiple.value = !selection.length;
+    }
+
+    /** 新增按钮操作 */
+    const handleAdd = () => {
+        reset();
+        dialog.visible = true;
+        dialog.title = "添加车辆信息";
+    }
+
+    /** 修改按钮操作 */
+    const handleUpdate = async (row?: CarInfoVO) => {
+        reset();
+        const _id = row?.id || ids.value[0]
+        const res = await getCarInfo(_id);
+        Object.assign(form.value, res.data);
+        dialog.visible = true;
+        dialog.title = "修改车辆信息";
+    }
+
+    /** 提交按钮 */
+    const submitForm = () => {
+        carInfoFormRef.value?.validate(async (valid: boolean) => {
+            if (valid) {
+                buttonLoading.value = true;
+                if (form.value.id) {
+                    await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
+                } else {
+                    await addCarInfo(form.value).finally(() => buttonLoading.value = false);
+                }
+                proxy?.$modal.msgSuccess("修改成功");
+                dialog.visible = false;
+                await getList();
+            }
+        });
+    }
+
+    /** 删除按钮操作 */
+    const handleDelete = async (row?: CarInfoVO) => {
+        const _ids = row?.id || ids.value;
+        await proxy?.$modal.confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+        await delCarInfo(_ids);
+        proxy?.$modal.msgSuccess("删除成功");
+        await getList();
+    }
+
+    /** 导出按钮操作 */
+    const handleExport = () => {
+        proxy?.download('system/carInfo/export', {
+            ...queryParams.value
+        }, `carInfo_${new Date().getTime()}.xlsx`)
+    }
+
+    const initData = async () => {
+        await getDictsData('tbl_car_type', carTypeList);
+        await getDictsData('energy_type', energyTypeList);
+        await getDictsData('business_type', bussinessTypeList);
+        await getList();
+        await getUserList();
+        getScheduleList();
+    }
+
+    const getDictLabel = (value, list) => {
+        for (var index in list.value) {
+            // console.log(list[index])
+            if (list.value[index].dictValue == value) {
+                return list.value[index].dictLabel
+            }
         }
     }
-}
 
-const getCatInfo = (value) => {
-    for (var index in carInfoList.value) {
-        if (carInfoList.value[index].carNum == value) {
-            var data = JSON.parse(carInfoList.value[index].ext1)
-            return getDictLabel(data.energyType, energyTypeList).replaceAll("车", "") + getDictLabel(data.bussinessType, bussinessTypeList)
+    const getCatInfo = (value) => {
+        for (var index in carInfoList.value) {
+            if (carInfoList.value[index].carNum == value) {
+                var data = JSON.parse(carInfoList.value[index].ext1)
+                return getDictLabel(data.energyType, energyTypeList).replaceAll("车", "") + getDictLabel(data.bussinessType, bussinessTypeList)
+            }
         }
     }
-}
 
-const getCatInfoData = (value) => {
-    for (var index in carInfoList.value) {
-        if (carInfoList.value[index].carNum == value) {
-            return carInfoList.value[index]
+    const getCatInfoData = (value) => {
+        for (var index in carInfoList.value) {
+            if (carInfoList.value[index].carNum == value) {
+                return carInfoList.value[index]
+            }
         }
     }
-}
 
-onUnmounted(() => {
+    onUnmounted(() => {
 
-})
+    })
 
-onBeforeUnmount(() => {
-    clearInterval(timer.value)
-    clearInterval(mapTimer.value)
-    timer.value = null;
-    mapTimer.value = null;
-})
+    onBeforeUnmount(() => {
+        clearInterval(timer.value)
+        clearInterval(mapTimer.value)
+        timer.value = null;
+        mapTimer.value = null;
+    })
 
-onMounted(() => {
-    initData();
-    //每5s刷新数据
-    timer.value = setInterval(() => {
-        console.log(11111)
-        getScheduleList();
-        reloadData.value = false;
-        setTimeout(() => {
-            reloadData.value = true;
-        }, 500);
-    }, 30000);
-    // mapTimer.value = setInterval(() => {
-    //     console.log(2222222222222)
-    //     console.log(dialog.visible)
-    //     if (dialog.visible) {
-    //         console.log(222222)
-    //         mapElmDiv.value.getGpsDataList(param);
-    //     }
-    // }, 2000);
-});
+    onMounted(() => {
+        initData();
+        //每5s刷新数据
+        timer.value = setInterval(() => {
+            console.log(11111)
+            getScheduleList();
+            reloadData.value = false;
+            setTimeout(() => {
+                reloadData.value = true;
+            }, 500);
+        }, 30000);
+        // mapTimer.value = setInterval(() => {
+        //     console.log(2222222222222)
+        //     console.log(dialog.visible)
+        //     if (dialog.visible) {
+        //         console.log(222222)
+        //         mapElmDiv.value.getGpsDataList(param);
+        //     }
+        // }, 2000);
+    });
 </script>
 
 <style lang="scss" scoped>
-.carDiv {
-    border-radius: 7px;
-    opacity: 1;
-    box-sizing: border-box;
-    border: 1px solid #7BC932;
-    height: 25vh;
-    display: flex;
-    flex-direction: row;
-}
-
-.carDetail {
-    width: 135px;
-    padding: 5px 10px;
-    border-radius: 22px;
-    opacity: 1;
-    background: #FFFFFF;
-    font-family: 思源黑体;
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 6px;
-    color: #7BC932;
-}
-
-.carFont {
-    font-family: 思源黑体;
-    font-size: 16px;
-    font-weight: bold;
-    line-height: normal;
-    align-items: center;
-    letter-spacing: 0px;
-    font-feature-settings: "kern" on;
-    color: #FFFFFF;
-}
-</style>
+    .carDiv {
+        border-radius: 7px;
+        opacity: 1;
+        box-sizing: border-box;
+        border: 1px solid #7BC932;
+        height: 25vh;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .carDetail {
+        width: 135px;
+        padding: 5px 10px;
+        border-radius: 22px;
+        opacity: 1;
+        background: #FFFFFF;
+        font-family: 思源黑体;
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 6px;
+        color: #7BC932;
+    }
+
+    .carFont {
+        font-family: 思源黑体;
+        font-size: 16px;
+        font-weight: bold;
+        line-height: normal;
+        align-items: center;
+        letter-spacing: 0px;
+        font-feature-settings: "kern" on;
+        color: #FFFFFF;
+    }
+</style>

src/views/yunying/video/index.vue

@@ -243,7 +243,7 @@
     }
     updateData(data).then(res => {
       ElMessage.success("成功!");
-      getSites();
+      getLineSites();
 
     })
   }