bigdata_WX/pages/identifyPest/economicsPlant/economicsPlant.vue

<template>
  <view>
    <!-- 搜索 -->
    <!-- <u-search :disabled="true" margin="15rpx auto" :input-style="{width: '20rpx'}" input-align="center" :animation="true"
		 placeholder="搜索作物名称" shape="square" :show-action="false" v-model="keyword"></u-search> -->

    <!-- 作物列表 -->
    <view class="plantList_ul">
      <!-- 上次定位 -->
      <view class="plantList_li" v-if="lastTimeShow">
        <view class="plantList_tlt"> 上次选择 </view>

        <view class="plantList_li_ul">
          <view
            class="plantList_li_List"
            @click="
              recognizeData(
                allPlantData[lastTimeIndex].num,
                allPlantData[lastTimeIndex].name,
                lastTimeIndex
              )
            "
          >
            <image
              :src="
                'http://web.hnyfwlw.com:58003/bigservers/' +
                allPlantData[lastTimeIndex].img
              "
              mode=""
            ></image>
            <view class="">
              {{ allPlantData[lastTimeIndex].name }}
            </view>
          </view>
        </view>
      </view>

      <!-- 全部 -->
      <view class="plantList_li">
        <view class="plantList_tlt"> 全部 </view>

        <view class="plantList_li_ul">
          <view
            @click="recognizeData(item.num, item.name, index)"
            class="plantList_li_List"
            v-for="(item, index) in allPlantData"
            :key="index"
          >
            <image
              :src="'http://web.hnyfwlw.com:58003/bigservers/' + item.img"
              mode=""
            ></image>
            <view class="">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>

      <!-- 其他 -->
      <!-- <view class="plantList_li">
				<view class="plantList_tlt">
					其他
					<text>(此项目开发中，结果可能会有误差)</text>
				</view>

				<view class="plantList_li_ul">
					<view class="plantList_li_List" @click="restsData()">
						<image :src="'http://web.hnyfwlw.com:58003/bigservers/' + 'images/detail_9.png'" mode=""></image>
						<view class="">
							其他
						</view>
					</view>
				</view>
			</view> -->
    </view>

    <!-- 裁剪组件 -->
    <kps-image-cutter
      @ok="axiosData"
      @cancel="oncancle"
      :url="url"
      :fixed="false"
      :blob="false"
      :maxWidth="500"
      :maxHeight="500"
    ></kps-image-cutter>

    <!-- 弹框 -->
    <u-modal
      :mask-close-able="true"
      @cancel="insectData('1')"
      @confirm="insectData('2')"
      confirm-text="虫害"
      cancel-text="病害"
      v-model="show"
      :show-cancel-button="true"
      :content="content"
    ></u-modal>

    <!--loading-->
    <ourLoading v-show="loadingShow" isFullScreen active text="识别中..." />
  </view>
</template>

