business_tms_program 0.0.0

package/src/pages/device/searchList.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DropMenu from '@/components/DropMenu.vue'
+import { isCheckStatusEnum } from '@/dict/device'
+import { debounce } from 'lodash-es';
+import Skeleton from '@/components/Skeleton.vue';
+import LoadingView from '@/components/Loading.vue';
+import Empty from '@/components/Empty.vue';
+import { queryCustomerCode, queryDevicePageList } from '@/api/device'
+
+defineOptions({
+  name: "searchList"
+});
+const selectedValue = ref('customerCode')
+const state = reactive({
+  customerCode: '',
+  searchList: [] as any[],
+  itemDatas: [] as any[],
+  searchLoading: false,
+  deviceLoading: false,
+  hasSearch: false, // 是否有搜索过
+  searchValue: ''
+});
+const options = [
+  { value: 'customerCode', name: '客户名称' },
+  { value: 'deviceCode', name: '设备编号' }
+]
+const toDeviceDetail = (item: any) => {
+  uni.navigateTo({ url: `/pages/device/detail?deviceCode=${item.deviceCode}` })
+}
+const searchCustomer = debounce(async (value: string) => { 
+  state.searchLoading = true;
+  state.searchList = [];
+  const res = await queryCustomerCode({
+    customerName: value, // 假设搜索字段为customerName
+  })
+  state.searchLoading = false;
+  if (!res) {
+    return; // 搜索失败时不更新数据
+  }
+  state.searchList = res;
+})
+const searchDevice = async (value: string) => {
+  if (!value) {
+    return; // 输入为空时不进行搜索
+  }
+  state.hasSearch = false;
+  state.deviceLoading = true;
+  const res = await queryDevicePageList({
+    size: 10,
+    current: 1,
+    customerCode: value, // 假设搜索字段为deviceCode
+  })
+  state.deviceLoading = false;
+  if (!res) {
+    return; // 搜索失败时不更新数据
+  }
+  state.itemDatas = res.records;
+}
+const handleSearchInput = debounce((e: any) => {
+  const { value } = e.detail
+  if (value === state.searchValue) {
+    return; // 输入为空时不进行搜索 
+  }
+  state.searchValue = value; // 更新搜索框的值
+  searchCustomer(value); // 刷新数据 
+  if (!state.hasSearch) {
+    state.hasSearch = true; // 标记为已搜索
+  }
+}, 300)
+</script>
+
+<template>
+  <view class="content">
+    <view class="header">
+      <DropMenu v-model="selectedValue" :options="options" />
+      <view class="input-wrapper">
+        <input class="search-input" @change="handleSearchInput" />
+      </view>
+      <image class="uni-icon" src="/static/img/search.png" />
+    </view>
+    <view class="searchist" v-if="state.hasSearch">
+      <view class="skeleton-box" v-if="state.searchLoading">
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+      </view>
+      <view class="search-item"
+        v-else
+        v-for="item in state.searchList" :key="item.customerCode"
+        @click="searchDevice(item.customerCode)"
+      >
+        {{ item.customerName }}<view class="code">{{ item.customerCode }}</view>
+      </view>
+    </view>
+    <view class="deviceBox" v-else>
+      <view class="record-box"
+        v-for="item in state.itemDatas" :key="item.deviceCode"
+        @click="toDeviceDetail(item)"
+        >
+        <view class="img"></view>
+        <view class="info">
+          <view class="inlineBox">
+            <view class="code">{{ item.deviceCode }}</view>
+            <view class="status" :class="{ 'unCheck': item.isCheckStatus === isCheckStatusEnum.NO }">
+              {{ item.isCheckStatus === isCheckStatusEnum.YES ? '已验收' : '未验收' }}
+            </view>
+          </view>
+          <view class="contact">客户：{{ item.customerName }}</view>
+        </view>
+      </view>
+      <view class="skeleton-box" v-if="state.deviceLoading">
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+      </view>
+      <Empty v-else-if="state.itemDatas.length === 0" />
+    </view>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;  
+}
+.header {
+  padding: 12rpx 18rpx; 
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .input-wrapper{
+    flex: 1;
+    margin-left: 4rpx;
+    padding: 0 24rpx;
+    background: rgba(0,0,0,0.04);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+  }
+      .search-input {
+        flex: 1;
+        font-size: 24rpx;
+        padding: 12rpx 0;
+      }
+      .uni-icon {
+        position: absolute;
+        right: 36rpx;
+        top: 28rpx;
+        width: 36rpx;
+        height: 36rpx;
+      }
+}
+.scroll-box {
+  padding: 16rpx 32rpx;
+  box-sizing: border-box;
+}
+.record-box{
+  display: flex;
+  margin-bottom: 16rpx;
+  padding: 36rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  .img{
+    margin-right: 16rpx;
+    width: 96rpx;
+    height: 96rpx;
+    background: #E8E8E8;
+    border-radius: 8rpx;
+  }
+  .inlineBox{
+    display: flex;
+    margin-bottom: 6rpx; 
+    .code{
+      margin-right: 16rpx;
+      font-weight: bold;
+      font-size: 32rpx;
+      color: #000000;
+      line-height: 38rpx;
+    }
+    .status{
+      padding: 6rpx 16rpx 8rpx 16rpx;
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #1D6FE9;
+      line-height: 34rpx;
+      border-radius: 24rpx;
+      background: rgba(29,111,233,0.1);
+      border: 1rpx solid #1D6FE9;
+    }
+    .unCheck {
+      color: #F5894E;
+      border: 1rpx solid #F5894E;
+      background: rgba(245,137,78,0.1);
+    }
+  }
+  .contact{
+    font-size: 28rpx;
+    color: rgba(0,0,0, 0.6);
+    line-height: 40rpx;
+  }
+}
+.searchist, .deviceBox{
+  margin-top: 24rpx;
+}
+.search-item{
+  display: flex;
+  align-items: flex-end;
+  background-color: #fff;
+  padding: 18rpx 16rpx 18rpx 42rpx;
+  font-size: 28rpx;
+  margin-bottom: 1rpx;
+  color: rgba(0,0,0,0.6);
+  .code{
+    margin-left: 24rpx;
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.4);
+  }
+}
+</style>

