新签名组件

collect_information/.env.development

@@ -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

collect_information/src/pages/projectManager/index/index.vue

@@ -3,22 +3,19 @@
     <view class="swiperDemo">
       <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
         <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 180px">
-          <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false"/>
+          <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
           <view>1123</view>
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <view class="nameTitle">
-      <view class="itemSchool" >
+      <view class="itemSchool">
         <text>单位数量</text>
-        <text
+        <text style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 80px; text-align: center">51</text>
-            style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 80px;text-align: center">51</text>
       </view>
       <view class="itemSchool">
         <text>服务项目</text>
-        <text>
+        <text> 13123 </text>
-          13123
-        </text>
       </view>
       <view class="itemSchool">
         <text>有保安证人员</text>
@@ -35,23 +32,21 @@
     </view>
     <!--九宫格-->
     <view class="Module">
-      <view class="subModule" >
+      <view class="subModule">
-        <view class="subModuleItem" v-for="item in subModuleList" :key="item.id"
+        <view class="subModuleItem" v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.url)">
-              @click="subNavigation(item.url)">
           <view class="subModuleIndex">
             <image :src="item.icon"></image>
           </view>
-          <view style=" font-size: 12px;color: #414141;margin-top: 5px">{{item.name}}</view>
+          <view style="font-size: 12px; color: #414141; margin-top: 5px">{{ item.name }}</view>
         </view>
       </view>
     </view>
-    <view style="background-color: #e9eef4;height: 15rpx"></view>
+    <view style="background-color: #e9eef4; height: 15rpx"></view>
-
   </view>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue'
+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})
+const subNavigation = async (url: string) => Taro.navigateTo({ url })
-
 </script>

collect_information/src/request/index.ts

@@ -1,6 +1,6 @@
 import Taro from "@tarojs/taro";