<script>
import kpsImageCutter from '@/components/ksp-image-cutter/ksp-image-cutter.vue'; //裁剪图片
export default {
  data() {
    return {
      keyword: '', //搜索
      show: false,
      content: '请选择测试虫害还是病害',
      allPlantData: [
        // {
        // 	'name': '棉花',
        // 	'img': 'images/plant_2.jpg',
        // 	'num': '21'
        // },
        // {
        // 	'name': '茶',
        // 	'img': 'images/plant_1.jpg',
        // 	'num': '22'
        // },
        {
          name: '油菜',
          img: 'images/plant_3.jpg',
          num: '13',
        },
      ],
      url: '', //裁剪
      serialNum: '', //获取到作物序号码
      urlData: {}, //图片全部信息
      urlName: '', //识别失败作物名称
      insectNum: '', //区别病虫害  1病 2虫
      lastTimeShow: false, //是否显示上次选择
      lastTimeIndex: null, //上次选择下标
      loadingShow: false, //加载
    };
  },
  methods: {
    recognizeData(num, name, index) {
      console.log(index);
      uni.setStorage({
        key: 'lastTime',
        data: index,
        success: function () {
          console.log('success');
        },
      });
      this.urlName = name;
      this.insectNum = '';
      this.serialNum = num;
      console.log('-------------------------------- recogonization');
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          // 设置url的值，显示控件
          console.log(res.tempFiles);
          this.urlData = res;
          this.url = res.tempFilePaths[0];
          this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
        },
        fail(err) {
          console.log(err, '------------------------ choose image');
        },
      });
    },

    // 取消上传
    oncancle() {
      this.url = '';
    },

    // 确定上传
    axiosData(ev) {
      setTimeout(() => {
        uni.showLoading({
          title: '识别中。。。',
        });
      });
      let that = this;
      if (that.serialNum == '' && that.insectNum !== '') {
        // 老接口
        var url = 'other_discern';
        var num = that.insectNum;
      } else if (that.serialNum !== '' && that.insectNum == '') {
        //新接口
        var url = 'discern';
        var num = that.serialNum;
      }

      uni.uploadFile({
        url: 'https://wx.hnyfwlw.com/bigservers/' + url + '?type=' + num,
        fileType: 'image',
        file: this.urlData.tempFiles[0],
        filePath: this.urlData.tempFiles[0].path,
        name: 'img_addr',
        success(res) {
          uni.hideLoading();
          that.url = '';
          // 判断是否识别成功 -新接口
          // if (data.code == 200) {
          if (res.statusCode !== 500) {
            var data = JSON.parse(res.data);
            if (data.returnResult.returnStatus == 1) {
              // 成功
              var img = [];
              img.push(that.urlFile);
              if (that.urlName == '其他') {
                var f = JSON.parse(res.data);
                if (
                  f.data == null ||
                  f.data[0].prevention == '[防治方法] null'
                ) {
                  console.log('失败');
                  uni.navigateTo({
                    url:
                      '/pages/identifyPest/recognizeFail/recognizeFail?data=' +
                      img +
                      '&name=' +
                      that.urlName,
                  });
                } else {
                  uni.navigateTo({
                    url:
                      '/pages/identifyPest/recognizeSucceedWorn/recognizeSucceedWorn?data=' +
                      JSON.stringify(data.data) +
                      '&name=' +
                      that.urlName +
                      '&img=' +
                      img,
                  });
                  console.log('成功');
                }
                console.log('老接口');
              } else {
                uni.navigateTo({
                  url:
                    '/pages/identifyPest/recognizeSucceed/recognizeSucceed?data=' +
                    JSON.stringify(data.returnResult),
                });
                console.log('新接口');
              }
            } else if (data.code !== 200) {
              //失败
              var img = [];
              img.push(that.urlFile);
              uni.navigateTo({
                url:
                  '/pages/identifyPest/recognizeFail/recognizeFail?data=' +
                  img +
                  '&name=' +
                  that.urlName,
              });
            }
          } else {
            //失败
            var img = [];
            img.push(that.urlFile);
            uni.navigateTo({
              url:
                '/pages/identifyPest/recognizeFail/recognizeFail?data=' +
                img +
                '&name=' +
                that.urlName,
            });
          }
        },
        fail(err) {
          var img = [];
          img.push(that.urlFile);
          uni.navigateTo({
            url:
              '/pages/identifyPest/recognizeFail/recognizeFail?data=' +
              img +
              '&name=' +
              that.urlName,
          });
        },
        complete(com) {
          that.loadingShow = false;
		  uni.hideLoading()
        },
      });
    },

    // 其他--老识别接口
    restsData() {
      this.show = true;
    },
    // 确定
    insectData(num) {
      this.urlName = '其他';
      this.serialNum = '';
      this.insectNum = num;
      uni.chooseImage({
        count: 1,
        success: (res) => {
          // 设置url的值，显示控件
          this.urlData = res;
          this.url = res.tempFilePaths[0];
          this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
        },
      });
    },
  },
  components: {
    kpsImageCutter,
  },

  onShow() {
    var that = this;
    uni.getStorage({
      key: 'lastTime',
      success: function (res) {
        that.lastTimeShow = true;
        console.log(res.data);
        that.lastTimeIndex = res.data;
      },
      fail: function (err) {
        that.lastTimeShow = false;
        console.log(err);
      },
    });
  },
};
</script>

<style lang="scss">
// 搜索
uni-view,
uni-text {
  // width: 740rpx;
  // margin: 0 auto;
}

// 作物选择
.plantList_ul {
  .plantList_li {
    margin: 55rpx 0 55rpx 0;

    .plantList_tlt {
      font-weight: 550;
      font-size: 16px;
      width: 700rpx;
      margin: 0 auto;

      text {
        color: #7e7e7e;
        font-size: 12px;
      }
    }

    .plantList_li_ul {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10rpx;

      .plantList_li_List {
        margin: 10rpx 0 0 18rpx;
        width: 150rpx;

        image {
          width: 130rpx;
          height: 130rpx;
          border-radius: 55px;
          margin: 0 auto;
          display: block;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        }

        view {
          width: 150rpx;
          color: #646464;
          text-align: center;
          margin: 10rpx 0 0 0;
          font-size: 13px;
        }
      }
    }
  }
}
</style>