luozhun
/
policeSecurity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新签名组件

This commit is contained in:
TimSpan 2024-11-12 17:23:52 +08:00
parent 301fad495c
commit bb8925e62c
13 changed files with 350 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
collect_information/.env.development
View File

@ -1,6 +1,9 @@
# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
TARO_APP_ID="wx0acd1c4fcf94bdd3"
TARO_APP_BASE_API="http://172.10.10.93:8765"
# TARO_APP_BASE_API="http://172.10.10.93:8765"
TARO_APP_BASE_API="https://www.hnjinglian.cn:5678"
# minio
TARO_APP_MINIO_URL=http://118.253.177.137:9000

BIN
collect_information/src/assets/images/rotate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
collect_information/src/assets/images/rotate1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
collect_information/src/assets/images/旋转.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

28
collect_information/src/pages/projectManager/index/index.vue
View File

@ -11,14 +11,11 @@
<view class="nameTitle">
<view class="itemSchool">
<text>单位数量</text>
<text
style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 80px;text-align: center">51</text>
<text style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 80px; text-align: center">51</text>
</view>
<view class="itemSchool">
<text>服务项目</text>
<text>
13123
</text>
<text> 13123 </text>
</view>
<view class="itemSchool">
<text>有保安证人员</text>
@ -36,8 +33,7 @@
<!--九宫格-->
<view class="Module">
<view class="subModule">
<view class="subModuleItem" v-for="item in subModuleList" :key="item.id"
@click="subNavigation(item.url)">
<view class="subModuleItem" v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.url)">
<view class="subModuleIndex">
<image :src="item.icon"></image>
</view>
@ -46,12 +42,11 @@
</view>
</view>
<view style="background-color: #e9eef4; height: 15rpx"></view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Taro from "@tarojs/taro";
import Taro from '@tarojs/taro'
import icon from '@/assets/images/project.png'
import icon01 from '@/assets/images/回单.jpg'
import icon02 from '@/assets/images/工单.jpg'
@ -67,40 +62,39 @@ const subModuleList = ref([
id: 0,
icon: icon,
name: '项目管理',
url: '/subPages/projectManager/myProject/myProject'
url: '/subPages/projectManager/myProject/myProject',
},
{
id: 1,
icon: icon02,
name: '整改工单',
url: ''
url: '',
},
{
id: 2,
icon: icon03,
name: '考核排名',
url: ''
url: '',
},
{
id: 3,
icon: icon06,
name: '警保风采',
url: ''
url: '',
},
{
id: 4,
icon: icon04,
name: '法制宣传',
url: ''
url: '',
},
{
id: 5,
icon: icon01,
name: '整改回单',
url: ''
}
url: '',
},
])
const subNavigation = async (url: string) => Taro.navigateTo({ url })
</script>

3
collect_information/src/request/index.ts
View File

