src/assets/icons/coordinate.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/images/screen/button.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/images/screen/button1.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/images/screen/pageBg2.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/screen/components/screen-map-three/experience/camera.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/screen/components/screen-map-three/experience/world/map.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/screen/components/screen-map/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/screen/components/select-item/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/screen/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/system/work-order/threshold/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/assets/icons/coordinate.png
src/assets/images/screen/button.png
src/assets/images/screen/button1.png
src/assets/images/screen/pageBg2.png
src/views/screen/components/screen-map-three/experience/camera.js
@@ -16,7 +16,7 @@ // 设置透视相机 setInstance() { this.instance = new PerspectiveCamera(45, this.sizes.width / this.sizes.height, 0.1, 200); this.instance.position.set(0, 45, 45); this.instance.position.set(0, 37, 37); this.scene.add(this.instance); // const help = new CameraHelper(this.instance); // this.scene.add(help); src/views/screen/components/screen-map-three/experience/world/map.js
@@ -1,17 +1,20 @@ import * as THREE from 'three'; import * as d3 from 'd3'; import mapData from '@/assets/map/zigong2.json'; import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'; import * as THREE from "three"; import * as d3 from "d3"; import mapData from "@/assets/map/zigong2.json"; import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer"; import textureMapImage from '@/assets/map/texture/gz-map.jpg'; import textureMapFxImage from '@/assets/map/texture/gz-map-fx.jpg'; import textureMapImage from "@/assets/map/texture/gz-map.jpg"; import textureMapFxImage from "@/assets/map/texture/gz-map-fx.jpg"; import gsap from 'gsap'; import gsap from "gsap"; // 地图深度 const MAP_DEPTH = 0.2; const projection = d3.geoMercator().center([104.779307, 29.33924]).translate([0, 0, 0]); const projection = d3 .geoMercator() .center([104.779307, 29.33924]) .translate([0, 0, 0]); const raycaster = new THREE.Raycaster(); @@ -101,7 +104,11 @@ }); this.map.position.set(1, 1, -1.5); this.map.scale.set(10, 10, 1); this.map.rotation.set(THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20)); this.map.rotation.set( THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20) ); this.scene.add(this.map); this.setMouseEvent(); @@ -149,28 +156,32 @@ bevelSegments: 1, bevelThickness: 0.1, }); return new THREE.Mesh(geometry, [ this.topFaceMaterial, this.sideMaterial, ]); return new THREE.Mesh(geometry, [this.topFaceMaterial, this.sideMaterial]); } drawLabelText(province) { const [x, y] = projection(province.properties.center); const div = document.createElement('div'); const div = document.createElement("div"); // const icon = document.createElement("div"); div.innerHTML = province.properties.name; div.style.padding = '4px 10px'; div.style.color = '#fff'; div.style.fontSize = '16px'; div.style.position = 'absolute'; div.style.backgroundColor = 'rgba(25,25,25,0.5)'; div.style.borderRadius = '5px'; div.style.padding = "4px 10px"; div.style.color = "#fff"; div.style.fontSize = "18px"; div.style.position = "absolute"; // div.style.display = "flex"; // div.style.justifyContent = 'center' // div.style.backgroundColor = 'rgba(25,25,25,0.5)'; // div.style.border = '5px'; // icon.style.borderRadius = '100%' // icon.style.background = '#aaffa5' // icon.style.width = '10px' // icon.style.height = '10px' // div.appendChild(icon); const label = new CSS2DObject(div); div.style.pointerEvents = 'none'; div.style.pointerEvents = "none"; label.position.set(x, y, MAP_DEPTH + 0.05); return label; } setMouseEvent() { this.mouseEvent = this.handleEvent.bind(this); @@ -186,9 +197,20 @@ // return; if (this.map) { let mouse = new THREE.Vector2(); let getBoundingClientRect = this.experience.canvas.getBoundingClientRect(); let x = ((e.clientX - getBoundingClientRect.left) / getBoundingClientRect.width) * 2 - 1; let y = -((e.clientY - getBoundingClientRect.top) / getBoundingClientRect.height) * 2 + 1; let getBoundingClientRect = this.experience.canvas.getBoundingClientRect(); let x = ((e.clientX - getBoundingClientRect.left) / getBoundingClientRect.width) * 2 - 1; let y = -( (e.clientY - getBoundingClientRect.top) / getBoundingClientRect.height ) * 2 + 1; mouse.x = x; mouse.y = y; @@ -225,17 +247,16 @@ if (item.properties === province.properties) { gsap.to(province.position, { z: 0.12, duration: 0.6 }) duration: 0.6, }); } else { this.resetAnimation(item); } }) }); } } else { this.resetAllAnimation(); } } resetAnimation(province) { @@ -244,14 +265,14 @@ duration: 0.6, onComplete: () => { province.isHover = false; } }) }, }); } resetAllAnimation() { this.map.children.forEach((item) => { this.resetAnimation(item); }) }); } showLabel(province) { @@ -261,15 +282,15 @@ // } else { // item.label.element.style.visibility = 'hidden'; // } }) }); } enterAnimation() { gsap.to(this.map.scale, { z: 10, duration: 0.6, ease: 'power1.out' }) ease: "power1.out", }); } destroy() { src/views/screen/components/screen-map/index.vue
@@ -2,7 +2,6 @@ <div class="map-container"> <wrapper-title :title="'区域地图'"></wrapper-title> <div class="map-content"> <div ref="map" class="map-style"></div> </div> </div> src/views/screen/components/select-item/index.vue
@@ -1,14 +1,14 @@ <template> <div class="select-container"> <div class="tabs-box"> <el-button v-for="item in testData1" class="transparent-button">{{ item.name }} </el-button> <!-- <el-tabs v-model="activeName" @tab-click="handleClick"> <!-- <el-button v-for="item in testData1" class="transparent-button">{{ item.name }} </el-button> --> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="item in testData1" :label="item.name" :name="item.value" ></el-tab-pane> </el-tabs> --> </el-tabs> <!-- <div> <el-button> @@ -127,7 +127,7 @@ <style lang="scss" scoped> .select-container { position: absolute; top: 10px; top: 0px; left: 20px; display: flex; align-items: center; @@ -165,15 +165,18 @@ display: flex; align-items: center; width: 320px; margin-top: -15px } } ::v-deep .tabs-box { margin-top: 5px; width: 40%; .el-tabs__item { color: #ffffff !important; } .is-active { color: #4481dd !important; color: #61aef7 !important; background: url('../../../../assets/images/screen/button1.png');; } } ::v-deep .el-input__inner { @@ -189,10 +192,25 @@ ::v-deep .date-select .el-date-editor .el-range-separator { color: #4481dd !important; } .transparent-button { background-color: transparent; border-color: #23f0ed; color: #0d6adb; /* 这里设置按钮文字颜色 */ // .transparent-button { // background-color: transparent; // border-color: #23f0ed; // color: #b944dd; /* 这里设置按钮文字颜色 */ // } /* 去掉tabs标签栏下的下划线 */ ::v-deep .el-tabs__nav-wrap::after { position: static !important; /* background-color: #fff; */ } /* 下划线切换高亮 */ ::v-deep .el-tabs__active-bar { background-color: #4481DD; } ::v-deep .el-tabs__item{ margin: 5px 30px; padding: 0px 25px !important; border-radius: 5px; background: url('../../../../assets/images/screen/button.png'); } </style> src/views/screen/index.vue
@@ -35,7 +35,7 @@ -webkit-user-select: none; } .screen { //background: url('../../assets/images/screen/pageBg1.jpg') !important; background: url('../../assets/images/screen/pageBg1.jpg') !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; src/views/system/work-order/threshold/index.vue
@@ -283,339 +283,6 @@ </el-card></el-col > </el-row> <!-- 人脸阈值 --> <el-dialog title="修改人脸工单阈值" :visible.sync="faceOpen" width="700px" append-to-body > <el-form ref="faceForm" :model="faceForm" label-width="150px" :inline="true" > <el-form-item class="fixedWidth" label="抓拍量" prop="captureNum"> <el-input clearable size="small" v-model="faceForm.captureNum" placeholder="工单阈值" /> <el-input clearable size="small" v-model="faceForm.captureNumAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="过车缺失率" prop="timelyRate"> <el-input clearable size="small" v-model="faceForm.timelyRate" placeholder="工单阈值" /> <el-input clearable size="small" v-model="faceForm.timelyRateAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="延迟量" prop="delayAmount"> <el-input clearable size="small" v-model="faceForm.delayAmount" placeholder="工单阈值" /> <el-input clearable size="small" v-model="faceForm.delayAmountAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="设备活跃率" prop="deviceActiveRate" > <el-input clearable size="small" v-model="faceForm.deviceActiveRate" placeholder="工单阈值" /> <el-input clearable size="small" v-model="faceForm.deviceActiveRateAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="抓拍及时率" prop="timelyCapture" > <el-input clearable size="small" v-model="faceForm.timelyCapture" placeholder="工单阈值" /> <el-input clearable size="small" v-model="faceForm.timelyCaptureAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="时钟准确率" prop="deviceActiveRate" > <el-input clearable size="small" v-model="faceForm.timeAccuracy" placeholder="工单阈值" /> <el-input clearable size="small" v-model="faceForm.timeAccuracyAuto" placeholder="下发阈值" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="editFace">确 定</el-button> <el-button @click="cancelFace">取 消</el-button> </div> </el-dialog> <!-- 车辆阈值 --> <el-dialog title="修改车辆工单阈值" :visible.sync="carOpen" width="700px" append-to-body > <el-form ref="faceForm" :model="faceForm" label-width="150px" :inline="true" > <el-form-item class="fixedWidth" label="过车数据量" prop="passCarNum"> <el-input clearable size="small" v-model="carForm.passCarNum" placeholder="工单阈值" /> <el-input clearable size="small" v-model="carForm.passCarNumAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="过车缺失率" prop="passCarMissRate" > <el-input clearable size="small" v-model="carForm.passCarMissRate" placeholder="工单阈值" /> <el-input clearable size="small" v-model="carForm.passCarMissRateAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="有效过车数据量" prop="passCarEffectiveNum" > <el-input clearable size="small" v-model="carForm.passCarEffectiveNum" placeholder="工单阈值" /> <el-input clearable size="small" v-model="carForm.passCarEffectiveNumAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="设备活跃率" prop="deviceActiveRate" > <el-input clearable size="small" v-model="carForm.deviceActiveRate" placeholder="工单阈值" /> <el-input clearable size="small" v-model="carForm.deviceActiveRateAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="抓拍及时率" prop="timelyCapture" > <el-input clearable size="small" v-model="carForm.timelyCapture" placeholder="工单阈值" /> <el-input clearable size="small" v-model="carForm.timelyCaptureAuto" placeholder="下发阈值" /> </el-form-item> <el-form-item class="fixedWidth" label="时钟准确率" prop="timeAccuracy"> <el-input clearable size="small" v-model="carForm.timeAccuracy" placeholder="工单阈值" /> <el-input clearable size="small" v-model="carForm.timeAccuracyAuto" placeholder="下发阈值" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="editCar">确 定</el-button> <el-button @click="cancelCar">取 消</el-button> </div> </el-dialog> <!-- 视频阈值 --> <el-dialog title="修改视频工单阈值" :visible.sync="videoOpen" width="700px" append-to-body > <el-form ref="videoForm" :model="videoForm" label-width="100px" :inline="true" > <el-form-item class="fixedWidth" label="图像质量" prop="imageQuality" label-width="100px" > <el-select v-model="videoForm.imageQuality" placeholder="工单阈值" @change="handleModeNameChange" > <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.image_qualify" /> </el-select> <el-select v-model="videoForm.imageQualityAuto" placeholder="下发阈值" @change="handleModeNameChange" > <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.image_qualify" /> </el-select> </el-form-item> <el-form-item class="fixedWidth" label="视频质量" prop="videoQuality" label-width="100px" > <el-select v-model="videoForm.videoQuality" placeholder="工单阈值" @change="handleModeNameChange" > <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.video_qualify" /> </el-select> <el-select v-model="videoForm.videoQualityAuto" placeholder="下发阈值" @change="handleModeNameChange" > <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.video_qualify" /> </el-select> </el-form-item> <el-form-item class="fixedWidth" label="标注准确率" prop="annotationAccuracy" label-width="100px" > <el-input v-model="videoForm.annotationAccuracy" type="number" size="small" placeholder="工单阈值" ></el-input> <el-input v-model="videoForm.annotationAccuracy" type="number" size="small" placeholder="下发阈值" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="editVideo">确 定</el-button> <el-button @click="cancelVideo">取 消</el-button> </div> </el-dialog> </div> </template> @@ -906,28 +573,28 @@ this.resetForm("carForm"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, // handleQuery() { // this.queryParams.pageNum = 1; // this.getList(); // }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // resetQuery() { // this.resetForm("queryForm"); // this.handleQuery(); // }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map((item) => item.id); this.single = selection.length !== 1; this.multiple = !selection.length; }, // handleSelectionChange(selection) { // this.ids = selection.map((item) => item.id); // this.single = selection.length !== 1; // this.multiple = !selection.length; // }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = "添加运维阈值"; this.handleModeNameChange(); }, // handleAdd() { // this.reset(); // this.open = true; // this.title = "添加运维阈值"; // this.handleModeNameChange(); // }, /** 修改按钮操作 */ updateWho(row) { if (row.monitorType === "face") {