联调app
This commit is contained in:
guanj
@@ -13,6 +13,9 @@ export default {
|
||||
store: {
|
||||
type: [Object],
|
||||
},
|
||||
filterValue: {
|
||||
type: [String],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -52,9 +55,10 @@ export default {
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
minInterval: 20,
|
||||
position: 'top',
|
||||
rotate: 90,
|
||||
max: 140,
|
||||
axisLabel: {
|
||||
rotate: -90,
|
||||
},
|
||||
@@ -103,6 +107,7 @@ export default {
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
data: [],
|
||||
maxXAxis: 140,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -129,6 +134,7 @@ export default {
|
||||
this.pointF = []
|
||||
this.pointFun = []
|
||||
var total = 0
|
||||
let dataList = [0]
|
||||
total = this.data.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
@@ -137,7 +143,7 @@ export default {
|
||||
var xx = this.data[i].evtParamTm.replace(/s/g, '')
|
||||
var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
|
||||
var time = this.data[i].startTime.replace('T', ' ')
|
||||
|
||||
dataList.push(yy)
|
||||
point = [yy, xx, time, this.data[i]]
|
||||
|
||||
if (xx < 0.05) {
|
||||
@@ -191,6 +197,20 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.option.xAxis.max = Math.max(
|
||||
140,
|
||||
Math.ceil(
|
||||
Math.max(
|
||||
...dataList
|
||||
.filter((item) => {
|
||||
return item !== '-' && !isNaN(Number(item))
|
||||
})
|
||||
.map((item) => Number(item)),
|
||||
) / 10,
|
||||
) * 10,
|
||||
) //this.maxXAxis
|
||||
|
||||
this.option.series[1].data = this.pointF
|
||||
this.option.series[2].data = this.pointFun
|
||||
|
||||
@@ -204,7 +224,6 @@ export default {
|
||||
bindChartClickEvent() {
|
||||
if (!this.echartRef) return
|
||||
this.echartRef.on('click', (params) => {
|
||||
console.log('🚀 ~ params:', params.value[3])
|
||||
// 点击查看详情
|
||||
let item = params.value[3]
|
||||
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||
@@ -219,12 +238,20 @@ export default {
|
||||
store: {
|
||||
handler(val, oldVal) {
|
||||
this.status = val.status
|
||||
this.data = val.data
|
||||
this.data = (val.data || []).filter((k) =>
|
||||
this.filterValue == '' ? k : k.showName == this.filterValue,
|
||||
)
|
||||
this.gongfunction()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
filterValue: {
|
||||
handler(val, oldVal) {
|
||||
this.data = (this.store.data || []).filter((k) => (val == '' ? k : k.showName == val))
|
||||
this.gongfunction()
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,6 +13,9 @@ export default {
|
||||
store: {
|
||||
type: [Object],
|
||||
},
|
||||
filterValue: {
|
||||
type: [String],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -35,7 +38,7 @@ export default {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 8,
|
||||
padding: [5, 5 ,5 ,10],
|
||||
padding: [5, 5, 5, 10],
|
||||
},
|
||||
|
||||
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
|
||||
@@ -141,108 +144,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// gongfunction() {
|
||||
// var standI = 0
|
||||
// var unstandI = 0
|
||||
// this.pointI = []
|
||||
// this.pointIun = []
|
||||
// var total = 0
|
||||
// total = this.data.length
|
||||
// if (total == 0) {
|
||||
// } else {
|
||||
// for (var i = 0; i < this.data.length; i++) {
|
||||
// var point = []
|
||||
// var xx = this.data[i].evtParamTm.replace(/s/g, '')
|
||||
// var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
|
||||
// var time = this.data[i].startTime.replace('T', ' ')
|
||||
|
||||
// point = [yy, xx, time, this.data[i]]
|
||||
|
||||
// if (xx <= 0.003) {
|
||||
// var line = 0
|
||||
// line = 230 - 30000 * xx
|
||||
// if (yy > line) {
|
||||
// unstandI++
|
||||
// this.pointIun.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'red' } },
|
||||
// })
|
||||
// } else {
|
||||
// standI++
|
||||
// this.pointI.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'green' } },
|
||||
// })
|
||||
// }
|
||||
// } else if (xx <= 0.02) {
|
||||
// if (yy > 120) {
|
||||
// unstandI++
|
||||
// this.pointIun.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'red' } },
|
||||
// })
|
||||
// } else {
|
||||
// standI++
|
||||
// this.pointI.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'green' } },
|
||||
// })
|
||||
// }
|
||||
// } else if (xx <= 0.5) {
|
||||
// if (yy > 120 || yy < 70) {
|
||||
// unstandI++
|
||||
// this.pointIun.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'red' } },
|
||||
// })
|
||||
// } else {
|
||||
// standI++
|
||||
// this.pointI.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'green' } },
|
||||
// })
|
||||
// }
|
||||
// } else if (xx <= 10) {
|
||||
// if (yy > 110 || yy < 80) {
|
||||
// unstandI++
|
||||
// this.pointIun.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'red' } },
|
||||
// })
|
||||
// } else {
|
||||
// standI++
|
||||
// this.pointI.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'green' } },
|
||||
// })
|
||||
// }
|
||||
// } else {
|
||||
// if (yy > 110 || yy < 90) {
|
||||
// unstandI++
|
||||
// this.pointIun.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'red' } },
|
||||
// })
|
||||
// } else {
|
||||
// standI++
|
||||
// this.pointI.push({
|
||||
// value: point,
|
||||
// itemStyle: { normal: { color: 'green' } },
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// this.option.series[2].data = this.pointI
|
||||
// this.option.series[3].data = this.pointIun
|
||||
|
||||
// if (this.echartRef) {
|
||||
// this.echartRef.setOption(this.option, true)
|
||||
// } else {
|
||||
// this.initChart()
|
||||
// }
|
||||
// },
|
||||
|
||||
gongfunction() {
|
||||
// 初始化计数与数据数组
|
||||
let normalCount = 0
|
||||
@@ -329,12 +230,20 @@ export default {
|
||||
store: {
|
||||
handler(val, oldVal) {
|
||||
this.status = val.status
|
||||
this.data = val.data
|
||||
this.data = (val.data || []).filter((k) =>
|
||||
this.filterValue == '' ? k : k.showName == this.filterValue,
|
||||
)
|
||||
this.gongfunction()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
filterValue: {
|
||||
handler(val, oldVal) {
|
||||
this.data = (this.store.data || []).filter((k) => (val == '' ? k : k.showName == val))
|
||||
this.gongfunction()
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
<!-- <view class="detail-content-title mb20">发生时间</view> -->
|
||||
<view>{{ detail.date }}</view>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="detail-content-title mb20">终端告警列表</view>
|
||||
<view class="detail-content" style="padding: 0px">
|
||||
<view class="detail-content-title mb20 pt20 pl20">终端告警列表</view>
|
||||
|
||||
<uni-collapse accordion>
|
||||
<!-- <uni-collapse accordion v-model="collapseValue">
|
||||
<uni-collapse-item :title="item.devName" v-for="item in list">
|
||||
<template v-slot:title>
|
||||
<view class="collapseTop">
|
||||
@@ -27,7 +27,6 @@
|
||||
<view class="mb10 ml12 frequency">
|
||||
<view>工程名称：{{ item.engineeringName }}</view></view
|
||||
>
|
||||
|
||||
<view class="mb10 ml12 frequency">
|
||||
<view>通讯信息：</view>
|
||||
<view style="flex: 1">
|
||||
@@ -50,7 +49,61 @@
|
||||
>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</uni-collapse> -->
|
||||
<view class="event-list">
|
||||
<uni-card
|
||||
class="event-item"
|
||||
:class="item.type"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
@click="jump(item)"
|
||||
>
|
||||
<!-- 头部：图标 + 信息 + 操作 -->
|
||||
<view class="event-header">
|
||||
<view class="event-icon">
|
||||
<!-- 动态图标：根据类型切换 -->
|
||||
<uni-icons
|
||||
custom-prefix="iconfont"
|
||||
type="icon-terminal-box-fill"
|
||||
size="35"
|
||||
color="#FF0000"
|
||||
></uni-icons>
|
||||
<view class="badge1" v-if="item.status == 0"> </view>
|
||||
</view>
|
||||
<view class="event-info">
|
||||
<view class="event-title">
|
||||
<text class="event-id">{{ item.devName }}</text>
|
||||
</view>
|
||||
<view class="event-desc">
|
||||
<text>工程名称：{{ item.engineeringName }}</text>
|
||||
<text>项目名称：{{ item.projectName }}</text>
|
||||
<!-- <text>事件时间：{{ item.startTime }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情区域 -->
|
||||
<view class="event-detail">
|
||||
<uni-collapse accordion>
|
||||
<uni-collapse-item
|
||||
:title="
|
||||
item.interruptCounts == 0 ? '通讯正常' : `通讯中断 ${item.interruptCounts} 次`
|
||||
"
|
||||
>
|
||||
<view v-for="date in item.interruptDetails" class="textBox mb10">{{ date }}</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item
|
||||
:title="
|
||||
item.warnCounts == 0 ? '暂无终端告警信息' : `终端告警 ${item.warnCounts} 次`
|
||||
"
|
||||
>
|
||||
<view v-for="val in item.warnDetails" class="textBox mb10">
|
||||
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</uni-card>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
@@ -64,13 +117,13 @@ export default {
|
||||
loading: true,
|
||||
detail: {},
|
||||
limit: '',
|
||||
accordionVal: '1',
|
||||
collapseValue: '0',
|
||||
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loading = false
|
||||
this.loading = true
|
||||
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||
this.init()
|
||||
if (this.detail.isRead != 1) {
|
||||
@@ -81,7 +134,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.loading = false
|
||||
queryAlarmDetail({
|
||||
devList: this.detail.devIds,
|
||||
time: this.detail.date,
|
||||
@@ -97,7 +149,8 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import '../index.scss';
|
||||
.detail {
|
||||
padding: 20rpx 0;
|
||||
|
||||
@@ -105,10 +158,10 @@ export default {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.detail-content-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -117,18 +170,38 @@ export default {
|
||||
padding: 10rpx 0;
|
||||
margin-left: 15px;
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.frequency {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
font-size: 26rpx;
|
||||
// color: #666666;
|
||||
}
|
||||
}
|
||||
.textBox {
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.event-list {
|
||||
background: #fff;
|
||||
.event-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background-color: #ff000020;
|
||||
}
|
||||
}
|
||||
/deep/ .uni-collapse-item__title-box {
|
||||
padding: 0 15px 0 0;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
font-size: 26rpx !important;
|
||||
color: #666666;
|
||||
span {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,23 @@
|
||||
<template>
|
||||
<view class="preview-container">
|
||||
<!-- 右上角关闭按钮 -->
|
||||
<view class="close-btn" @click="close">
|
||||
<text class="close-icon">✕</text>
|
||||
<!-- 右上角按钮组 -->
|
||||
<view class="btn-group">
|
||||
<!-- 缩小按钮 -->
|
||||
<!-- <view class="btn zoom-out-btn" @click="zoomOut">
|
||||
<text class="btn-icon">−</text>
|
||||
</view> -->
|
||||
|
||||
<!-- 放大按钮 -->
|
||||
<!-- <view class="btn zoom-in-btn" @click="zoomIn">
|
||||
<text class="btn-icon">+</text>
|
||||
</view> -->
|
||||
|
||||
<!-- 下载按钮 -->
|
||||
<view class="btn download-btn" @click="downloadImage">
|
||||
<text class="btn-icon">⬇</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下载按钮 -->
|
||||
<view class="download-btn" @click="downloadImage">
|
||||
<text class="download-icon">⬇️</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 图片预览区域，使用movable-area和movable-view实现缩放移动 -->
|
||||
<movable-area class="movable-area" :style="{ width: '100vw', height: '100vh' }">
|
||||
<movable-view
|
||||
@@ -19,21 +27,25 @@
|
||||
:scale-min="0.5"
|
||||
:scale-max="3"
|
||||
:scale-value="scaleValue"
|
||||
@scale="onScale"
|
||||
|
||||
@touchstart="onTouchStart"
|
||||
@touchend="onTouchEnd"
|
||||
:x="x"
|
||||
:y="y"
|
||||
:animation="true"
|
||||
:animation-duration="300"
|
||||
:style="{
|
||||
width: rotatedWidth + 'px',
|
||||
height: rotatedHeight + 'px'
|
||||
height: rotatedHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<view
|
||||
<view
|
||||
class="image-wrapper"
|
||||
:style="{
|
||||
width: imgWidth + 'px',
|
||||
height: imgHeight + 'px',
|
||||
transform: 'rotate(90deg)',
|
||||
transformOrigin: 'center center'
|
||||
transformOrigin: 'center center',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
@@ -42,7 +54,7 @@
|
||||
mode="aspectFill"
|
||||
:style="{
|
||||
width: imgWidth + 'px',
|
||||
height: imgHeight + 'px'
|
||||
height: imgHeight + 'px',
|
||||
}"
|
||||
@load="onImageLoad"
|
||||
></image>
|
||||
@@ -50,10 +62,7 @@
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
|
||||
<!-- 图片信息提示 -->
|
||||
<view class="scale-tip" v-if="showScaleTip">
|
||||
当前缩放: {{ Math.round(scaleValue * 100) }}%
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -62,12 +71,12 @@ export default {
|
||||
onLoad(options) {
|
||||
this.imageUrl = decodeURIComponent(options.url) // 接收传递的图片URL，需要解码
|
||||
},
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageUrl: '',
|
||||
// 缩放相关
|
||||
scaleValue: 1,
|
||||
// 缩放相关 - 默认0.5
|
||||
scaleValue: 0.6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
// 图片原始尺寸
|
||||
@@ -81,70 +90,132 @@ export default {
|
||||
tipTimer: null,
|
||||
// 屏幕尺寸
|
||||
windowWidth: 0,
|
||||
windowHeight: 0
|
||||
windowHeight: 0,
|
||||
// 缩放步长
|
||||
zoomStep: 0.2,
|
||||
// 动画控制
|
||||
isTouching: false,
|
||||
animationTimer: null
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
mounted() {
|
||||
// 获取屏幕尺寸
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
this.windowWidth = systemInfo.windowWidth;
|
||||
this.windowHeight = systemInfo.windowHeight;
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.windowWidth = systemInfo.windowWidth
|
||||
this.windowHeight = systemInfo.windowHeight
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 图片加载完成后获取尺寸
|
||||
onImageLoad(e) {
|
||||
const { width, height } = e.detail;
|
||||
|
||||
const { width, height } = e.detail
|
||||
|
||||
// 保存原始尺寸
|
||||
this.imgWidth = width;
|
||||
this.imgHeight = height;
|
||||
|
||||
this.imgWidth = width
|
||||
this.imgHeight = height
|
||||
|
||||
// 旋转90度后，宽度和高度互换
|
||||
this.rotatedWidth = height; // 旋转后宽度 = 原高度
|
||||
this.rotatedHeight = width; // 旋转后高度 = 原宽度
|
||||
|
||||
// 计算初始位置居中
|
||||
this.resetPosition();
|
||||
|
||||
console.log('图片加载:', {width, height}, '旋转后:', {rotatedWidth: this.rotatedWidth, rotatedHeight: this.rotatedHeight});
|
||||
this.rotatedWidth = height // 旋转后宽度 = 原高度
|
||||
this.rotatedHeight = width // 旋转后高度 = 原宽度
|
||||
|
||||
// 计算初始位置居中（考虑0.5缩放）
|
||||
this.resetPosition()
|
||||
},
|
||||
|
||||
// 重置位置到中心
|
||||
|
||||
// 重置位置到中心（考虑当前缩放比例）
|
||||
resetPosition() {
|
||||
// 计算居中的偏移量
|
||||
this.x = (this.windowWidth - this.rotatedWidth) / 2;
|
||||
this.y = (this.windowHeight - this.rotatedHeight) / 2;
|
||||
|
||||
console.log('重置位置:', {x: this.x, y: this.y, windowWidth: this.windowWidth, windowHeight: this.windowHeight});
|
||||
// 计算居中的偏移量，考虑缩放比例
|
||||
const displayWidth = this.rotatedWidth * this.scaleValue
|
||||
const displayHeight = this.rotatedHeight * this.scaleValue
|
||||
|
||||
this.x = (this.windowWidth - displayWidth) / 2
|
||||
this.y = (this.windowHeight - displayHeight) / 2
|
||||
},
|
||||
|
||||
|
||||
// 触摸开始
|
||||
onTouchStart() {
|
||||
this.isTouching = true
|
||||
},
|
||||
|
||||
// 触摸结束
|
||||
onTouchEnd() {
|
||||
this.isTouching = false
|
||||
},
|
||||
|
||||
// 缩放事件处理
|
||||
onScale(e) {
|
||||
this.scaleValue = e.detail.scale;
|
||||
|
||||
this.scaleValue = e.detail.scale
|
||||
|
||||
// 显示缩放提示
|
||||
this.showScaleTip = true;
|
||||
this.showScaleTip = true
|
||||
if (this.tipTimer) {
|
||||
clearTimeout(this.tipTimer);
|
||||
clearTimeout(this.tipTimer)
|
||||
}
|
||||
this.tipTimer = setTimeout(() => {
|
||||
this.showScaleTip = false;
|
||||
}, 1500);
|
||||
this.showScaleTip = false
|
||||
}, 1500)
|
||||
},
|
||||
|
||||
// 关闭预览
|
||||
close() {
|
||||
uni.navigateBack();
|
||||
|
||||
// 放大
|
||||
zoomIn() {
|
||||
// 计算新的缩放值，不超过最大值
|
||||
const newScale = Math.min(this.scaleValue + this.zoomStep, 3)
|
||||
this.setScaleWithAnimation(newScale)
|
||||
},
|
||||
|
||||
|
||||
// 缩小
|
||||
zoomOut() {
|
||||
// 计算新的缩放值，不低于最小值
|
||||
const newScale = Math.max(this.scaleValue - this.zoomStep, 0.5)
|
||||
this.setScaleWithAnimation(newScale)
|
||||
},
|
||||
|
||||
// 带动画的设置缩放值
|
||||
setScaleWithAnimation(newScale) {
|
||||
// 保存旧的缩放值用于动画
|
||||
const oldScale = this.scaleValue
|
||||
|
||||
// 计算缩放中心点（屏幕中心）
|
||||
const centerX = this.windowWidth / 2
|
||||
const centerY = this.windowHeight / 2
|
||||
|
||||
// 计算当前图片中心点
|
||||
const oldDisplayWidth = this.rotatedWidth * oldScale
|
||||
const oldDisplayHeight = this.rotatedHeight * oldScale
|
||||
const oldCenterX = this.x + oldDisplayWidth / 2
|
||||
const oldCenterY = this.y + oldDisplayHeight / 2
|
||||
|
||||
// 计算偏移量，使缩放后图片中心保持在屏幕中心
|
||||
const newDisplayWidth = this.rotatedWidth * newScale
|
||||
const newDisplayHeight = this.rotatedHeight * newScale
|
||||
const newX = centerX - newDisplayWidth / 2
|
||||
const newY = centerY - newDisplayHeight / 2
|
||||
|
||||
// 更新缩放值和位置
|
||||
this.scaleValue = newScale
|
||||
this.x = newX
|
||||
this.y = newY
|
||||
|
||||
// 显示缩放提示
|
||||
this.showScaleTip = true
|
||||
if (this.tipTimer) {
|
||||
clearTimeout(this.tipTimer)
|
||||
}
|
||||
this.tipTimer = setTimeout(() => {
|
||||
this.showScaleTip = false
|
||||
}, 1500)
|
||||
|
||||
console.log('缩放:', {oldScale, newScale, x: this.x, y: this.y})
|
||||
},
|
||||
|
||||
// 下载图片
|
||||
downloadImage() {
|
||||
uni.showLoading({
|
||||
title: '下载中...'
|
||||
});
|
||||
|
||||
title: '下载中,请稍等...',
|
||||
mask: true,
|
||||
})
|
||||
|
||||
// 先获取图片信息（如果是网络图片需要先下载）
|
||||
uni.downloadFile({
|
||||
url: this.imageUrl,
|
||||
@@ -154,16 +225,16 @@ export default {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
icon: 'success',
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
console.error('保存失败', err);
|
||||
|
||||
uni.hideLoading()
|
||||
console.error('保存失败', err)
|
||||
|
||||
// 处理用户拒绝权限的情况
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
uni.showModal({
|
||||
@@ -173,52 +244,49 @@ export default {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: (settingRes) => {
|
||||
console.log('打开设置页面', settingRes);
|
||||
}
|
||||
});
|
||||
console.log('打开设置页面', settingRes)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
console.error('下载失败', err);
|
||||
uni.hideLoading()
|
||||
console.error('下载失败', err)
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 双击重置缩放和位置（可选功能）
|
||||
onDoubleTap() {
|
||||
this.scaleValue = 1;
|
||||
this.resetPosition();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 页面返回前清理定时器
|
||||
onUnload() {
|
||||
if (this.tipTimer) {
|
||||
clearTimeout(this.tipTimer);
|
||||
clearTimeout(this.tipTimer)
|
||||
}
|
||||
}
|
||||
if (this.animationTimer) {
|
||||
cancelAnimationFrame(this.animationTimer)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -241,62 +309,89 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// 添加硬件加速
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.1s ease;
|
||||
// 添加硬件加速
|
||||
transform: translateZ(0) rotate(90deg);
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
display: block;
|
||||
// 添加硬件加速
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
// 关闭按钮
|
||||
.close-btn {
|
||||
// 按钮组
|
||||
.btn-group {
|
||||
position: fixed;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20rpx;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
// 通用按钮样式
|
||||
.btn {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
// 按钮不参与动画
|
||||
transform: translateZ(0);
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
.close-icon {
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// 缩小按钮
|
||||
.zoom-out-btn {
|
||||
.btn-icon {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 放大按钮
|
||||
.zoom-in-btn {
|
||||
.btn-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 下载按钮
|
||||
.download-btn {
|
||||
position: fixed;
|
||||
top: 30rpx;
|
||||
right: 110rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.download-icon {
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
.btn-icon {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -305,7 +400,7 @@ export default {
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%) translateZ(0);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
padding: 10rpx 30rpx;
|
||||
@@ -315,12 +410,22 @@ export default {
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
animation: fadeInOut 1.5s ease;
|
||||
// 提示不参与动画
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% { opacity: 0; }
|
||||
15% { opacity: 1; }
|
||||
85% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
}
|
||||
85% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -21,7 +21,7 @@
|
||||
>指标越限详情<text class="prompt">（仅显示较为严重的10次）</text></view
|
||||
>
|
||||
|
||||
<uni-collapse accordion>
|
||||
<uni-collapse accordion v-model="collapseValue">
|
||||
<uni-collapse-item :title="item.targetName" v-for="item in list">
|
||||
<view class="data-table">
|
||||
<view class="table-header">
|
||||
@@ -57,6 +57,7 @@ export default {
|
||||
loading: true,
|
||||
detail: {},
|
||||
list: [],
|
||||
collapseValue: '0',
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -96,10 +97,10 @@ export default {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.detail-content-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -130,7 +131,7 @@ export default {
|
||||
text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-size: 26rpx;
|
||||
// color: #333;
|
||||
&:first-child {
|
||||
// text-align: left;
|
||||
@@ -139,10 +140,14 @@ export default {
|
||||
}
|
||||
}
|
||||
.table-header {
|
||||
padding: 0rpx;
|
||||
padding: 0rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
/deep/ .uni-collapse-item__title-text{
|
||||
font-weight: 700;
|
||||
/deep/ .uni-collapse-item__title-text {
|
||||
font-weight: 700;
|
||||
span {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -83,10 +83,10 @@ export default {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.detail-content-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user