@ -36,6 +36,9 @@ class CustomRequest {
Taro.showLoading({
title: '请求中...',
}).then()
// Taro.showLoading({
// title: '请求中...',
// })
}
Taro.request<JsonResult<T>, object>({
url: this.BASE_API + url,

25
collect_information/src/store/daily.ts
View File

@ -5,6 +5,10 @@ export const useDailyStore = defineStore('daily', {
userdailyinspection: [],
base64_1: '',
base64_2: '',
direction: true,
direction_1: true,
direction_2: true,
}),
actions: {
@ -20,6 +24,18 @@ export const useDailyStore = defineStore('daily', {
clearSignData() {
this.base64_1 = ''
this.base64_2 = ''
},
changeDirection() {
this.direction = !this.direction
},
changeDirection__(data) {
this.direction = data
},
changeDirection1(data) {
this.direction_1 = data
},
changeDirection2(data) {
this.direction_2 = data
}
},
getters: {
@ -31,6 +47,15 @@ export const useDailyStore = defineStore('daily', {
},
get_base64_2(state) {
return state.base64_2
},
getDirection(state) {
return state.direction
},
getDirection1(state) {
return state.direction_1
},
getDirection2(state) {
return state.direction_2
}
}
})

6
collect_information/src/subPages/police/dailyInspection/dailyInspection.scss
View File

@ -39,3 +39,9 @@ page {
border-left: white;
}
}
.sigh_btns {
transform: rotate(-90deg);
transform-origin: center
}
.sigh_btns_noRotate {}

75
collect_information/src/subPages/police/dailyInspection/dailyInspection.vue
View File

@ -40,30 +40,36 @@
<nut-input v-model="_form.remark" placeholder="请输入备注" type="text" />
</nut-form-item>
<nut-form-item label="考核人员签字:">
<navigator :url="`/subPages/select/signature/signature?index=${1}`" hover-class="navigator-hover">
<image v-if="_form.assessmentUserSignature" :src="_form.assessmentUserSignature" mode="heightFix" style="height: 80rpx"></image>
<nut-button v-else style="height: 50rpx" shape="square" type="info">考核人员签字</nut-button>
<nut-form-item label="考核人员签名:">
<navigator :url="`/subPages/select/signature/signature?index=${1}&name=考核人员签名`" hover-class="navigator-hover">
<nut-button style="height: 50rpx" shape="square" type="info">考核人员签字</nut-button>
</navigator>
</nut-form-item>
<view style="display: flex; justify-content: center">
<!-- :class="direction1 ? 'sigh_btns' : 'sigh_btns_noRotate'" -->
<image v-if="_form.assessmentUserSignature" :src="_form.assessmentUserSignature" mode="heightFix" style="height: 300rpx"></image>
</view>
<nut-form-item label="被考评学校签名:">
<navigator :url="`/subPages/select/signature/signature?index=${2}`" hover-class="navigator-hover">
<image v-if="_form.byAssessmentEnterprisesUnitUserSignature" :src="_form.byAssessmentEnterprisesUnitUserSignature" mode="heightFix" style="height: 80rpx"></image>
<nut-button v-else style="height: 50rpx" shape="square" type="info">被考评学校负责人</nut-button>
<navigator :url="`/subPages/select/signature/signature?index=${2}&name=被考评学校签名`" hover-class="navigator-hover">
<nut-button style="height: 50rpx" shape="square" type="info">被考评学校负责人</nut-button>
</navigator>
</nut-form-item>
<view style="display: flex; justify-content: center">
<!-- :class="direction2 ? 'sigh_btns' : 'sigh_btns_noRotate'" -->
<image v-if="_form.byAssessmentEnterprisesUnitUserSignature" :src="_form.byAssessmentEnterprisesUnitUserSignature" mode="heightFix" style="height: 300rpx"></image>
</view>
</nut-form>
</view>
<view style="height: 150rpx"></view>
<view style="display: flex; width: 100%; justify-content: center; position: fixed; bottom: 50rpx">
<nut-button shape="round" type="info" @click="onSubmit" style="height: 80rpx; width: 702rpx; margin: 10rpx auto">确认提交</nut-button>
<nut-button :loading="isLoading" shape="round" type="info" @click="onSubmit" style="height: 80rpx; width: 702rpx; margin: 10rpx auto">确认提交</nut-button>
</view>
</view>
</template>
<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import Taro, { useLoad } from '@tarojs/taro'
import Taro, { useLoad, useUnload } from '@tarojs/taro'
import './dailyInspection.scss'
import { ref, computed, reactive, watch } from 'vue'
import api from '@/request/index'
@ -73,6 +79,10 @@ const store = useDailyStore()
const daily = computed(() => store.getdailyinspection)
const base64_1 = computed(() => store.get_base64_1)
const base64_2 = computed(() => store.get_base64_2)
// const direction = computed(() => store.getDirection)
const direction1 = computed(() => store.getDirection1)
const direction2 = computed(() => store.getDirection2)
const currentCkProjectId = ref('')
const submitData = ref<Item[]>([])
@ -114,10 +124,10 @@ const Onrating = function (name: string, snowFlakeId: string) {
*/
const assessmentCriteriaRulesByCkProjectId = async function (ckProjectId) {
Taro.showLoading({
title: '加载中...',
mask: true,
})
// Taro.showLoading({
// title: '加载中...',
// mask: true,
// })
const res = await api.get<StarRating[]>(`/assessmentCriteria/assessmentCriteriaRulesByCkProjectId`, { ckProjectId })
res.data?.forEach((item) => {
@ -146,7 +156,7 @@ const assessmentCriteriaRulesByCkProjectId = async function (ckProjectId) {
// console.log('starRating.value______________________________', starRating.value)
store.dailyinspectionList(starRating.value)
Taro.hideLoading()
// Taro.hideLoading()
}
/**
* @ckProjectListByType 根据类型获取考核标准列表
@ -156,6 +166,18 @@ const selectorCheckedType = ref<string>('')
const selectorType = ref<CkProjectListByType[]>()
const ckProjectListByType = async function (type) {
const res = await api.get<CkProjectListByType[]>(`/assessmentCriteria/ckProjectListByType`, { type })
console.log(res.data)
if (res.data?.length === 0) {
let timeID = setTimeout(() => {
Taro.showToast({
title: '该单位下面没有考核标准',
icon: 'none',
duration: 2000,
})
clearTimeout(timeID)
}, 500)
}
selectorType.value = res.data
}
@ -183,6 +205,7 @@ const onChange = function (e: any) {
const getUnitEnterprisesUnitList = async function () {
const res = await api.get<UnitEnterprisesUnitList[]>(`/policeIndex/getUnitEnterprisesUnitList`)
selector.value = res.data
}
@ -211,6 +234,7 @@ const clearData = function () {
_form.remark = ''
assessmentCriteriaRulesByCkProjectId(currentCkProjectId.value) //重新获取数据
}
const isLoading = ref(false)
const onSubmit = async function () {
if (_form.enterprisesUnitId === '') {
_showToast('请选择企事业单位')
@ -228,10 +252,7 @@ const onSubmit = async function () {
_showToast('请被考核单位人员签字')
return
}
Taro.showLoading({
title: '加载中...',
mask: true,
})
isLoading.value = true
submitData.value.forEach((element: StarRating) => {
element?.itemList.forEach((item: ItemList) => {
@ -266,17 +287,31 @@ const onSubmit = async function () {
Object.assign(assessmentRecordParams, _form)
assessmentRecordParams.assessmentRecordDetails = [...assessmentRecordDetails.value]
const result = await api.post('/assessmentCriteria/submitAssessmentRecord', assessmentRecordParams)
Taro.hideLoading()
clearData() //清空数据
if (result.code === 200) {
isLoading.value = false
let timeID = setTimeout(() => {
Taro.showToast({
title: result.message,
icon: 'success',
duration: 1500,
duration: 2000,
mask: true,
})
clearTimeout(timeID)
}, 500)
} else {
_showToast(result.message)
}
}
useUnload(() => {
store.clearSignData()
store.dailyinspectionList([])
assessmentRecordDetails.value = []
_form.assessmentUserSignature = ''
_form.byAssessmentEnterprisesUnitUserSignature = ''
_form.remark = ''
})
</script>

1
collect_information/src/subPages/select/dailyLife/dailyLife.vue
View File

@ -98,7 +98,6 @@ const checkboxChange = async function (state, label, index, i) {
let arr
if (label === '达标' && i === 0) {
console.log(11111111111111)
arr = ['null']
} else {
arr = starRating.value[findIndex.value].itemList[index].selectedGroup.filter((selectedId) => selectedId != 'null')

65
collect_information/src/subPages/select/signature/signature.scss
View File

@ -0,0 +1,65 @@
.sign-box {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fixedIcon {
z-index: 1000;
position: fixed;
right: 20px;
top: 20px;
height: 100rpx;
width: 100rpx;
}
.sign-view {
height: 100%;
}
.sigh_btns_false {
position: absolute;
bottom: 15rpx;
right: 0;
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.sigh_btns {
transform: rotate(90deg);
transform-origin: center
}
.sigh_btns_noRotate {}
.sigh_btns_true {
position: absolute;
left: 0;
top: 0;
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.mycanvas {
width: 100%;
background-color: #ececec;
}
.canvsborder {
border: 1rpx solid #333;
position: fixed;
top: 0;
left: 10000rpx;
}

1
collect_information/src/subPages/select/signature/signature.ts
View File

@ -1,3 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '签名',
disableScroll: true
})

197
collect_information/src/subPages/select/signature/signature.vue
View File

@ -1,64 +1,173 @@
<template>
<nut-signature @confirm="confirm" @clear="clear"></nut-signature>
<image mode="widthFix" v-if="imgData" :src="imgData" style="width: 100%"></image>
<!-- 签字功能 -->
<view catchtouchmove="true">
<view class="sign-box">
<view class="fixedIcon" @click.stop="changeDirection">
<image style="height: 100rpx; width: 100rpx" :src="icon"></image>
</view>
<canvas class="mycanvas" :style="{ height: height + 'px' }" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
<canvas canvas-id="camCacnvs" :style="{ height: width + 'px' }" class="canvsborder"></canvas>
<view :class="direction ? 'sigh_btns_true' : 'sigh_btns_false'">
<nut-button :class="direction ? 'sigh_btns' : 'sigh_btns_noRotate'" style="height: 60rpx" shape="square" type="info" @click="handleCancel"> 取消 </nut-button>
<nut-button :class="direction ? 'sigh_btns' : 'sigh_btns_noRotate'" style="height: 60rpx" shape="square" type="info" @click="handleReset"> 重写 </nut-button>
<nut-button :class="direction ? 'sigh_btns' : 'sigh_btns_noRotate'" style="height: 60rpx" shape="square" type="info" @click="handleConfirm"> 确认 </nut-button>
</view>
</view>
</view>
</template>
<script setup lang="ts">
<script setup>
import './signature.scss'
import Taro, { useLoad, useUnload } from '@tarojs/taro'
import { ref, onMounted, watch, computed } from 'vue'
import icon from '@/assets/images/rotate1.png'
const _index = ref(0)
import { useDailyStore } from '@/store/daily'
const store = useDailyStore()
import Taro, { useLoad } from '@tarojs/taro'
import { ref, computed } from 'vue'
const base64_1 = computed(() => store.get_base64_1)
const base64_2 = computed(() => store.get_base64_2)
const direction = computed(() => store.getDirection)
const direction1 = computed(() => store.getDirection1)
const direction2 = computed(() => store.getDirection2)
const _index = ref(0)
const width = ref(0)
const height = ref(300)
const points = ref([]) // 画笔路径点集合
const tempPoint = ref([]) // 当前签名路径
let that
let id
let type
useLoad((options) => {
// console.log(options)
_index.value = Number(options.index)
if (_index.value === 1) {
imgData.value = base64_1.value
} else {
imgData.value = base64_2.value
}
Taro.setNavigationBarTitle({
title: options.name,
})
const imgData = ref('')
const convertToBase64 = (imgUrl: string): Promise<string> => {
return new Promise((resolve, reject) => {
const fs = Taro.getFileSystemManager()
fs.readFile({
filePath: imgUrl, // 本地路径
// if (_index.value === 1) {
// store.changeDirection__(direction1.value)
// } else {
// store.changeDirection__(direction2.value)
// }
})
const ctx = ref(null)
onMounted(() => {
that = this
const { windowWidth, windowHeight } = Taro.getSystemInfoSync()
width.value = windowWidth
height.value = windowHeight * 0.98 // 控制画板的宽高
// 创建绘图上下文
ctx.value = Taro.createCanvasContext('mycanvas', this)
ctx.value.lineWidth = 2
ctx.value.lineCap = 'round'
ctx.value.lineJoin = 'round'
})
const touchstart = (e) => {
const startX = e.changedTouches[0].x
const startY = e.changedTouches[0].y
points.value.push({ X: startX, Y: startY })
ctx.value.beginPath()
}
const touchmove = (e) => {
const moveX = e.changedTouches[0].x
const moveY = e.changedTouches[0].y
points.value.push({ X: moveX, Y: moveY })
if (points.value.length >= 2) {
draw()
}
tempPoint.value.push({ X: moveX, Y: moveY })
}
const touchend = () => {
points.value = []
}
const draw = () => {
const point1 = points.value[0]
const point2 = points.value[1]
points.value.shift()
ctx.value.moveTo(point1.X, point1.Y)
ctx.value.lineTo(point2.X, point2.Y)
ctx.value.stroke()
ctx.value.draw(true)
}
const handleCancel = () => {
Taro.navigateBack({ delta: 1 })
}
const handleReset = () => {
ctx.value.clearRect(0, 0, width.value, height.value)
ctx.value.draw(true)
tempPoint.value = []
}
const handleConfirm = () => {
if (tempPoint.value.length === 0) {
Taro.showToast({ title: '请先签名', icon: 'none', duration: 2000 })
return
}
Taro.canvasToTempFilePath({
canvasId: 'mycanvas',
success: (res) => {
console.log('canvasToTempFilePath______________', res)
const tempPath = res.tempFilePath
const ctx = Taro.createCanvasContext('camCacnvs', that)
// 调整缩放比例，例如压缩到 50%
const targetWidth = width.value * 0.5
const targetHeight = height.value * 0.5
ctx.translate(0, targetWidth)
ctx.rotate((-90 * Math.PI) / 180)
ctx.drawImage(tempPath, 0, 0, targetWidth, targetHeight)
ctx.draw(false, () => {
Taro.canvasToTempFilePath({
canvasId: 'camCacnvs',
width: targetWidth,
height: targetHeight,
success: (compressedRes) => {
Taro.getFileSystemManager().readFile({
filePath: compressedRes.tempFilePath,
encoding: 'base64',
success(res) {
// resolve({})
resolve('data:image/png;base64,' + res.data) // 前缀加上 image 类型，适应 img 标签
},
fail(err) {
reject(err)
},
})
})
}
const confirm = async (canvas: any, data: string) => {
if (data) {
console.log('imgData', canvas)
try {
const base64Image = await convertToBase64(data)
success: (res) => {
const base64Image = 'data:image/jpeg;base64,' + res.data
console.log('base64Image_________________________', base64Image)
if (_index.value === 1) {
// imgData.value = base64Image
store.change_base64_1(base64Image)
Taro.navigateBack({ delta: 1 })
} else {
// imgData.value = base64Image
store.change_base64_2(base64Image)
Taro.navigateBack({ delta: 1 })
}
// console.log('Base64 Image:', base64Image)
} catch (error) {
console.error('Failed to convert image to Base64:', error)
},
})
},
})
})
},
})
}
/**
* @direction false 竖屏，true 横屏
*/
// const direction = ref(true)
const changeDirection = () => {
// direction.value = !direction.value
store.changeDirection()
Taro.vibrateShort({ type: 'medium' }).then()
}
useUnload(() => {
if (_index.value === 1) {
store.changeDirection1(direction.value)
} else {
store.changeDirection2(direction.value)
}
const clear = () => {
imgData.value = ''
console.log('clear')
}
})
</script>