fix

pyt

2025-05-07 6884180edd4961ed293a84e7caaa45537350c9f5

fix

 src/utils/utils.js

@@ -25,14 +25,12 @@


// 导出

export const exportExcell = (name, params, url) => {

  fetch(apiConfig.baseURL + url, {

  const query = new URLSearchParams(params).toString();

  fetch(`${apiConfig.baseURL}${url}?${query}`, {

    method: 'get',

    params: JSON.stringify({

      ...params,

    }),

    headers: {

      Authorization: localStorage.getItem('token'),

      'ConTent-Type': 'application/json;charset=UTF-8',

      'Content-Type': 'application/json;charset=UTF-8',

      timestamp: new Date().getTime(),

      client: localStorage.getItem('client')

    },

@@ -55,4 +53,4 @@
        duration: 2000

      })

    });

};

};

 src/view/early-warning/index.vue

@@ -54,11 +54,51 @@


        </div>



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

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

                @click="exportExc">导出</el-button>

        <!-- 新增统计卡片 -->

        <el-row :gutter="20" class="mt--20 ml--30 mr--30">

            <el-col :span="6">

                <div class="stat-card">

                    <div class="title fs--14 color-grey-6">总预警数</div>

                    <div class="value fs--20 color1 mt--10">

                        {{ totalAll }}

                    </div>

                </div>

            </el-col>

            <el-col :span="6">

                <div class="stat-card">

                    <div class="title fs--14 color-grey-6">已处理数</div>

                    <div class="value fs--20 color1 mt--10">

                        {{ processed }}

                    </div>

                </div>

            </el-col>

            <el-col :span="6">

                <div class="stat-card">

                    <div class="title fs--14 color-grey-6">未处理数</div>

                    <div class="value fs--20 color1 mt--10">

                        {{ unprocessed }}

                    </div>

                </div>

            </el-col>

            <el-col :span="6">

                <div class="stat-card">

                    <div class="title fs--14 color-grey-6">处理进度</div>

                    <div class="value fs--20 color1 mt--10">

                        {{ progress }}%

                    </div>

                </div>

            </el-col>

        </el-row>



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

            <el-button v-permission="11" class="search-button h--40 w--90 fs--14" icon="el-icon-top" type="primary"

                size="small" @click="exportExc">导出</el-button>

        </div>

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

        <el-tabs class="mt--23 " v-model="activeName" type="card" @tab-click="handleClick" style="margin-left: 30px;">

            <el-tab-pane v-for="(item, index) in options" :key="index" :label="item.name"

                :name="item.name"></el-tab-pane>

        </el-tabs>

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

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

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

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

@@ -66,7 +106,7 @@
                <el-table-column prop="vehicleNumber" label="车牌号码" fixed="left"></el-table-column>

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

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

                    <template #default="{ row }" >

                    <template #default="{ row }">

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

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

                    </template>

@@ -96,7 +136,9 @@
            <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 的内联十六进制颜色类 -->

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

@@ -163,21 +205,35 @@
                </div>

            </el-drawer>

        </div>







    </div>

</template>



<script>

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

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

import { getCarType } from '../car-manage/service'

import moment from 'moment'

import { exportExcell } from '@/utils/utils.js'



export default {

    data() {

        return {

            computed: {

                statItems() {

                    return [

                        { label: '总预警数', value: this.totalAll },

                        { label: '已处理数', value: this.processed },

                        { label: '未处理数', value: this.unprocessed },

                        { 
                            label: '处理进度',

                            value: `${this.totalAll > 0 
                                ? ((this.processed / this.totalAll * 100).toFixed(2))

                                : 0}%`

                        }

                    ]

                }

            },

            activeName: '全部',

            drawer: false,

            queryForm: {

                pageCurr: 1,

@@ -188,12 +244,21 @@
            total: 0,

            info: {},

            showWarnDetail: false,

            activeInfo: {}

            activeInfo: {},

            options: [],

            totalAll: 0, // 总预警数

            processed: 0, // 已处理数

            unprocessed: 0, // 未处理数

            progress: 0, // 占比

        };

    },

    created() {

        this.$checkPermission(10)

        this.fetchData()

        getCarType().then(res => {

            let arr = [{ name: '全部' }]

            this.options = [...arr, ...res];

        });

    },

    methods: {

        closeDrawer() {

@@ -207,17 +272,29 @@
                this.info = res

            })

        },

        handleClick(tab, event) {

            this.activeName = tab.name;

            this.fetchData();

        },

        async fetchData() {

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

            params.carType = this.activeName

            if (params.carType === '全部') {

                delete params.carType

            }

            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

            const res = await getList(params)

            this.totalAll = res.total || 0

            this.processed = res.processed || 0

            this.unprocessed = res.unprocessed || 0

            this.progress = res.processed / this.totalAll * 100 //占比

            this.list = res.page.records

            this.total = res.page.total

            this.listLoading = false

        },

        // 初始化地图

@@ -243,7 +320,7 @@
                            center: [row.lon, row.lat],

                            zoom: 15,

                        });

                        


                        // 添加标记

                        new AMap.Marker({

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

@@ -268,12 +345,16 @@
        },

        exportExc() {

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

            params.carType = this.activeName

            if (params.carType === '全部') {

                delete params.carType

            }

            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

            }

            exportExcell('预警列表',params,'/system/warn/exportCarWarnList')

            exportExcell('预警列表', params, '/system/warn/exportCarWarnList')

        },

        handleSizeChange(e) {

            this.queryForm.pageSize = e

@@ -334,4 +415,17 @@
    margin-top: 5px;

    min-width: 100px !important;

}

</style>



<style scoped>

.stat-card {

    background: #f8f9fa;

    border-radius: 4px;

    padding: 16px 20px;

    margin-bottom: 20px;

    text-align: center;

}

.color-grey-6 {

    color: #606266;

}

</style>