From b991b10d642cb010078a2af00d54e8a0a6d2e3fa Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Mon, 26 Aug 2024 10:43:21 +0800
Subject: [PATCH] =?UTF-8?q?flx=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=BD=A6?=
 =?UTF-8?q?=E8=BE=86=E8=BF=9D=E8=A7=84=E6=A3=80=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../carManage/violationDetection.vue          | 449 ++++++++++++++++++
 1 file changed, 449 insertions(+)
 create mode 100644 src/views/projectFront/carManage/violationDetection.vue

diff --git a/src/views/projectFront/carManage/violationDetection.vue b/src/views/projectFront/carManage/violationDetection.vue
new file mode 100644
index 00000000..49c1ba57
--- /dev/null
+++ b/src/views/projectFront/carManage/violationDetection.vue
@@ -0,0 +1,449 @@
+<template>
+    <div class="fullHeight">
+        <div class="searchBox whiteBlock">
+            <el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
+                <el-form-item label="编制人" prop="preparerName">
+                    <el-input v-model="searchForm.preparerName" :placeholder="$t('message.personnelPosition.please_enter')"
+                        clearable></el-input>
+                </el-form-item>
+
+                <!-- <el-form-item label="" prop="exampleProjectName">
+                    <el-radio-group v-model="searchForm.exampleProjectName">
+                        <el-radio :label="1">动态风险</el-radio>
+                        <el-radio :label="2">静态风险</el-radio>
+                    </el-radio-group>
+                </el-form-item> -->
+                <el-form-item>
+                    <!-- v-permission="{key: 'renovate', menuPath: '/project/constructionManage/deviceManage'}" -->
+                    <el-button type="primary" plain @click="loadCardData">
+                        {{ $t("message.personnelPosition.beaconManage.query") }}
+                    </el-button>
+                    <el-button type="warning" plain @click="resetForm">
+                        {{ $t("message.personnelPosition.beaconManage.refresh") }}
+                    </el-button>
+                    <!-- <el-button type="primary" @click="isAddPoint(1)"> 新增 </el-button> -->
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="table_wrap whiteBlock">
+            <el-table class="tables" :data="pointList">
+                <el-table-column type="index" width="50" align="center"
+                    :label="$t('message.personnelPosition.beaconManage.table.index')"></el-table-column>
+                <el-table-column prop="licensePlateNumber" label="车牌号" align="center">
+                    <template slot-scope="scope">
+                        {{ scope.row.licensePlateNumber }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="entryAndExitTime" label="进出时间" align="center"></el-table-column>
+                <el-table-column prop="vehicleSpeed" label="车辆速度" align="center">
+                    <template slot-scope="scope">
+                        {{ scope.row.vehicleSpeed }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="captureLocation" label="抓拍位置" align="center">
+                    <template slot-scope="scope">
+                        {{ scope.row.captureLocation }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="capturedImage" label="抓拍图片" align="center">
+                    <template slot-scope="scope">
+                        <div class="download" @click="downloadFn(item)" v-for="item in scope.row.capturedImage"
+                            :key="item.uid">{{ item.name }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('message.personnelPosition.beaconManage.table.operation')" align="center"
+                    width="250">
+                    <template slot-scope="scope">
+                        <div class="tableBtns">
+                            <!-- <div @click="isAddPoint(2, scope.row)" class="operationText">
+                                <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
+                                <span>{{
+                                    $t("message.personnelPosition.beaconManage.table.edit")
+                                }}</span>
+                            </div> -->
+                            <div @click="removePoint(scope.row)" class="operationText">
+                                <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
+                                <span>{{
+                                    $t("message.personnelPosition.beaconManage.table.delete")
+                                }}</span>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <!-- <div slot="empty">{{$t('message.personnelPosition.empty')}}</div> -->
+            </el-table>
+            <el-pagination class="pagerBox" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :current-page="pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next" :total="Number(total)" background></el-pagination>
+        </div>
+        <!-- 添加卡片弹框 -->
+        <el-dialog :destroy-on-close="true" :modal-append-to-body="false" :title="cardDialogTitle"
+            :visible.sync="cardDialog" width="667px" :before-close="handleClose">
+            <div class="dialog_content">
+                <el-form size="medium" :model="cardForm" ref="cardForm" :rules="cardFormRules" label-width="125px"
+                    class="dialogFormBox">
+                    <el-form-item label="车牌号" prop="licensePlateNumber">
+                        <el-input v-model="cardForm.licensePlateNumber"
+                            :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
+                    </el-form-item>
+                    <el-form-item label="进出时间" prop="entryAndExitTime">
+                        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="cardForm.entryAndExitTime"
+                            type="datetime" placeholder="选择日期">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="车辆速度" prop="vehicleSpeed">
+                        <el-input v-model="cardForm.vehicleSpeed"
+                            :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
+                    </el-form-item>
+                    <el-form-item label="抓拍位置" prop="captureLocation">
+                        <el-input v-model="cardForm.captureLocation"
+                            :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
+                    </el-form-item>
+                    <el-form-item label="抓拍图片" prop="capturedImage">
+                        <el-upload class="upload-demo" name="files" :action="$store.state.UPLOADURL"
+                            :on-remove="(file, fileList) => handleRemove(file, fileList, 1)" :multiple="false"
+                            :on-success="(res, file) => handleSuccess(res, file, 1)" :file-list="cardForm.capturedImage"
+                            accept=".png,.jpg,.jpeg">
+                            <!-- .doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf -->
+                            <el-button type="primary"> 上传附件 </el-button>
+                        </el-upload>
+                    </el-form-item>
+                    <div class="dialog-footer">
+                        <el-button class="cancleBtn" @click="handleClose" icon="el-icon-circle-close" size="medium">{{
+                            $t("message.personnelPosition.cancel") }}
+                        </el-button>
+                        <el-button type="primary" icon="el-icon-circle-check" @click="saveCardFn" size="medium">{{
+                            $t("message.personnelPosition.determine") }}
+                        </el-button>
+                    </div>
+                </el-form>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import {
+    getDeviceUnitPage,
+    getProjectGroupPage,
+} from "@/assets/js/api/project";
+import {
+    getVehicleViolationInfo,
+    addVehicleViolationInfo,
+    editVehicleViolationInfo,
+    deleteVehicleViolationInfo,
+} from "@/assets/js/api/carManage";
+import { getProjectChilderSystemUserListApi } from '@/assets/js/api/laborPerson.js'
+import { isJSON } from "@/util/nowDate/index";
+export default {
+    data() {
+        return {
+            searchForm: {
+                preparerName: "",
+                exampleProjectName: "",
+            },
+            pointList: [],
+            total: 0,
+            pageNo: 1,
+            pageSize: 10,
+            cardDialogTitle: "",
+            cardDialog: false,
+            cardForm: {},
+            contractingTypeList: [{
+                id: 1,
+                contractingName: "EPC",
+            }, {
+                id: 2,
+                contractingName: "E+P+C",
+            }], // 承包方式
+            technicalOperationList: [{
+                id: 1,
+                operationName: "土建",
+            }, {
+                id: 2,
+                operationName: "动设备",
+            }, {
+                id: 3,
+                operationName: "静设备",
+            }, {
+                id: 4,
+                operationName: "管道",
+            }, {
+                id: 5,
+                operationName: "电气",
+            }, {
+                id: 6,
+                operationName: "仪表",
+            }, {
+                id: 7,
+                operationName: "其它",
+            }], // 技术操作
+            cardFormRules: {
+                licensePlateNumber: [
+                    {
+                        required: true,
+                        message: this.$t("message.personnelPosition.required"),
+                        trigger: "blur",
+                    },
+                ],
+                entryAndExitTime: [
+                    {
+                        required: true,
+                        message: this.$t("message.personnelPosition.mandatory"),
+                        trigger: "change",
+                    },
+                ],
+            },
+            isAdd: -1,
+            deviceUnitList: [], // 设备信息
+            enterpriseTypeList: [], // 项目组
+            cooperatorList: [], // 所有企业信息
+            projectGroupUnitList: [], // 项目组下的所有承包商
+            supervisingUnitList: [], // 当前项目组下的监理单位
+            epcContractorList: [], // 当前项目组下的承包商
+            constructionUnitList: [], // 当前epc承包商下的施工承包商
+            initialFlag: true, // 初始化标识首次进入
+            workerListOptions: [], // 人员列表
+        };
+    },
+    created() {
+        this.initData();
+        this.projectGroupListFn();
+        this.getDutyPerson();
+    },
+    mounted() {
+        this.loadList();
+        this.loadCardData();
+    },
+    methods: {
+        // 删除文件
+        handleRemove(file, fileList, type) {
+            const fileTypeMap = {
+                1: 'capturedImage',
+            };
+            const key = fileTypeMap[type];
+            if (key) {
+                this.cardForm[key] = fileList;
+            }
+        },
+        handleSuccess(res, file, type) {
+            if (res.status == "SUCCESS") {
+                const fileTypeMap = {
+                    1: 'capturedImage',
+                };
+                const key = fileTypeMap[type];
+                if (key) {
+                    this.cardForm[key].push({
+                        name: file.name,
+                        url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
+                    });
+                }
+            }
+        },
+        // 初始化
+        initData() {
+            this.cardForm = {
+                licensePlateNumber: "",
+                entryAndExitTime: "",
+                vehicleSpeed: "",
+                captureLocation: "",
+                capturedImage: [],
+                projectSn: this.$store.state.projectSn,
+            };
+        },
+        isAddPoint(type, item) {
+            this.isAdd = type;
+            this.initialFlag = true;
+            if (type == 1) {
+                this.initData();
+                this.$nextTick(() => {
+                    this.$refs["cardForm"] && this.$refs["cardForm"].resetFields();
+                });
+                this.cardDialogTitle = this.$t("message.laborDev.add2");
+            } else if (type == 2) {
+                this.cardDialogTitle = this.$t("message.laborDev.btn_edit"); //编辑卡片
+                console.log(item);
+                this.cardForm = {
+                    ...item,
+                    capturedImage: item.capturedImage.map(ele => ele),
+                };
+            }
+
+            this.cardDialog = true;
+        },
+        removePoint(item) {
+            this.$confirm(
+                this.$t("message.personnelPosition.beaconManage.table.confirmText") +
+                "【" +
+                item.licensePlateNumber +
+                "】?",
+                this.$t("message.personnelPosition.beaconManage.table.Tips"),
+                {
+                    type: "warning",
+                }
+            ).then(() => {
+                deleteVehicleViolationInfo({ id: item.id }).then((res) => {
+                    this.loadCardData();
+                    this.$message.success(
+                        this.$t("message.personnelPosition.delete_success")
+                    ); //删除成功!
+                });
+            });
+        },
+        loadList() {
+            let param = {
+                projectSn: this.$store.state.projectSn,
+                pageNo: 1,
+                pageSize: -1,
+            };
+            getDeviceUnitPage(param).then((res) => {
+                this.deviceUnitList = res.result.records;
+            });
+        },
+        //获取卡片列表
+        loadCardData() {
+            getVehicleViolationInfo({
+                projectSn: this.$store.state.projectSn,
+                pageNo: this.pageNo,
+                pageSize: this.pageSize,
+                preparerName: this.searchForm.preparerName,
+                exampleProjectName: this.searchForm.exampleProjectName,
+            }).then((res) => {
+                this.pointList = res.result.records.map(item => {
+                    return {
+                        ...item,
+                        capturedImage: isJSON(item.capturedImage) && item.capturedImage != null ? JSON.parse(item.capturedImage) : [],
+                    }
+                });
+                this.total = res.result.total;
+            });
+        },
+        //添加或编辑卡片
+        saveCardFn() {
+            this.$refs["cardForm"].validate((valid) => {
+                if (valid) {
+                    const result = {
+                        ...this.cardForm,
+                        capturedImage: JSON.stringify(this.cardForm.capturedImage),
+                    }
+                    console.log(result);
+                    if (this.isAdd == 1) {
+                        // this.cardForm.floorId = this.currentFloorDetail.floorId
+                        addVehicleViolationInfo(result).then((res) => {
+                            this.cardDialog = false;
+                            this.initData();
+                            this.loadCardData();
+                            this.$message.success(
+                                this.$t("message.personnelPosition.add_success")
+                            ); //添加成功！
+                        });
+                    } else if (this.isAdd == 2) {
+                        editVehicleViolationInfo(result).then((res) => {
+                            this.cardDialog = false;
+                            this.initData();
+                            this.loadCardData();
+                            this.$message.success(
+                                this.$t("message.personnelPosition.edit_success")
+                            ); //编辑成功！
+                        });
+                    }
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        downloadFn(row) {
+            // "http://42.180.188.17:11211/image/669b96b66b90a34a1aa4ec9c.jpg"
+            fetch(row.url).then((response) => {
+                // 处理响应
+                if (!response.ok) {
+                    throw new Error("导出失败");
+                }
+                return response.blob();
+            }).then((blob) => {
+                console.log("导出成功");
+                // 创建一个下载链接
+                const url = window.URL.createObjectURL(blob);
+                // 创建一个<a>元素
+                const link = document.createElement("a");
+                link.href = url;
+                link.download = row.name; // 指定下载文件的文件名
+                // 模拟点击下载链接
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                // 释放URL对象
+                window.URL.revokeObjectURL(url);
+            }).catch((error) => {
+                // 处理错误
+                console.error(error);
+            });
+        },
+        resetForm() {
+            this.$refs["searchForm"].resetFields();
+            this.loadCardData();
+        },
+        //查询选择人员下拉
+        getDutyPerson() {
+            let data = {
+                projectSn: this.$store.state.projectSn,
+                isFilterQualityRegionEnterprise: 1
+            }
+            getProjectChilderSystemUserListApi(data).then(res => {
+                if (res.code == 200) {
+                    this.workerListOptions = res.result;
+                    console.log('获取施工人员下拉', this.workerListOptions)
+                } else {
+                    this.$message.error(res.message)
+                }
+            })
+        },
+        //查看条数
+        handleSizeChange(val) {
+            this.pageSize = val;
+            this.loadCardData();
+        },
+        //查看页
+        handleCurrentChange(val) {
+            this.pageNo = val;
+            this.loadCardData();
+        },
+        // 关闭前执行
+        handleClose(done) {
+            this.initData();
+            this.$refs["cardForm"].resetFields();
+
+            if (done && typeof done === "function") {
+                done();
+            } else {
+                this.cardDialog = false;
+            }
+        },
+        //获取监理单位
+        projectGroupListFn() {
+            getProjectGroupPage({
+                projectSn: this.$store.state.projectSn,
+                pageNo: 1,
+                pageSize: -1,
+            }).then((res) => {
+                this.enterpriseTypeList = res.result.records;
+            });
+        },
+    },
+    computed: {
+        computedName() {
+            return (dataList, id, name) => {
+                const find = dataList.find((item) => item.id == id);
+                return find ? find[name] : "";
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.download {
+    color: #1684FC;
+    cursor: pointer;
+}
+</style>
+  
\ No newline at end of file