usky-web-mobile/src/pages/business/mhxf/xunJian/plan/components/siteDetails.vue

<template>
  <scroll-view scroll-y>
    <view>
      <view class="whiteBackgroundColor" style="display: flex; padding: 15px; margin-bottom: 15px">
        <view style="margin-right: 15px; display: flex">
          <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="siteList.siteType == 1" shape="circle"></u-image>

          <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/NFC.png" v-if="siteList.siteType == 2" shape="circle"></u-image>
        </view>
        <view>
          <view style="font-size: 15px; margin-bottom: 2px">
            {{ siteList.siteName }}
          </view>
          <view style="font-size: 13px; color: #a1a1a1"> {{ siteList.contentCount }}项内容 </view>
        </view>
        <view style="margin: auto"></view>
        <view style="margin: auto 0">
          <!-- {{ siteList.siteStatus == null }} -->
          <view style="font-size: 15px; color: #30bb00">已定位</view>
          <!-- #f07d28 -->
        </view>
      </view>

      <view class="whiteBackgroundColor" style="margin-bottom: 15px; padding: 15px">
        <view class="siteHeader">
          <uni-section title="上报现场" type="line"></uni-section>
        </view>
        <view style="display: flex; flex-wrap: wrap">
          <view class="uploadView" v-for="record in siteList.recordPictureList" :key="record">
            <view class="uploadUimage">
              <u-image width="100%" height="100%" :src="record.pictureUrl"></u-image>
            </view>

            <view v-if="siteList.inspectionStatus == 1" class="uploadViewClose" @click="uploadViewClose(record)">
              <u-icon name="close" color="#ffffff" size="12"></u-icon>
            </view>
          </view>
          <view :class="siteList.inspectionStatus == 2 ? 'uploadView upload-buttom uploadDisabled' : 'uploadView upload-buttom'" @click="uploadClick">
            <u-icon style="margin: auto" name="plus" color="#909399" size="28"></u-icon>
          </view>
        </view>
      </view>

      <view class="whiteBackgroundColor" style="margin-bottom: 15px; padding: 15px; height: 170px; max-height: 170px">
        <view class="siteHeader">
          <uni-section title="备注" type="line"></uni-section>
        </view>
        <view style="height: calc(100% - 25px)">
          <span v-if="siteList.inspectionStatus == 2">
            {{ siteList.remarks }}
          </span>

          <u-textarea v-if="siteList.inspectionStatus == 1" style="height: 100%" v-model="siteList.remarks" placeholder="请输入备注" maxlength="50"></u-textarea>
        </view>
      </view>

      <view class="whiteBackgroundColor" style="padding: 15px">
        <view class="siteHeader">
          <uni-section title="消防设施分布图" type="line"></uni-section>
        </view>
        <view>
          <u-image width="100%" :src="siteList.pictureUrl"></u-image>
        </view>
      </view>

      <view style="margin-bottom: 70px"></view>
    </view>
    <view style="position: fixed; left: 0; right: 0; bottom: 0; padding: 15px">
      <view>
        <u-button v-if="siteList.inspectionStatus == 1" type="primary" style="width: 100%; height: 40px; font-size: 14px" @click="buttonClick()" shape="circle"> 下一步 </u-button>

        <u-button v-if="siteList.inspectionStatus == 2" type="primary" style="width: 100%; height: 40px; font-size: 14px" @click="buttonClick()" shape="circle"> 查看巡检项 </u-button>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive } from "vue";
import useXunJianStore from "@/store/modules/xunJian";

import { uploadAvatar, siteDetails } from "@/api/business/mhxf/xunJian/plan.js";

const settingsStore = useXunJianStore(); //全局变量值Store

/**
 * @站点详情
 * @api接口查询
 * @siteList站点详情信息存储
 * @contentList内容详情信息存储
 */
const siteList = ref([]);
const contentList = ref([]);
function selectAPI() {
  siteDetails({
    siteId: settingsStore.siteId,
    siteNubmber: settingsStore.siteNubmber,
    planSonId: settingsStore.planSonId,
  }).then((res) => {
    if (res.status == "SUCCESS") {
      contentList.value = res.data.contentList;
      siteList.value = res.data.siteList[0];
      siteList.value.recordPictureList = [];

      contentList.value.forEach((el) => {
        el.remarksBool = false;
        el.contentOptionListValue = "";
        el.contentOptionListValue1 = [];
      });
    } else {
    }
  });
}

/**
 * @按钮点击事件
 * @下一步
 * @查看巡检项
 */
function buttonClick() {
  settingsStore.contentArray = {
    contentList: contentList.value,
    siteList: siteList.value,
  };
  uni.navigateTo({
    url: "/pages/business/mhxf/xunJian/plan/components/content",
  });
}

/**
 * @upload图片上传
 * @点击事件
 */
function uploadClick() {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择、摄像头
    success: function (res) {
      uploadApi(res);
    },
  });
}

/**
 * @upload图片上传
 * @api接口请求
 */
async function uploadApi(res) {
  let data = { name: "file", filePath: res.tempFilePaths[0] };

  uploadAvatar(data).then((response) => {
    siteList.value.recordPictureList.push({
      name: response.data.name,
      pictureUrl: response.data.url,
    });
  });
}

/**
 * @upload图片上传
 * @点击事件
 * @删除事件
 */
function uploadViewClose(el) {
  siteList.value.recordPictureList.splice(siteList.value.recordPictureList.indexOf(el), 1);
}

onLoad((options) => {
  if (JSON.stringify(settingsStore.contentArray) == "{}") {
    selectAPI();
  } else {
    contentList.value = settingsStore.contentArray.contentList[0];
    siteList.value = settingsStore.contentArray.siteList;
  }
});

onMounted(() => {});
</script>

<style scoped>
.siteHeader {
  display: flex;
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}
</style>

<!--自定义图片上传功能样式-->
<style scoped>
.uploadView {
  position: relative;
  overflow: hidden;
  width: calc(33% - 10px);
  height: 110px;
  margin: 0 15px 15px 0;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.uploadView .uploadUimage {
  height: 100%;
}

.uploadView .uploadUimage > uni-view {
  height: 100%;
}

.uploadViewClose {
  position: absolute;
  background-color: #409eff;
  transform: rotate(45deg);
  width: 40px;
  height: 24px;
  text-align: center;
  right: -15px;
  top: -6px;
  cursor: pointer;
}

.uploadViewClose .u-icon,
.uploadViewClose .el-icon {
  font-size: 12px;
  margin-top: 4px;
  margin-left: 10px;
  transform: rotate(-45deg);
  color: #ffffff;
}

.uploadView img {
  width: 100%;
}

.upload-buttom {
  display: flex;
  font-size: 28px;
  color: #909399;
  border: 1px dashed #d9d9d9;
  background-color: #fafafa;
}

.uploadView:nth-child(3n) {
  margin: 0 !important;
}

.upload-buttom:hover {
  border: 1px dashed #409eff;
}

:deep(.uploadDisabled) {
  display: none !important;
}
</style>