Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-ve...

13404089107

2025-03-06 fcd404a0aa879183f3f93cdda3e44dc90fcf245b

Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision

 src/App.vue

@@ -27,9 +27,9 @@
    autofit.init({

      dh: 1080,

      dw: 1920,

      el: "body",

      el: "#app",

      resize: true,

    }, true);

    }, false);

  },

  methods: {




 src/main.js

@@ -16,7 +16,7 @@
/* 全局TableHeight */

Vue.prototype.$baseTableHeight = (formType) => {

  let height = window.innerHeight

  let paddingHeight = 400

  let paddingHeight = 200

  const formHeight = 50



  if ('number' == typeof formType) {


 src/view/complaint/index.vue

@@ -40,7 +40,7 @@
                @click="exportExcell">导出</el-button>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column prop="date" label="序号"></el-table-column>
                <el-table-column prop="name" label="车辆名称"></el-table-column>
                <el-table-column prop="name" label="车牌号码"></el-table-column>
@@ -93,11 +93,6 @@
            },
            tableData: [],
        };
    },
    computed: {
        height() {
            return this.$baseTableHeight()
        },
    },
    methods: {
        reset() {

 src/view/early-warning/index.vue

@@ -1,23 +1,278 @@
<template>

    <div>

        <p>当前路径：{{ $route.path }}</p>

        <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-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>

                    <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>

                    <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>

                    <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"

                            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-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>

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

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

            </div>



        </div>



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

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

                @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-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="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>

            <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">

                </el-pagination>

            </div>

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

                <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>

                <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>

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

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

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

                    </div>

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

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

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

                    </div>

                    <div 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>

                    </div>

                </div>

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

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

                    近15分钟报警

                </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>

                    </el-timeline>

                </div>

                <div 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>

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

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

                                <div class="color2">22km/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>

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

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

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

                            </div>



                        </div>

                    </div>

                </div>

            </el-drawer>

        </div>







    </div>

</template>



<script>

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

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



export default {

    data() {

        return {

            activeIndex: '1',

            activeIndex2: '1'

            drawer: true,

            searchForm: {

                date: '',

                type: '',

                level: '',

                name: '',

                companyName: '',

                total: 40,

                page: 1,

                pageSize: 10

            },

            tableData: [],

        };

    },

    mounted() {

        this.initMap()



    },

    methods: {

        handleSelect(key, keyPath) {

            console.log(key, keyPath);

        }

        // 初始化地图

        initMap() {

            window._AMapSecurityConfig = {

                securityJsCode: "37ce61ae86efa5ad82b649a277f5097c",

            };

            AMapLoader.load({

                key: "67968c82f27c7e2cb9f40c1a9aa3042b",

                version: "2.0",

                plugins: [

                    "AMap.ToolBar",

                    "AMap.AutoComplete",

                    "AMap.Geocoder",

                    "AMap.MarkerCluster",

                ],

            })

                .then((AMap) => {

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

                        center: [105.574542, 30.5061493],

                        zoom: 15,

                    });

                })

                .catch((e) => {

                    console.log(e);

                });

        },

        reset() {

        },

        search() {



        },

        exportExcell() {



        },

        handleSizeChange(e) {

            this.searchForm.pageSize = e

        },

        handleCurrentChange(e) {

            this.searchForm.page = e

        },

    }

}

</script>



<style></style>
<style scoped lang="less">

.color1 {

    color: #0E6EFD;

}



.color2 {

    color: rgb(52, 52, 52);

}



#mapContainer {

    width: 100%;

    height: 500px;

    margin: 20px 0;

}



::v-deep .el-drawer__body {

    position: relative;



    .fixed {

        right: 470px;

        top: 0;

        bottom: 0;

        margin: auto;

        display: flex;

        align-items: center;



        .card {

            background: #fff;

            width: 500px;

            max-height: 1000px;

            padding: 15px;

        }

    }

}



::v-deep .pagination-popper {

    position: fixed !important;

    transform:

        scale(calc(1 / var(--scale))) translate(calc(100px * (1 - 1 / var(--scale))),

            calc(5px * (1 - 1 / var(--scale)))) !important;

    transform-origin: right top !important;

    right: calc(30px * (1 - 1 / var(--scale))) !important;

    margin-top: 5px;

    min-width: 100px !important;

}

</style>