feat

pyt

2025-04-07 1145d09a9b890f83a86c01f5f01ba6e573a53d67

feat

 src/assets/homeImg/eye-fill.png

 src/view/early-warning/index.vue

@@ -2,40 +2,52 @@
    <div>

        <div class="form flex a-center j-between mt--23">

            <div class="form-left ml--30">

                <el-form :inline="true" :model="searchForm" class="demo-form-inline">

                    <el-form-item label="预警类型:" prop="type" class="unset_m" style="margin-right: 15px;">

                        <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择">

                            <el-option label="全部" value=""></el-option>

                            <el-option label="预警" value="1"></el-option>

                            <el-option label="报警" value="2"></el-option>

                <el-form :inline="true" :model="queryForm" class="demo-form-inline">

                    <el-form-item label="预警类型:" prop="warnType" class="unset_m" style="margin-right: 15px;">

                        <el-select :popper-append-to-body="false" v-model="queryForm.warnType" placeholder="请选择">

                            <el-option label="超速报警" value="超速报警"></el-option>

                            <el-option label="疲劳驾驶报警" value="疲劳驾驶报警"></el-option>

                            <el-option label="紧急报警" value="紧急报警"></el-option>

                            <el-option label="进入指定区域报警" value="进入指定区域报警"></el-option>

                            <el-option label="离开指定区域报警" value="离开指定区域报警"></el-option>

                            <el-option label="路段堵塞报警" value="路段堵塞报警"></el-option>

                            <el-option label="危险路段报警" value="危险路段报警"></el-option>

                            <el-option label="越界报警" value="越界报警"></el-option>

                            <el-option label="盗警" value="盗警"></el-option>

                            <el-option label="劫警" value="劫警"></el-option>

                            <el-option label="偏离路线报警" value="偏离路线报警"></el-option>

                            <el-option label="车辆移动报警" value="车辆移动报警"></el-option>

                            <el-option label="超时驾驶报警" value="超时驾驶报警"></el-option>

                            <el-option label="其他报警" value="其他报警"></el-option>

                        </el-select>

                    </el-form-item>

                    <el-form-item label="车辆号牌:" prop="level" class="unset_m" style="margin-right: 15px;">

                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>

                    <el-form-item label="车辆号牌:" prop="vehicleNumber" class="unset_m" style="margin-right: 15px;">

                        <el-input v-model="queryForm.vehicleNumber" placeholder="请输入"></el-input>

                    </el-form-item>

                    <el-form-item label="驾驶员姓名:" prop="name" class="unset_m" style="margin-right: 15px;">

                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>

                    <el-form-item label="驾驶员姓名:" prop="driverName" class="unset_m" style="margin-right: 15px;">

                        <el-input v-model="queryForm.driverName" placeholder="请输入"></el-input>

                    </el-form-item>

                    <el-form-item label="公司名称:" prop="companyName" class="unset_m" style="margin-right: 15px;">

                        <el-input v-model="searchForm.companyName" placeholder="请输入"></el-input>

                    <el-form-item label="公司名称:" prop="enterpriseName" class="unset_m" style="margin-right: 15px;">

                        <el-input v-model="queryForm.enterpriseName" placeholder="请输入"></el-input>

                    </el-form-item>

                    <el-form-item label="预警时间:" prop="date" class="unset_m" style="margin-right: 15px;">

                        <el-date-picker :append-to-body="false" v-model="searchForm.date" type="daterange"

                        <el-date-picker :append-to-body="false" v-model="queryForm.date" type="daterange"

                            range-separator=" " start-placeholder="开始日期" end-placeholder="结束日期">

                        </el-date-picker>

                    </el-form-item>

                    <el-form-item label="处理类型:" prop="type" class="unset_m" style="margin-right: 15px;">

                        <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择">

                            <el-option label="全部" value=""></el-option>

                            <el-option label="预警" value="1"></el-option>

                            <el-option label="报警" value="2"></el-option>

                    <el-form-item label="处理类型:" prop="treatmentState" class="unset_m" style="margin-right: 15px;">

                        <el-select :popper-append-to-body="false" v-model="queryForm.treatmentState" placeholder="请选择">

                            <el-option label="处理中" value="处理中"></el-option>

                            <el-option label="已处理完毕" value="已处理完毕"></el-option>

                            <el-option label="不作处理" value="不作处理"></el-option>

                            <el-option label="将来处理" value="将来处理"></el-option>

                        </el-select>

                    </el-form-item>

                </el-form>

            </div>

            <div class="form-right mr--24 mb--22 shrink0">

                <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"

                    @click="search">查询</el-button>

                    @click="fetchData">查询</el-button>

                <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"

                    size="small">重置</el-button>

            </div>