-import {ApiOptions} from "@/types/request";
+import { ApiOptions } from "@/types/request";
-import {useUserStore} from "@/store/userStore";
+import { useUserStore } from "@/store/userStore";
 
 
 /**
@@ -10,7 +10,7 @@ import {useUserStore} from "@/store/userStore";
 const requestInterceptor = (chain: Taro.Chain) => {
   const requestParams = chain.requestParams
   const tokenInfo = useUserStore().getTokenInfo()
-  const {header} = requestParams;
+  const { header } = requestParams;
   const customHeader: Record<string, any> = {}
   //添加token
   tokenInfo && (customHeader[tokenInfo.name] = tokenInfo.value);
@@ -36,6 +36,9 @@ class CustomRequest {
         Taro.showLoading({
           title: '请求中...',
         }).then()
+        // Taro.showLoading({
+        //   title: '请求中...',
+        // })
       }
       Taro.request<JsonResult<T>, object>({
         url: this.BASE_API + url,
@@ -78,7 +81,7 @@ class CustomRequest {
     })
   }
 
-  get<T>(url: string, params?: object, options: ApiOptions = {loading: false}): Promise<JsonResult<T>> {
+  get<T>(url: string, params?: object, options: ApiOptions = { loading: false }): Promise<JsonResult<T>> {
     options.header = {
       ...options.header,
       "content-type": 'application/x-www-form-urlencoded'
@@ -86,11 +89,11 @@ class CustomRequest {
     return this.request<T>(url, "GET", options, params)
   }
 
-  post<T>(url: string, params?: object, options: ApiOptions = {loading: false}): Promise<JsonResult<T>> {
+  post<T>(url: string, params?: object, options: ApiOptions = { loading: false }): Promise<JsonResult<T>> {
     return this.request<T>(url, "POST", options, params)
   }
 
-  delete<T>(url: string, params?: object, options: ApiOptions = {loading: false}): Promise<JsonResult<T>> {
+  delete<T>(url: string, params?: object, options: ApiOptions = { loading: false }): Promise<JsonResult<T>> {
     options.header = {
       ...options.header,
       "content-type": 'application/x-www-form-urlencoded'
@@ -98,7 +101,7 @@ class CustomRequest {
     return this.request(url, "DELETE", options, params)
   }
 
-  put<T>(url: string, params?: object, options: ApiOptions = {loading: false}): Promise<JsonResult<T>> {
+  put<T>(url: string, params?: object, options: ApiOptions = { loading: false }): Promise<JsonResult<T>> {
     return this.request(url, "PUT", options, params)
   }
 

collect_information/src/store/daily.ts

@@ -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
     }
   }
 })

collect_information/src/subPages/police/dailyInspection/dailyInspection.scss

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

collect_information/src/subPages/police/dailyInspection/dailyInspection.vue

@@ -40,30 +40,36 @@
           <nut-input v-model="_form.remark" placeholder="请输入备注" type="text" />
         </nut-form-item>
 
-        <nut-form-item label="考核人员签字:">
+        <nut-form-item label="考核人员签名:">
-          <navigator :url="`/subPages/select/signature/signature?index=${1}`" hover-class="navigator-hover">
+          <navigator :url="`/subPages/select/signature/signature?index=${1}&name=考核人员签名`" hover-class="navigator-hover">
-            <image v-if="_form.assessmentUserSignature" :src="_form.assessmentUserSignature" mode="heightFix" style="height: 80rpx"></image>
+            <nut-button style="height: 50rpx" shape="square" type="info">考核人员签字</nut-button>
-            <nut-button v-else 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">
+          <navigator :url="`/subPages/select/signature/signature?index=${2}&name=被考评学校签名`" hover-class="navigator-hover">
-            <image v-if="_form.byAssessmentEnterprisesUnitUserSignature" :src="_form.byAssessmentEnterprisesUnitUserSignature" mode="heightFix" style="height: 80rpx"></image>
+            <nut-button style="height: 50rpx" shape="square" type="info">被考评学校负责人</nut-button>
-            <nut-button v-else 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({
+  // Taro.showLoading({
-    title: '加载中...',
+  //   title: '加载中...',
-    mask: true,
+  //   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({
+  isLoading.value = true
-    title: '加载中...',
-    mask: 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) {
-    Taro.showToast({
+    isLoading.value = false
-      title: result.message,
+
-      icon: 'success',
+    let timeID = setTimeout(() => {
-      duration: 1500,
+      Taro.showToast({
-      mask: true,
+        title: result.message,
-    })
+        icon: 'success',
+        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>

collect_information/src/subPages/select/dailyLife/dailyLife.vue

@@ -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')

collect_information/src/subPages/select/signature/signature.scss

@@ -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;
+}

collect_information/src/subPages/select/signature/signature.ts

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

collect_information/src/subPages/select/signature/signature.vue

@@ -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'
+const direction = computed(() => store.getDirection)
-import { ref, computed } from 'vue'
+const direction1 = computed(() => store.getDirection1)
-const base64_1 = computed(() => store.get_base64_1)
+const direction2 = computed(() => store.getDirection2)
-const base64_2 = computed(() => store.get_base64_2)
 
-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) {
+  Taro.setNavigationBarTitle({
-    imgData.value = base64_1.value
+    title: options.name,
-  } else {
+  })
-    imgData.value = base64_2.value
+  // if (_index.value === 1) {
-  }
+  //   store.changeDirection__(direction1.value)
+  // } else {
+  //   store.changeDirection__(direction2.value)
+  // }
 })
-const imgData = ref('')
+const ctx = ref(null)
-const convertToBase64 = (imgUrl: string): Promise<string> => {
+onMounted(() => {
-  return new Promise((resolve, reject) => {
+  that = this
-    const fs = Taro.getFileSystemManager()
+  const { windowWidth, windowHeight } = Taro.getSystemInfoSync()
-    fs.readFile({
+  width.value = windowWidth
-      filePath: imgUrl, // 本地路径
+  height.value = windowHeight * 0.98 // 控制画板的宽高
-      encoding: 'base64',
+
-      success(res) {
+  // 创建绘图上下文
-        // resolve({})
+  ctx.value = Taro.createCanvasContext('mycanvas', this)
-        resolve('data:image/png;base64,' + res.data) // 前缀加上 image 类型，适应 img 标签
+  ctx.value.lineWidth = 2
-      },
+  ctx.value.lineCap = 'round'
-      fail(err) {
+  ctx.value.lineJoin = 'round'
-        reject(err)
+})
-      },
+
-    })
+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) => {
+                const base64Image = 'data:image/jpeg;base64,' + res.data
+
+                console.log('base64Image_________________________', base64Image)
+
+                if (_index.value === 1) {
+                  store.change_base64_1(base64Image)
+                  Taro.navigateBack({ delta: 1 })
+                } else {
+                  store.change_base64_2(base64Image)
+                  Taro.navigateBack({ delta: 1 })
+                }
+              },
+            })
+          },
+        })
+      })
+    },
   })
 }
-const confirm = async (canvas: any, data: string) => {
+/**
-  if (data) {
+ * @direction false 竖屏，true 横屏
-    console.log('imgData', canvas)
+ */
-    try {
+
-      const base64Image = await convertToBase64(data)
+// const direction = ref(true)
-      if (_index.value === 1) {
+const changeDirection = () => {
-        // imgData.value = base64Image
+  // direction.value = !direction.value
-        store.change_base64_1(base64Image)
+  store.changeDirection()
-        Taro.navigateBack({ delta: 1 })
+  Taro.vibrateShort({ type: 'medium' }).then()
-      } else {
+}
-        // imgData.value = base64Image
+useUnload(() => {
-        store.change_base64_2(base64Image)
+  if (_index.value === 1) {
-        Taro.navigateBack({ delta: 1 })
+    store.changeDirection1(direction.value)
-      }
+  } else {
-      // console.log('Base64 Image:', base64Image)
+    store.changeDirection2(direction.value)
-    } catch (error) {
-      console.error('Failed to convert image to Base64:', error)
-    }
   }
-}
+})
-const clear = () => {
-  imgData.value = ''
-  console.log('clear')
-}
 </script>