package/src/pages/installtion/Record.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import StatusTimeline from './StatusTimeline.vue'
+const props = defineProps({
+    data: {
+        type: Object,
+        default: {}
+    },
+    type: {
+        type: String,
+        default: ''
+    }
+})
+const emit = defineEmits(['clickDevice']);
+const handleClickDevice = (item: any) => {
+    emit('clickDevice', {
+        ...item,
+        workOrderCode: props.data.workOrderCode,
+    });
+}
+const chooseAddress = () => {
+  const { latitude, longitude } = props.data;
+  if (!latitude || !longitude) {
+    uni.showToast({ title: '暂无位置信息', icon: 'error' })
+    return;
+  }
+   uni.openLocation({
+        latitude: Number(latitude),
+        longitude: Number(longitude),
+        success: (res) => {
+            console.log(res);
+        },
+        fail: (err) => {
+            uni.showToast({ title: '获取位置失败', icon: 'error' })
+        }
+    }) 
+}
+</script>
+<template>
+    <view class="record-box">
+        <view class="customerName">{{ data.customerName }}</view>
+        <view class="orderCode">{{ data.workOrderCode }}</view>
+        <view class="contact">
+            <view class="name">联系人姓名：{{ data.contactsName }}</view>
+            <view class="mobile">联系电话：{{ data.contactsMobile || '--' }}</view>
+        </view>
+        <view class="deviceBox" v-for="dItem in data.deviceList"
+            :key="dItem.id" @click="handleClickDevice(dItem)">
+            <view class="name">{{ dItem.deviceName }}</view>
+            <view class="code">{{ dItem.deviceCode }}</view>
+            <view v-if="type==='positioning'" class="address">
+                <view class="label">设备地址：</view><view class="address-detail">
+                {{ (data?.provinceName !== null && data?.provinceName) ?
+                    `${data?.provinceName} ${data?.cityName} ${data?.areaName} ${dItem?.address}`
+                    : `空`}}
+                </view>
+                <!-- <image class="address-icon" src="/static/img/navigation.png" /> -->
+            </view>
+            <view v-else class="address">设备地址：<view class="address-detail">
+                {{ (dItem?.provinceName !== null && dItem?.provinceName) ?
+                    `${dItem?.provinceName} ${dItem?.cityName} ${dItem?.areaName} ${dItem?.address}`
+                    : `空` }}
+            </view>
+            </view>
+            <StatusTimeline :status="dItem.status" />
+        </view>
+    </view>
+</template>
+
+<style scoped>
+.record-box {
+    background-color: #fff;
+    padding: 32rpx;
+    .customerName {
+        font-weight: bold;
+        font-size: 32rpx;
+        color: #000000;
+        line-height: 48rpx;
+    }
+
+    .orderCode {
+        margin-top: 16rpx;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 34rpx;
+    }
+
+    .contact {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 16rpx;
+        margin-bottom: 32rpx;
+        font-size: 28rpx;
+        line-height: 40rpx;
+    }
+
+    .deviceBox {
+        margin-bottom: 32rpx;
+        padding: 16rpx;
+        background-color: rgba(0, 0, 0, 0.02);
+        border-radius: 8rpx;
+
+        .name {
+            margin-bottom: 16rpx;
+            font-weight: bold;
+            font-size: 28rpx;
+            color: #000000;
+            line-height: 40rpx;
+        }
+
+        .code {
+            margin-bottom: 16rpx;
+            font-size: 14px;
+            color: rgba(0, 0, 0, 0.4);
+            line-height: 34rpx;
+        }
+
+        .address {
+            display: flex;
+            justify-content: center;
+            font-size: 28rpx;
+            line-height: 42rpx;
+            margin-bottom: 16rpx;
+            color: rgba(0,0,0,0.9);
+            .label{
+                min-width: 132rpx;
+            }
+            .address-detail{
+                flex: 1;
+                width: 380rpx;
+                color: rgba(0,0,0,0.65);
+                font-size: 26rpx;
+                line-height: 42rpx;
+            }
+            .address-icon {
+                width: 48rpx;
+                height: 48rpx;
+                image-rendering: -webkit-optimize-contrast; /* 优化图片渲染 */
+                image-rendering: pixelated; /* 像素化渲染 */
+                transform: translateZ(0); /* 开启GPU加速 */
+            }
+        }
+    }
+}
+</style>