@@ -47,58 +59,62 @@
                @click="exportExcell">导出</el-button>

        </div>

        <div class="table-box ml--30 mt--23 mr--30">

            <el-table :data="tableData" border stripe style="width: 100%">

            <el-table :data="list" border stripe style="width: 100%" v-loading="listLoading">

                <!-- 固定前三列 -->

                <el-table-column prop="date" label="序号" fixed="left"></el-table-column>

                <el-table-column prop="name" label="车辆名称" fixed="left"></el-table-column>

                <el-table-column prop="name" label="车牌号码" fixed="left"></el-table-column>

                <el-table-column prop="date" label="序号" fixed="left" type="index" width="50"></el-table-column>

                <el-table-column prop="carName" label="车辆名称" fixed="left"></el-table-column>

                <el-table-column prop="vehicleNumber" label="车牌号码" fixed="left"></el-table-column>

                <!-- 其余列不固定，可滚动 -->

                <el-table-column prop="name" label="近15分钟情况"></el-table-column>

                <el-table-column prop="name" label="驾驶员名称"></el-table-column>

                <el-table-column prop="name" label="所属公司"></el-table-column>

                <el-table-column prop="name" label="终端编号"></el-table-column>

                <el-table-column prop="name" label="开始报警时间"></el-table-column>

                <el-table-column prop="name" label="结束报警时间"></el-table-column>

                <el-table-column prop="name" label="持续时长"></el-table-column>

                <el-table-column prop="name" label="持续里程数"></el-table-column>

                <el-table-column prop="name" label="报警类型"></el-table-column>

                <el-table-column prop="name" label="报警等级"></el-table-column>

                <el-table-column prop="name" label="报警次数"></el-table-column>

                <el-table-column prop="name" label="报警来源"></el-table-column>

                <el-table-column prop="name" label="处理状态"></el-table-column>

                <el-table-column prop="name" label="处理人"></el-table-column>

                <el-table-column prop="name" label="处理时间"></el-table-column>

                <el-table-column prop="name" label="处理描述"></el-table-column>

                <el-table-column prop="name" label="近15分钟情况">

                    <template #default="{ row }">

                        <img src="@/assets/homeImg/eye-fill.png" alt="" @click="viewDetail(row)"

                            style="width: 30px;cursor: pointer;">

                    </template>

                </el-table-column>

                <el-table-column prop="driverName" label="驾驶员名称"></el-table-column>

                <el-table-column prop="enterpriseName" label="所属公司"></el-table-column>

                <el-table-column prop="terminalNumber" label="终端编号"></el-table-column>

                <el-table-column prop="startTime" label="开始报警时间"></el-table-column>

                <el-table-column prop="endTime" label="结束报警时间"></el-table-column>

                <el-table-column prop="keepTime" label="持续时长"></el-table-column>

                <el-table-column prop="keepDistance" label="持续里程数"></el-table-column>

                <el-table-column prop="warnType" label="报警类型"></el-table-column>

                <el-table-column prop="warnLevel" label="报警等级"></el-table-column>

                <el-table-column prop="warnNumber" label="报警次数"></el-table-column>

                <el-table-column prop="warnSource" label="报警来源"></el-table-column>

                <el-table-column prop="treatmentState" label="处理状态"></el-table-column>

                <el-table-column prop="treatmentUser" label="处理人"></el-table-column>

                <el-table-column prop="treatmentTime" label="处理时间"></el-table-column>

                <el-table-column prop="treatmentRemark" label="处理描述"></el-table-column>

            </el-table>

            <div class="pagination-box relative mt--23 flex j-end">

                <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange"

                    @current-change="handleCurrentChange" :current-page="searchForm.page" background

                    layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total">

                    @current-change="handleCurrentChange" :current-page="queryForm.page" background

                    layout="total,sizes,prev, pager, next,jumper" :total="total">

                </el-pagination>

            </div>

            <el-drawer :visible.sync="drawer" append-to-body :size="450">

            <el-drawer :visible.sync="drawer" append-to-body :size="450" @close="closeDrawer">

                <div class="flex j-between a-center fs--20 pl--15 pr--15">

                    <!-- 使用 Tailwind CSS 的内联十六进制颜色类 -->

                    黑A03343D（5）<i class="el-icon-s-unfold color1 pointer"></i>

                    <div>{{ info.vehicleNumber }}<span v-if="info.warnList && info.warnList.length > 0">（{{info.warnList.length}}）</span></div><i @click="closeDrawer" class="el-icon-s-unfold color1 pointer"></i>

                </div>

                <hr class="mt--10" />

                <div class="pl--15 pr--15">

                    <div class="flex mt--15">

                        <div class="w--100 shrink0 color1">当前司机：</div>

                        <div class="color2">宫劲爆</div>

                        <div class="color2">{{ info.driverName }}</div>

                    </div>

                    <div class="flex mt--15">

                        <div class="w--100 shrink0 color1">当前车速：</div>

                        <div class="color2">22km/h</div>

                        <div class="color2">{{ info.speed }}km/h</div>

                    </div>

                    <div class="flex mt--15">

                        <div class="w--100 shrink0 color1">当前位置：</div>

                        <div class="color2">黑龙江哈尔滨市双城区双城镇团结大街441号和兴家园陈根村供电局住宅楼</div>

                        <div class="color2">{{ info.nowAddress }}</div>

                    </div>

                    <div class="flex mt--15">

                    <div v-if="info.imageUrl" class="flex mt--15">

                        <div class="w--100 shrink0 color1">抓拍照片：</div>

                        <el-image style="height: 100px" :src="require('@/assets/logo.png')"

                            :preview-src-list="[require('@/assets/logo.png')]">

                        <el-image style="height: 100px" :src="info.imageUrl" :preview-src-list="[info.imageUrl]">

                        </el-image>

                    </div>

                </div>

