feat: 移栽区域介绍

mm/mm.config.js

@@ -8,6 +8,17 @@ const { wrapApiData } = require(`./util.js`)
  */
 module.exports = async (util) => {
   const joi = await util.tool.generate.initPackge(`joi`)
+  util.libObj.mockjs.Random.extend({
+    image2: function () {
+      return this.pick(
+        `https://dummyimage.com/${this.integer(100, 1000)}x${this.integer(
+          100,
+          1000
+        )}/${this.hex()}/${this.hex()}.jpg`.replace(/#/g, ``)
+      )
+    },
+  })
+  console.log(`xxx`, util.libObj.mockjs.Random.image2())
   return {
     plugin: [util.plugin.validate, util.plugin.apiDoc],
     guard: false,
@@ -194,6 +205,7 @@ module.exports = async (util) => {
             .object({
               q: joi.string().description(`模糊搜索`),
             })
+            .unknown(true)
             .description(`搜索项`),
         },
         async action(req, res, next) {
@@ -338,17 +350,17 @@ module.exports = async (util) => {
         {
           'id|+1': 1,
           名称: `@county()@ctitle()基地`,
-          温度: `@integer(0, 40)`,
+          温度: [`@integer(0, 20)`, `@integer(20, 40)`],
+          天气: `@pick(多云, 少云, 晴, 雨, 雪, 雾, 暴雨)`,
           管理人员: `@cname`,
           联系电话: `@phone`,
           简介: `<p>@cparagraph()</p><p>@cparagraph()</p><p>@cparagraph()</p><p>@cparagraph()</p><p>@cparagraph()</p><p>@cparagraph()</p>`,
           面积: `@integer(9e3, 9e4)`,
           烟农数量: `@integer(10, 999)`,
-          天气: `@pick(多云, 少云, 晴, 雨, 雪, 雾, 暴雨)`,
           已种植: `@integer(9, 9e4)`,
           未种植: `@integer(9, 9e4)`,
           地址: `@county()@ctitle()`,
-          '图片|1-5': [`@image`],
+          '图片|3-5': [`@image2()`],
           完成率() {
             return (this.已种植 / (this.已种植 + this.未种植)) * 100
           },
@@ -362,11 +374,8 @@ module.exports = async (util) => {
           ip: `@ip`,
           投入时间: `@date`,
           联系电话: `@phone`,
-          '图片|1-5': [`@image`],
-          状态: `@pick(运行中, 待机, 故障)`,
-          完成率() {
-            return (this.已种植 / (this.已种植 + this.未种植)) * 100
-          },
+          '图片|1-5': [`@image2()`],
+          状态: `@pick(运行中, 关机, 故障)`,
         },
       ],
     }),

src/assets/js/utils.js

@@ -15,4 +15,50 @@ export function screenSize(editorDom) {
     yScale = screenHeight / defHeight;
     editorDom.style.cssText += ';transform: scale(' + xScale + ',' + yScale + ')';
   })
+}
+
+export function getWeather(name) {
+  const list = [
+    {
+      name: `云`,
+      icon: `icon-duoyun`,
+    },
+
+    {
+      name: `雪`,
+      icon: `icon-xue`,
+    },
+
+    {
+      name: `晴`,
+      icon: `icon-qing`,
+    },
+
+    {
+      name: `雨`,
+      icon: `icon-yu`,
+    },
+
+    {
+      name: `雪`,
+      icon: `icon-xue`,
+    },
+
+    {
+      name: `雾`,
+      icon: `icon-wu`,
+    },
+
+    {
+      name: `雷`,
+      icon: `icon-leidian`,
+    },
+
+    {
+      name: `风`,
+      icon: `icon-feng`,
+    },
+  ]
+  const item = list.find((item) => name.includes(item.name)) || list[0]
+  return item
 }

src/components/bgBox/index.vue

@@ -57,55 +57,13 @@
 </template>
 
 <script>
-import { screenSize } from '@/assets/js/utils'
+import { screenSize, getWeather } from '@/assets/js/utils'
 
 const apiList = [
   {
     key: `currentWeather`,
     fn(data, arg) {
-      const item =
-        [
-          {
-            name: `云`,
-            icon: `icon-duoyun`,
-          },
-
-          {
-            name: `雪`,
-            icon: `icon-xue`,
-          },
-
-          {
-            name: `晴`,
-            icon: `icon-qing`,
-          },
-
-          {
-            name: `雨`,
-            icon: `icon-yu`,
-          },
-
-          {
-            name: `雪`,
-            icon: `icon-xue`,
-          },
-
-          {
-            name: `雾`,
-            icon: `icon-wu`,
-          },
-
-          {
-            name: `雷`,
-            icon: `icon-leidian`,
-          },
-
-          {
-            name: `风`,
-            icon: `icon-feng`,
-          },
-        ].find((item) => data.天气.includes(item.name)) || {}
-
+      const item = getWeather(data.天气)
       this.weather = data
       this.weather.天气图标 = item.icon || `icon-duoyun`
     },

src/views/page3/index.vue

@@ -31,6 +31,7 @@
         />
       </div>
       <leftBox class="lefBox" />
+      <leftBox2 class="lefBox2" />
     </div>
   </bgBox>
 </template>
@@ -40,6 +41,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 
 import bgBox from '@/components/bgBox/index.vue'
 import leftBox from './leftBox.vue'
+import leftBox2 from './leftBox2.vue'
 import { Button, DatePicker, RadioGroup, Radio } from 'element-ui'
 import Vue from 'vue'
 Vue.use(Button)
@@ -50,6 +52,7 @@ Vue.use(DatePicker)
 export default {
   components: {
     leftBox,
+    leftBox2,
     bgBox,
   },
   data() {
@@ -84,12 +87,18 @@ export default {
       justify-content: space-between;
       align-items: center;
     }
-    .lefBox {
+    .lefBox,
+    .lefBox2 {
       position: absolute;
       z-index: 10;
-      left: 47px;
       top: 120px;
     }
+    .lefBox {
+      left: 458px;
+    }
+    .lefBox2 {
+      left: 47px;
+    }
     .query {
       font-size: 14px;
       display: flex;

src/views/page3/item.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="list">
     <div class="containerBox" v-for="(item, index) in list" :key="index">
-      <div class="left">
-        <p class="title">{{ item.名称 }}</p>
-        <p>种植数量：{{ item.已种植 }}</p>
-        <p>目标完成率：{{ item.完成率 }}%</p>
-        <p>地址：{{ item.地址 }}</p>
+      <div class="textBox">
+        <p class="title">
+          <span>{{ item.名称 }}</span>
+          <img :src="状态[item.状态]" alt="" />
+        </p>
+        <p>设备IP：{{ item.ip }}</p>
+        <p>管理员：{{ item.管理人员 }}</p>
+        <p>联系方式：{{ item.联系电话 }}</p>
       </div>
-      <div class="right">
+      <div class="imgBox">
         <img :src="item.图片[0]" alt="风景图" />
       </div>
     </div>
@@ -15,10 +18,16 @@
 </template>
 
 <script>
+import 故障 from '@/assets/img2/种植分析详情/故障状态.png'
+import 关机 from '@/assets/img2/种植分析详情/关机.png'
+import 运行中 from '@/assets/img2/种植分析详情/关机_1.png'
+
 export default {
   name: `LayoutExample`,
   data() {
-    return {}
+    return {
+      状态: { 故障, 关机, 运行中 },
+    }
   },
   props: {
     list: {
@@ -46,11 +55,24 @@ export default {
     background: rgba(168, 168, 168, 0.15);
     backdrop-filter: blur(8px);
     padding: 10px;
-    .left {
+    .textBox {
+      order: 2;
+      width: 100%;
       .title {
+        display: inline-block;
         font-size: 20px;
+        min-width: 100%;
         line-height: 1.2em;
         color: #fff;
+        padding-right: 20px;
+        position: relative;
+        img {
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+        padding-bottom: 6px;
+        border-bottom: 1px solid rgba(151, 151, 151, 0.3);
       }
       p {
         padding: 0;
@@ -61,8 +83,9 @@ export default {
         margin-bottom: 5px;
       }
     }
-    .right {
-      padding-left: 10px;
+    .imgBox {
+      order: 1;
+      padding-right: 10px;
       img {
         width: 105px;
         height: 105px;

src/views/page3/leftBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <boxTop />
+    <boxTop title="打孔机管理" />
     <div class="leftBox">
       <div class="search-bar">
         <input
@@ -15,7 +15,7 @@
           <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
         </div>
       </div>
-      <item :list="leftBox.list" />
+      <item class="listItem" :list="leftBox.list" />
     </div>
   </div>
 </template>
@@ -31,7 +31,7 @@ export default {
         input: ``,
         list: [],
         sortIndex: 0,
-        sortList: [`已种植`, `完成率`],
+        sortList: [`投入时间`, `状态`],
       },
     }
   },
@@ -45,7 +45,7 @@ export default {
   methods: {
     async searchFn() {
       console.log(`search`, this.leftBox.input)
-      const data = await this.$http.get(`/base`, {
+      const data = await this.$http.get(`/holePunchingMachine`, {
         params: {
           _sort:
             this.leftBox.sortList[
@@ -72,9 +72,12 @@ export default {
 
 <style lang="less" scoped>
 .leftBox {
-  height: 845px;
   background: rgba(48, 42, 42, 0.3);
   backdrop-filter: blur(8px);
+
+  .listItem {
+    height: 800px;
+  }
   .search-bar {
     display: flex;
     align-items: center;
@@ -106,7 +109,6 @@ export default {
       line-height: 35px;
       outline: none;
     }
-
     .icons {
       display: flex;
       align-items: center;

src/views/page3/leftBox2.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <boxTop title="移栽区域介绍" />
+    <div class="leftBox" v-if="leftBox.名称">
+      <div class="title">
+        <div class="name">{{ leftBox.名称 }}</div>
+        <div class="sub">
+          <i :class="[`iconfont`, leftBox.天气图标]"></i>
+          <img src="@/assets/img2/综合总览/编组 6.png" alt="" />
+          {{ leftBox.温度[0] }}℃ - {{ leftBox.温度[1] }}℃
+        </div>
+      </div>
+      <div class="imgBox">
+        <div
+          class="img big"
+          :style="`background-image: url(${leftBox.图片[0]})`"
+        ></div>
+        <div class="small">
+          <div
+            class="img"
+            :style="`background-image: url(${leftBox.图片[1]})`"
+          ></div>
+          <div
+            class="img"
+            :style="`background-image: url(${leftBox.图片[2]})`"
+          ></div>
+        </div>
+      </div>
+      <div class="infoBox">
+        <p>区域管理人员：{{ leftBox.管理人员 }}</p>
+        <p>区域联系电话：{{ leftBox.联系电话 }}</p>
+        <p>区域地址：{{ leftBox.地址 }}</p>
+        <p>区域面积(M2)：{{ leftBox.面积 }}</p>
+        <p>烟农数量：{{ leftBox.烟农数量 }}</p>
+      </div>
+      <div class="infoBox">
+        <h2>区域简介</h2>
+        <div class="htmlBox" v-html="leftBox.简介"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import item from './item.vue'
+import boxTop from '@/components/boxTop/index.vue'
+import { getWeather } from '@/assets/js/utils'
+
+export default {
+  data() {
+    return {
+      leftBox: {},
+    }
+  },
+  components: {
+    boxTop,
+  },
+  async created() {
+    this.infoFn()
+  },
+  methods: {
+    async infoFn() {
+      const baseId = this.$route.query.baseId || 1
+      const data = await this.$http.get(`/base/${baseId}`)
+      this.leftBox = data
+      this.leftBox.天气图标 =
+        getWeather(this.leftBox.天气).icon || `icon-duoyun`
+      console.log(`data`, data, this.leftBox)
+    },
+    clearFn() {
+      this.infoFn()
+      console.log(`clearFn`)
+    },
+    sortFn() {
+      this.infoFn()
+      console.log(`sortFn`)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.leftBox {
+  height: 845px;
+  width: 401px;
+  background: rgba(48, 42, 42, 0.3);
+  backdrop-filter: blur(8px);
+  padding: 15px;
+  box-sizing: border-box;
+  .title {
+    padding: 10px;
+    box-sizing: border-box;
+    border: 2px solid rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(16px);
+    min-height: 73px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 2px solid rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(16px);
+    .name {
+      font-size: 20px;
+    }
+    .sub {
+      padding-top: 6px;
+      & > * {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .iconfont {
+        font-size: 22px;
+        margin-right: 6px;
+      }
+      img {
+        height: 22px;
+        margin-right: 6px;
+      }
+    }
+  }
+  .imgBox {
+    display: flex;
+    justify-content: center;
+    margin-top: 15px;
+    .img {
+      background-position: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+    .big {
+      width: 228px;
+      height: 196px;
+      margin-right: 10px;
+    }
+    .small {
+      width: 113px;
+      .img {
+        width: 113px;
+        height: 93px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .infoBox {
+    background: rgba(255, 255, 255, 0.03);
+    border: 2px solid rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(16px);
+    padding: 10px;
+    margin-top: 15px;
+    h2 {
+      padding-bottom: 6px;
+      border-bottom: 1px solid #979797;
+    }
+    .htmlBox {
+      ::v-deep p {
+        text-indent: 2em;
+      }
+      padding: 10px;
+      height: 330px;
+      overflow: auto;
+    }
+  }
+}
+</style>