package/src/pages/installtion/StatusTimeline.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+const props = defineProps({
+    data: {
+        type: Object,
+        default: {}
+    },
+    status: {
+        type: Number,
+        default: 0 
+    }
+})
+const items = [
+    { text: '齐料清点', value: '1' },
+    { text: '安装完成', value: '2' },
+    { text: '验收完成', value: '3' }, 
+]
+const timelineWidth = computed(() => {
+    if (props.status === 0) {
+        return '0%' 
+    } 
+    if (props.status == 1) {
+        return '23%'
+    }
+    if (props.status == 2) {
+        return '65%' 
+    }
+    return `88%`
+})
+</script>
+<template>
+    <view class="timeline-box">
+        <view class="timeline" :style="{ width: timelineWidth }"></view>
+        <view class="unactive-timeline"></view>
+        <view class="dot-box" v-for="(item, index) in items" :key="item.value">
+            <img class="dot" :src="index < status ? '/static/img/active_dot.png': '/static/img/unActive_dot.png'" />
+            <view class="text" :style="{ color: index < status ? '#1D6FE9': 'rgba(0,0,0,0.4)'}">
+                {{ item.text }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<style scoped>
+.timeline-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    .dot-box{
+        text-align: center;
+        .text{
+            font-size: 24rpx;
+            color: #1D6FE9;
+            line-height: 34rpx;
+       }
+    }
+    .dot {
+        position: relative;
+        z-index: 4;
+        margin: 0 auto;
+        width: 32rpx;
+        height: 32rpx;
+    }
+    .unactive-timeline {
+        position: absolute;
+        z-index: 1;
+        top: 17rpx;
+        left: 34rpx;
+        width: 88%;
+        height: 8rpx;
+        background: #E7E7E7;
+        border-radius: 4rpx;
+    }
+    .timeline {
+        position: absolute;
+        z-index: 2;
+        top: 17rpx;
+        left: 34rpx;
+        width: 88%;
+        height: 8rpx;
+        background: #1D6FE9;
+        border-radius: 4rpx;
+    }
+}
+</style>