@@ -108,46 +124,38 @@
                </div>

                <div class="block pl--15 pr--15 mt--15">

                    <el-timeline>

                        <el-timeline-item color='#0E6EFD' timestamp="2018/4/12" placement="top">

                            <el-card class="pointer">

                                <h4>视频信号遮挡报警</h4>

                                <p class="color1">22km/h</p>

                            </el-card>

                        </el-timeline-item>

                        <el-timeline-item timestamp="2018/4/3" placement="top" color='#0E6EFD'>

                            <el-card class="pointer">

                                <h4>视频信号遮挡报警</h4>

                                <p class="color1">22km/h</p>

                            </el-card>

                        </el-timeline-item>

                        <el-timeline-item color='#0E6EFD' timestamp="2018/4/2" placement="top">

                            <el-card class="pointer">

                                <h4>视频信号遮挡报警</h4>

                                <p class="color1">22km/h</p>

                            </el-card>

                        <el-timeline-item v-for="(item, index) in info.warnList" :key="index" color='#0E6EFD'

                            :timestamp="item.warnTime" placement="top">

                            <div @click="initMap(item)">

                                <el-card class="pointer">

                                    <h4>{{ item.warnType }}</h4>

                                    <p class="color1">{{ item.speed }}km/h</p>

                                </el-card>

                            </div>



                        </el-timeline-item>

                    </el-timeline>

                </div>

                <div class="fixed">

                <div v-if="showWarnDetail" class="fixed">

                    <div class="card">

                        <div class="title fs--18 color2">视频信号遮挡报警</div>

                        <div id="mapContainer"></div>

                        <div class="">

                            <div class="flex mt--15">

                                <div class="w--100 shrink0 color1">司机：</div>

                                <div class="color2">宫劲爆</div>

                                <div class="color2">{{ info.driverName }}</div>

                            </div>

                            <div class="flex mt--15">

                                <div class="w--100 shrink0 color1">车速：</div>

                                <div class="color2">22km/h</div>

                                <div class="color2">{{ activeInfo.speed }}km/h</div>

                            </div>

                            <div class="flex mt--15">

                                <div class="w--100 shrink0 color1">时间：</div>

                                <div class="color2">2024-08-08 14:52:51</div>

                                <div class="color2">{{ activeInfo.warnTime }}</div>

                            </div>

                            <div class="flex mt--15">

                                <div class="w--100 shrink0 color1">地点：</div>

                                <div class="color2">黑龙江哈尔滨市双城区双城镇团结大街441号和兴家园陈根村供电局住宅楼</div>

                                <div class="color2">{{ activeInfo.address }}</div>

                            </div>



                        </div>

