|
|
@@ -7,7 +7,9 @@
|
|
|
style="margin: 2px 0px;">图片选取</u-button>
|
|
|
<!-- 图片预览 -->
|
|
|
<view class="imgView">
|
|
|
- <image v-if="imageSrc" style="width:150px" :src="imageSrc" mode="widthFix" @click="getPreview">
|
|
|
+ <image class="zoomable" v-if="imageSrc" @touchstart="handleTouchStart"
|
|
|
+ @touchend="handleTouchEnd" style="width:150px" :src="imageSrc" mode="widthFix"
|
|
|
+ @click="getPreview">
|
|
|
</image>
|
|
|
</view>
|
|
|
<view>
|
|
|
@@ -261,12 +263,15 @@ import api from "@/api/api";
|
|
|
import moment from 'moment'
|
|
|
import configService from '@/common/service/config.service.js'
|
|
|
import stringSimilarity from 'string-similarity'
|
|
|
+import Hammer from 'hammerjs';
|
|
|
export default {
|
|
|
name: 'gasFill',
|
|
|
props: {},
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ hammerData: null,//hammer实例
|
|
|
+ scale: 1,//缩放实例
|
|
|
toggleTitle: '全部',
|
|
|
tableData: [],
|
|
|
loading: false,
|
|
|
@@ -336,12 +341,33 @@ export default {
|
|
|
mounted() {
|
|
|
this.getGasList()
|
|
|
this.getSelectList()
|
|
|
+ this.initHammer();
|
|
|
},
|
|
|
methods: {
|
|
|
hasPermission(param) {
|
|
|
let permission = uni.getStorageSync('btnPermission')
|
|
|
return permission.filter(v => v.action == param).length != 0 ? true : false
|
|
|
},
|
|
|
+ //初始化hammer实例
|
|
|
+ initHammer() {
|
|
|
+ const el = this.$refs.zoomable; // 获取图片元素引用
|
|
|
+ this.hammerData = new Hammer(el);
|
|
|
+ this.hammerData.get('pinch').set({ enable: true }); // 启用捏合手势
|
|
|
+ this.hammerData.on('pinch', this.handlePinch);
|
|
|
+ },
|
|
|
+ handlePinch(ev) {
|
|
|
+ this.scale *= ev.scale; // 更新缩放比例
|
|
|
+ this.$refs.zoomable.style.transform = `scale(${this.scale})`; // 应用缩放变换
|
|
|
+ },
|
|
|
+ handleTouchStart(e) {
|
|
|
+ this.hammerData.on('pan', this.handlePan); // 启用平移手势处理函数
|
|
|
+ },
|
|
|
+ handleTouchEnd(e) {
|
|
|
+ this.hammerData.off('pan', this.handlePan); // 移除平移手势处理函数
|
|
|
+ },
|
|
|
+ handlePan(ev) {
|
|
|
+ // 处理平移逻辑（如果需要）
|
|
|
+ },
|
|
|
//全部
|
|
|
getAll(title) {
|
|
|
let that = this
|
|
|
@@ -366,33 +392,71 @@ export default {
|
|
|
//获取图片识别数据
|
|
|
getGasIdentify() {
|
|
|
let that = this
|
|
|
- that.loading = true
|
|
|
- let apiUrlImg = `${configService.apiUrlP.substring(0, configService.apiUrlP.lastIndexOf(':'))}:6006`
|
|
|
- uni.uploadFile({
|
|
|
- url: `${apiUrlImg}/gasIdentify`,
|
|
|
- filePath: that.imageSrcList[0].path,
|
|
|
- name: 'img',
|
|
|
- formData: {
|
|
|
- 'user': that.username,
|
|
|
+ // that.loading = true
|
|
|
+ // let apiUrlImg = `${configService.apiUrlP.substring(0, configService.apiUrlP.lastIndexOf(':'))}:6006`
|
|
|
+ // uni.uploadFile({
|
|
|
+ // url: `${apiUrlImg}/gasIdentify`,
|
|
|
+ // filePath: that.imageSrcList[0].path,
|
|
|
+ // name: 'img',
|
|
|
+ // formData: {
|
|
|
+ // 'user': that.username,
|
|
|
+ // },
|
|
|
+ // success: (res) => {
|
|
|
+ // if (res) {
|
|
|
+ // that.indexList = JSON.parse(res.data).data || []
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '识别成功!',
|
|
|
+ // icon: 'none' // 可选图标，'success', 'loading', 'none'
|
|
|
+ // });
|
|
|
+ // that.loading = false
|
|
|
+ // }
|
|
|
+
|
|
|
+ // },
|
|
|
+ // fail: (errpr) => {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '识别失败!',
|
|
|
+ // icon: 'none' // 可选图标，'success', 'loading', 'none'
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ that.indexList = [
|
|
|
+ {
|
|
|
+ "日期": "2025年3月5日",
|
|
|
+ "班次": "早班",
|
|
|
+ "检查地点": "22106综采工作面设备列车",
|
|
|
+ "检查时间": "2025-04-1 08:00:00",
|
|
|
+ "CH4%": "0.00",
|
|
|
+ "CO2%": "0.04",
|
|
|
+ "O2%": "20.9",
|
|
|
+ "CO(ppm)": "1",
|
|
|
+ "温度(℃)": "17",
|
|
|
+ "检查人": "xxx"
|
|
|
},
|
|
|
- success: (res) => {
|
|
|
- if (res) {
|
|
|
- that.indexList = JSON.parse(res.data).data || []
|
|
|
- uni.showToast({
|
|
|
- title: '识别成功!',
|
|
|
- icon: 'none' // 可选图标，'success', 'loading', 'none'
|
|
|
- });
|
|
|
- that.loading = false
|
|
|
- }
|
|
|
-
|
|
|
+ {
|
|
|
+ "日期": "2025年3月5日",
|
|
|
+ "班次": "早班",
|
|
|
+ "检查地点": "22106综采工作面设备列车",
|
|
|
+ "检查时间": "8:13",
|
|
|
+ "CH4%": "0.00",
|
|
|
+ "CO2%": "0.04",
|
|
|
+ "O2%": "20.9",
|
|
|
+ "CO(ppm)": "1",
|
|
|
+ "温度(℃)": "17",
|
|
|
+ "检查人": "xxx"
|
|
|
},
|
|
|
- fail: (errpr) => {
|
|
|
- uni.showToast({
|
|
|
- title: '识别失败!',
|
|
|
- icon: 'none' // 可选图标，'success', 'loading', 'none'
|
|
|
- });
|
|
|
+ {
|
|
|
+ "日期": "2025年3月5日",
|
|
|
+ "班次": "早班",
|
|
|
+ "检查地点": "22106综采工作面设备列车",
|
|
|
+ "检查时间": "16:15",
|
|
|
+ "CH4%": "0.00",
|
|
|
+ "CO2%": "0.04",
|
|
|
+ "O2%": "20.9",
|
|
|
+ "CO(ppm)": "1",
|
|
|
+ "温度(℃)": "17",
|
|
|
+ "检查人": "xxx"
|
|
|
}
|
|
|
- });
|
|
|
+ ]
|
|
|
},
|
|
|
// 选择图片的方法
|
|
|
chooseImage() {
|
|
|
@@ -2292,6 +2356,14 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+ .zoomable {
|
|
|
+ transition: transform 0.5s;
|
|
|
+ /* 平滑过渡效果 */
|
|
|
+ }
|
|
|
+ .imgView{
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
::v-deep .u-input {
|