@@ -162,57 +170,96 @@
</template>



<script>

import { search } from 'core-js/fn/symbol';

import AMapLoader from "@amap/amap-jsapi-loader";

import { getList, getDetail } from './service'

import moment from 'moment'



export default {

    data() {

        return {

            drawer: true,

            searchForm: {

                date: '',

                type: '',

                level: '',

                name: '',

                companyName: '',

                total: 40,

                page: 1,

            drawer: false,

            queryForm: {

                pageCurr: 1,

                pageSize: 10

            },

            tableData: [],

            listLoading: false,

            list: [],

            total: 0,

            info: {},

            showWarnDetail: false,

            activeInfo: {}

        };

    },

    mounted() {

        this.initMap()



    created() {

        this.fetchData()

    },

    methods: {

        // 初始化地图

        initMap() {

            window._AMapSecurityConfig = {

                securityJsCode: "37ce61ae86efa5ad82b649a277f5097c",

            };

            AMapLoader.load({

                key: "67968c82f27c7e2cb9f40c1a9aa3042b",

                version: "2.0",

                plugins: [

                    "AMap.ToolBar",

                    "AMap.AutoComplete",

                    "AMap.Geocoder",

                    "AMap.MarkerCluster",

                ],

        closeDrawer() {

            this.drawer = false

            this.showWarnDetail = false

        },

        // 查看详情

        viewDetail(row) {

            this.drawer = true

            getDetail({ vehicleNumber: row.vehicleNumber }).then(res => {

                this.info = res

            })

                .then((AMap) => {

                    this.map = new AMap.Map("mapContainer", {

                        center: [105.574542, 30.5061493],

                        zoom: 15,

                    });

        },

        async fetchData() {

            let params = JSON.parse(JSON.stringify(this.queryForm))

            if (params.date) {

                params.startTime = moment(params.date[0]).format('YYYY-MM-DD')

                params.endTime = moment(params.date[1]).format('YYYY-MM-DD')

                delete params.date

            }

            this.listLoading = true

            const { records, total } = await getList(params)

            this.list = records

            this.total = total

            this.listLoading = false

        },

        // 初始化地图

        initMap(row) {

            this.showWarnDetail = true

            this.activeInfo = row

            this.$nextTick(() => {

                window._AMapSecurityConfig = {

                    securityJsCode: "37ce61ae86efa5ad82b649a277f5097c",

                };

                AMapLoader.load({

                    key: "67968c82f27c7e2cb9f40c1a9aa3042b",

                    version: "2.0",

                    plugins: [

                        "AMap.ToolBar",

                        "AMap.AutoComplete",

                        "AMap.Geocoder",

                        "AMap.MarkerCluster",

                    ],

                })

                .catch((e) => {

                    console.log(e);

                });

                    .then((AMap) => {

                        this.map = new AMap.Map("mapContainer", {

                            center: [row.lon, row.lat],

                            zoom: 15,

                        });

                        
                        // 添加标记

                        new AMap.Marker({

                            position: [row.lon, row.lat],

                            map: this.map,

                            title: row.warnType

                        });

                    })

                    .catch((e) => {

                        console.log(e);

                    });

            })

        },

        reset() {

            this.queryForm = {

                pageCurr: 1,

                pageSize: 10

            }

            this.fetchData()

        },

        search() {



@@ -221,10 +268,10 @@


        },

        handleSizeChange(e) {

            this.searchForm.pageSize = e

            this.queryForm.pageSize = e

        },

        handleCurrentChange(e) {

            this.searchForm.page = e

            this.queryForm.page = e

        },

    }

}


 src/view/early-warning/service.js

New file
@@ -0,0 +1,11 @@
import axios from '@/utils/request';

// 获取车辆预警列表数据
export const getList = (params) => {
    return axios.get('/system/warn/getCarWarnList', {params})
}

// 获取车辆预警详情
export const getDetail = (params) => {
    return axios.get('/system/warn/getCarWarnInfo', {params})
}