feat: 电商平台分析

src/components/Customize/Complex histograms.vue

@@ -29,6 +29,7 @@ export default {
       type: String,
       default: `200px`,
     },
+
     area: {
       type: Array,
     },

src/components/Customize/evaluationStatistics/index.vue

@@ -0,0 +1,180 @@
+<!-- 圆柱柱状图 -->
+<template>
+  <div class="oblongBox" :style="{height:barHeight }">
+    <div class="title">
+      <span class="label">评价总额</span>
+      <span class="value">{{ total }}</span>
+      <span style="font-size: 16px;margin: 0 10px">26.5%</span>
+      <img v-if="isHoist" src="@/assets/img/hoist.png">
+      <img v-else src="@/assets/img/decline.png">
+    </div>
+    <div class="appraiseBox">
+      <div class="appraiseItem">
+        <div class="green total">11231</div>
+        <img src="@/assets/img/goodReviews.png">
+        <div>好评</div>
+      </div>
+      <div class="appraiseItem">
+        <div class="blue total">11231</div>
+        <img src="@/assets/img/neutralReview.png">
+        <div>中评</div>
+      </div>
+      <div class="appraiseItem">
+        <div class="red total">11231</div>
+        <img src="@/assets/img/badReviews.png">
+        <div>差评</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+
+  props: {
+    barHeight: {
+      type: String,
+      default: `200px`,
+    },
+    area: {
+      type: Array,
+    },
+    total: {
+      type: String || Number,
+    },
+    dataArray: {
+      type: Array,
+    },
+    unit: {
+      type: String,
+    },
+  },
+  mounted() {
+    this.getEchart()
+  },
+  watch: {
+    dataArray() {
+      this.getEchart()
+    },
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(`cylindrical`))
+
+      this.option = {
+        xAxis: {
+          axisLabel: {
+
+            rotate: 45,
+            color: '#29d0d0'
+          },
+          type: 'category',
+          data: ['商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#00FFE3"
+                  },
+                  {
+                    offset: 1,
+                    color: "#4693EC"
+                  }
+                ])
+              }
+            },
+          }
+        ]
+      }
+      myChart.setOption(this.option, true)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.oblongBox {
+  width: 460px;
+  height: 234px;
+  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
+  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);
+
+  .chartsdom {
+    position: relative;
+    width: 100%;
+    height: 105%;
+  }
+
+  .title {
+    margin-top: 20px;
+    margin-left: 30px;
+    display: flex;
+    align-items: center;
+
+    .label {
+      font-weight: 500;
+      font-size: 16px;
+      color: #FFFFFF;
+      margin: 0 12px;
+    }
+
+    .value {
+      font-weight: bold;
+      font-size: 24px;
+      background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+
+.appraiseBox {
+  margin-top: 55px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+
+  .appraiseItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 100px;
+      height: 100px;
+    }
+    .total{
+      font-size: 24px;
+    }
+    .green {
+      color: #4DFFA1;
+    }
+
+    .blue {
+      color: #60B3FF;
+    }
+
+    .red {
+      color: #ED6363;
+    }
+  }
+
+}
+</style>

src/components/Customize/liquidfill.vue

@@ -0,0 +1,156 @@
+<!-- 圆柱柱状图 -->
+<template>
+  <div class="oblongBox" :style="{height:barHeight }">
+    <div class="title">
+      <span class="label">综合评价</span>
+      <span class="value">{{ total }}</span>
+    </div>
+    <div class="chartsdom" :id="id">
+    </div>
+    <div style="text-align: center;font-size: 16px">评价满意度</div>
+  </div>
+</template>
+
+<script>
+import '@/assets/js/echarts-liquidfill.min'
+
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+
+  props: {
+    id: {
+      type: String,
+      default: ``,
+    },
+    barHeight: {
+      type: String,
+      default: `200px`,
+    },
+    area: {
+      type: Array,
+    },
+    total: {
+      type: String || Number,
+    },
+    dataArray: {
+      type: Array,
+    },
+    unit: {
+      type: String,
+    },
+  },
+  mounted() {
+    this.getEchart()
+  },
+  watch: {
+    dataArray() {
+      this.getEchart()
+    },
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(this.id))
+      var value = 0.43
+      this.option = {
+        series: [
+          {
+            type: 'liquidFill', //水位图
+            radius: '80%', //显示比例
+            center: ['50%', '45%'], //中心点
+            amplitude: 3, //水波振幅
+            data: [value, value, value], // data个数代表波浪数
+            color: [
+              {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#446bf5',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2ca3e2',
+                  },
+                ],
+                globalCoord: false,
+              },
+            ], //波浪颜色
+            backgroundStyle: {
+              borderWidth: 1, //外边框
+              // borderColor: '#23cc72', //边框颜色
+              color: 'RGBA(51, 66, 127, 0.7)', //边框内部填充部分颜色
+            },
+            label: {
+              //标签设置
+              position: ['50%', '25%'],
+              formatter: value * 100 + '%', //显示文本,
+              textStyle: {
+                fontSize: '24px', //文本字号,
+                color: '#fff',
+              },
+            },
+            outline: {
+              // show: false
+              borderDistance: 0,
+              itemStyle: {
+                borderWidth: 2,
+                borderColor: '#112165',
+              },
+            },
+          },
+        ],
+      };
+
+      myChart.setOption(this.option, true)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.oblongBox {
+  width: 460px;
+  height: 234px;
+  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
+  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);
+
+  .chartsdom {
+    position: relative;
+    width: 100%;
+    height: 70%;
+  }
+
+  .title {
+    margin-top: 20px;
+    margin-left: 30px;
+    display: flex;
+    align-items: center;
+
+    .label {
+      font-weight: 500;
+      font-size: 16px;
+      color: #FFFFFF;
+      margin: 0 12px;
+    }
+
+    .value {
+      font-weight: bold;
+      font-size: 24px;
+      background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+
+</style>

src/components/Customize/slotCake.vue

@@ -1,8 +1,8 @@
 <!-- 饼图统计 -->
 <template>
-  <div class="box">
+  <div class="box" :style="{height:barHeight}">
     <boxTop :title="title">
-      <div class="tabsBox AICenter">
+      <div v-show="showSlot" class="tabsBox AICenter">
         <div class="tabs">
           <div
               :class="[`tab-item`, { cur: index === tabs.index }]"
@@ -84,10 +84,18 @@ export default {
       type: String,
       default: ``,
     },
+    showSlot:{
+      type: Boolean,
+      default: true,
+    },
     data: {
       type: Object,
       default: new Object(),
     },
+    barHeight: {
+      type: String,
+      default: `220px`,
+    },
     tabIndex: {
       type: Number,
       default: 0,
@@ -103,6 +111,7 @@ export default {
   },
   async mounted() {
     this.getEchart()
+    console.log(this.showSlot,'111111111111')
   },
   watch: {
     data: {
@@ -261,8 +270,9 @@ export default {
 
 .cakeBox {
   width: 460px;
-  height: 180px;
-
+  height:80%;
+  display: flex;
+  align-items: center;
   .chartsDom {
     margin: 0 30px;
     width: 150px;

src/components/Customize/wordClouds.vue

@@ -0,0 +1,156 @@
+<!-- 圆柱柱状图 -->
+<template>
+  <div class="oblongBox" :style="{height:barHeight}">
+    <boxTop :title="title"/>
+    <div class="chartsdom" :id="id">
+    </div>
+  </div>
+</template>
+
+<script>
+import boxTop from '@/components/boxTop/index.vue'
+import '@/assets/js/echarts-wordcloud.min'
+
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+  components: {
+    boxTop,
+  },
+  props: {
+    id: {
+      type: String,
+      default: ``,
+    },
+    barHeight: {
+      type: String,
+      default: `200px`,
+    },
+    area: {
+      type: Array,
+    },
+    dataArray: {
+      type: Array,
+    },
+    title: {
+      type: String,
+      default: ``,
+    },
+    unit: {
+      type: String,
+    },
+  },
+  mounted() {
+    this.getEchart()
+  },
+  watch: {
+    dataArray() {
+      this.getEchart()
+    },
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(this.id))
+      const list = [
+        {
+          value: '50',
+          name: '华为',
+        },
+        {value: '30', name: 'VIVO'},
+        {value: '29', name: 'OPPO'},
+        {value: '28', name: 'HONOR'},
+        {value: '27', name: '红米'},
+        {value: '26', name: '小米'},
+        {value: '25', name: '美图'},
+        {value: '24', name: 'ONEPLUS'},
+        {value: '23', name: '魅族'},
+        {value: '22', name: '红手指'},
+        {value: '21', name: 'SAMSUNG'},
+        {value: '20', name: '金立'},
+        {value: '16', name: 'BLACKBERRY'},
+        {value: '15', name: '诺基亚'},
+        {value: '14', name: '锤子'},
+        {value: '13', name: '大疆'},
+        {value: '12', name: '361'},
+        {value: '11', name: '摩托罗拉'},
+        {value: '10', name: '联想'},
+        {value: '9', name: '玩家国度'}
+      ]
+
+      let randcolor = () => {
+        let r = 100 + ~~(Math.random() * 100);
+        let g = 135 + ~~(Math.random() * 100);
+        let b = 100 + ~~(Math.random() * 100);
+        return `rgb(${r}, ${g}, ${b})`
+      }
+      this.option = {
+        tooltip: {
+          show: true,
+          borderColor: '#fe9a8bb3',
+          borderWidth: 1,
+          padding: [10, 15, 10, 15],
+          confine: true,
+          backgroundColor: 'rgba(255, 255, 255, .9)',
+          textStyle: {
+            color: 'hotpink',
+            lineHeight: 22
+          },
+          extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'
+        },
+        series: [
+          {
+            type: 'wordCloud',
+            shape: 'pentagon',
+            left: 'center',
+            top: 'center',
+            width: '100%',
+            height: '100%',
+            right: null,
+            bottom: null,
+            sizeRange: [14, 34],
+            rotationRange: [0, 0],
+            rotationStep: 0,
+            gridSize: 25,
+            drawOutOfBound: false,
+            layoutAnimation: true,
+            textStyle: {
+              fontFamily: 'PingFangSC-Semibold',
+              fontWeight: 600,
+              color: function (params) {
+                return randcolor();
+              },
+            },
+            emphasis: {
+              focus: 'none',
+            },
+
+            // Data is an array. Each array item must have name and value property.
+            data: list,
+          },
+        ],
+      };
+      myChart.setOption(this.option, true)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.oblongBox {
+  width: 460px;
+  height: 216px;
+  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
+  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);
+
+  .chartsdom {
+    position: relative;
+    width: 100%;
+    height: 85%;
+  }
+
+}
+</style>

src/views/page1/index.vue

@@ -238,6 +238,8 @@ export default {
         this.$router.push(`/page1`)
       } else if (val === 1) {
         this.$router.push(`/page2`)
+      }else if (val === 2) {
+        this.$router.push(`/page3`)
       }
       console.log(`val`, val)
     },

src/views/page2/cmap.vue

@@ -1,300 +0,0 @@
-<template>
-  <div>
-    <div
-      class="input-card content-window-card"
-      ref="infoBox"
-      v-if="infoBoxData"
-      v-show="infoBoxData"
-    >
-      <div style="padding: 7px 0px 0px 0px">
-        <h4>{{ infoBoxData.properties.name }}</h4>
-        <p class="input-item">完成率: {{ infoBoxData.baseItem.完成率 }}%</p>
-        <p class="input-item">
-          移栽面积 {{ infoBoxData.baseItem.面积 }}平方米 移栽数量
-          {{ infoBoxData.baseItem.已种植 }}
-        </p>
-      </div>
-    </div>
-    <div id="container" class="g-bg1"></div>
-  </div>
-</template>
-
-<script>
-import AMapLoader from '@amap/amap-jsapi-loader'
-import mapOfTongren from '@/http/mapOfTongren.json'
-
-window.map = {}
-
-export default {
-  components: {},
-  props: [`baseList`],
-  data() {
-    return {
-      infoBoxData: undefined,
-    }
-  },
-  computed: {},
-  async created() {},
-  mounted() {
-    this.initAMap()
-  },
-  unmounted() {
-    window.map.destroy()
-  },
-  methods: {
-    async initAMap() {
-      const vm = this
-      let infoWindow
-      // 在指定位置打开信息窗体
-      function openInfo() {
-        const data = vm.infoBoxData
-        const { center } = data.properties
-        const center2 = data.baseItem.area[0] || undefined
-        infoWindow = new AMap.InfoWindow({
-          content: vm.$refs.infoBox,
-        })
-
-        infoWindow.open(window.map, center2 || window.map.getCenter())
-      }
-      window._AMapSecurityConfig = {
-        securityJsCode: `a2017cdc059be6c03b430a3185098003`,
-      }
-      AMapLoader.load({
-        key: `6260c9b9128ad802001c8a5ff18bde16`, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
-      })
-        .then(async (AMap) => {
-          function addPolygon(data) {
-            // const path = data.geometry.coordinates
-            const path = data.baseItem.area
-            console.log(
-              `datadata`,
-              path,
-              data.baseItem.area,
-              data.geometry.coordinates
-            )
-            let polygon = new AMap.Polygon({
-              path: path,
-
-              strokeColor: `#00f`,
-              strokeWeight: 6,
-              strokeOpacity: 0.7,
-              fillOpacity: 0.2,
-              fillColor: `#1791fc`,
-              zIndex: 50,
-              bubble: true,
-              // fillColor: `#ccebc5`,
-              // strokeOpacity: 1,
-              // fillOpacity: 0,
-              // strokeColor: `#2b8cbe`,
-              // strokeWeight: 4,
-              // // strokeStyle: `dashed`,
-              // strokeDasharray: [5, 5],
-              // lineJoin: `round`,
-              // lineCap: `round`,
-            })
-            polygon.on(`mouseover`, (e) => {
-              console.log(`datadatadata`, data)
-              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
-              if (window.map.getZoom() <= 12) {
-                vm.infoBoxData = data
-                openInfo()
-                // polygon.setOptions({
-                //   fillOpacity: 0.7,
-                //   fillColor: `#7bccc4`,
-                // })
-              }
-              // polygon.setOptions({
-              //   fillOpacity: 0.7,
-              //   fillColor: `#7bccc4`,
-              // })
-            })
-            polygon.on(`click`, (e) => {
-              console.log(`点击了`, data.properties)
-            })
-            polygon.on(`mouseout`, () => {
-              // polygon.setOptions({
-              //   fillOpacity: 0,
-              //   fillColor: `#ccebc5`,
-              // })
-            })
-            if (path[0]) {
-              // console.log(`AMap.event.addListener`, AMap.event.addListener)
-              const markerContent = `
-                <div class="markerContent">
-                  <div>${data.properties.name}</div>
-                  <img class="img" src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png">
-                </div>
-              `
-              let marker = new AMap.Marker({
-                content: markerContent,
-                // icon: `https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png`,
-                position: path[0],
-              })
-              marker.on(`mouseover`, () => {
-                vm.infoBoxData = data
-                vm.$nextTick(() => {
-                  openInfo()
-                })
-              })
-              window.map.add(marker)
-              // setTimeout(() => {
-              //   AMap.event.addListener(marker, `click`, function () {
-              //     vm.infoBoxData = data
-              //     infoWindow.open(window.map, openInfo())
-              //   })
-              // }, 1000)
-              // // 鼠标点击marker弹出自定义的信息窗体
-              // AMap.event.addListener(marker, `click`, function () {
-              //   vm.infoBoxData = data
-              //   infoWindow.open(window.map, openInfo())
-              // })
-            }
-            window.map.add(polygon)
-          }
-          window.map = new AMap.Map(`container`, {
-            // resizeEnable: true,
-            // 设置地图容器id
-            // viewMode: `2D`, // 2D视图
-            // mapStyle: `amap://styles/whitesmoke`, // 卫星地图样式
-            viewMode: `3D`, // 是否为3D地图模式
-            // zoom: 7, // 初始化地图级别
-            zoom: 9.22, // 初始化地图级别
-            // zoom: 14, // 初始化地图级别
-            // center: [107.943579, 30.131735], // 初始化地图中心点位置
-            center: [108.597461, 28.047503], // 初始化地图中心点位置
-            resizeEnable: true,
-            layers: [
-              // new AMap.TileLayer.Satellite({
-              //   opacity: 1,
-              // }),
-              // new AMap.TileLayer.RoadNet({
-              //   opacity: 1,
-              // }),
-              // https://wprd01.is.autonavi.com/appmaptile?x=204&y=108&z=8&lang=zh_cn&size=1&scl=1&style=8&ltype=11
-              // 谷歌图
-              // new AMap.TileLayer({
-              //   // getTileUrl: `//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali`,
-              //   getTileUrl: `http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
-              //   zIndex: 20,
-              //   zoom: 17,
-              // }),
-              // new AMap.TileLayer({
-              //   getTileUrl: `//mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
-              //   zIndex: 20,
-              //   zoom: 17,
-              // }),
-              // 天地图
-              new AMap.TileLayer({
-                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
-                zIndex: 20,
-                opacity: 1,
-                zoom: 19,
-              }),
-              new AMap.TileLayer({
-                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
-                zIndex: 20,
-                opacity: 0.7,
-                zoom: 19,
-              }),
-            ],
-            // zooms: [16, 20],
-          })
-          window.map.setFitView()
-          const baseList = await this.$http.get(`/api/base`)
-          let list = mapOfTongren.features.map((item) => {
-            const baseItem =
-              baseList.find((baseItem) =>
-                String(baseItem.名称).includes(
-                  String(item.properties.name.slice(0, 2))
-                )
-              ) || {}
-            item.baseItem = baseItem
-            return item
-          })
-          list.forEach((item) => {
-            addPolygon(item)
-          })
-          const item = list[0]
-          this.infoBoxData = item
-          this.$nextTick(() => {
-            openInfo()
-          })
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-    tabChange(val) {
-      if (val === 0) {
-        this.$router.push(`/page1`)
-      }
-      console.log(`val`, val)
-    },
-  },
-}
-</script>
-
-<style label="less">
-.markerContent {
-  min-width: 100px;
-  display: block;
-  background-color: #fff;
-  color: #000;
-  border-radius: 10px;
-  padding: 10px 10px;
-  position: relative;
-  line-height: 1.5em;
-  .img {
-    position: absolute;
-    left: -10px;
-    bottom: -30px;
-    /* bottom: -30px; */
-    /* left: -30px; */
-    /* left: calc(50% - 10px); */
-  }
-}
-.custom-input-card {
-  width: 18rem;
-}
-
-.custom-input-card .btn:last-child {
-  margin-left: 1rem;
-}
-
-.content-window-card {
-  color: #000;
-  position: relative;
-  width: 23rem;
-  padding: 0.75rem 0 0 1.25rem;
-  box-shadow: none;
-  bottom: 0;
-  left: 0;
-}
-
-.content-window-card p {
-  height: 2rem;
-}
-</style>
-<style lang="less" scoped>
-#container {
-  position: absolute;
-  padding: 0px;
-  margin: 0px;
-  width: 1920px;
-  height: 1080px;
-  z-index: 8;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 9;
-    background: radial-gradient(transparent 40vh, rgba(0, 0, 0, 1));
-    pointer-events: none;
-  }
-}
-</style>

src/views/page2/index.vue

@@ -204,6 +204,8 @@ export default {
         this.$router.push(`/page1`)
       } else if (val === 1) {
         this.$router.push(`/page2`)
+      }else if (val === 2) {
+        this.$router.push(`/page3`)
       }
       console.log(`val`, val)
     },

src/views/page2/item.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="list">
-    <div
-      class="containerBox animated fadeInDown"
-      v-for="(item, index) in list"
-      :key="index"
-      @click="itemClick(item)"
-    >
-      <div class="left">
-        <p class="title">{{ item.名称 }}</p>
-        <p>种植数量：{{ item.已种植 }}</p>
-        <p>目标完成率：{{ item.完成率 }}%</p>
-        <p>地址：{{ item.地址 }}</p>
-      </div>
-      <div class="right">
-        <img :src="item.图片[0]" alt="风景图" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `LayoutExample`,
-  data() {
-    return {}
-  },
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  async created() {},
-  methods: {
-    itemClick(item) {
-      window.open(`https://www.gzzzyd.com/tobacco/business/locus?id=${item.id}`)
-    },
-  },
-}
-</script>
-
-<style scoped lang="less">
-.list {
-  padding: 16px;
-  width: 357px;
-  height: 750px;
-  overflow: auto;
-  .containerBox {
-    cursor: pointer;
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #fff;
-    background: rgba(168, 168, 168, 0.15);
-    backdrop-filter: blur(8px);
-    padding: 10px;
-    .left {
-      .title {
-        font-size: 20px;
-        line-height: 1.2em;
-        color: #fff;
-      }
-      p {
-        padding: 0;
-        margin: 0;
-        color: #bec1cc;
-        line-height: 1.5em;
-        font-size: 14px;
-        margin-bottom: 5px;
-      }
-    }
-    .right {
-      padding-left: 10px;
-      img {
-        width: 105px;
-        height: 105px;
-        border-radius: 10px;
-      }
-    }
-  }
-}
-</style>

src/views/page2/leftBox.vue

@@ -1,136 +0,0 @@
-<template>
-  <div>
-    <boxTop />
-    <div class="leftBox">
-      <div class="search-bar">
-        <input
-          v-model="leftBox.input"
-          type="text"
-          placeholder="输入关键字进行搜索"
-          @keyup.enter="searchFn"
-        />
-        <div class="icons">
-          <span class="icon i-mdi-search" @click="searchFn"></span>
-          <span class="icon i-mdi-delete" @click="clearFn"></span>
-          <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
-        </div>
-      </div>
-      <item :list="leftBox.list" />
-    </div>
-  </div>
-</template>
-
-<script>
-import item from './item.vue'
-import boxTop from '@/components/boxTop/index.vue'
-
-export default {
-  props: {
-    listCb: {
-      type: Function,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      leftBox: {
-        input: ``,
-        list: [],
-        sortIndex: 0,
-        sortList: [`已种植`, `完成率`],
-      },
-    }
-  },
-  components: {
-    boxTop,
-    item,
-  },
-  async created() {
-    this.searchFn()
-  },
-  methods: {
-    async searchFn() {
-      console.log(`search`, this.leftBox.input)
-      const data = await this.$http.get(`/api/base`, {
-        params: {
-          _sort:
-            this.leftBox.sortList[
-              this.leftBox.sortIndex % this.leftBox.sortList.length
-            ] || undefined,
-          名称_like: this.leftBox.input || undefined,
-        },
-      })
-      this.$props.listCb(data)
-      this.leftBox.list = []
-      this.$nextTick(() => {
-        this.leftBox.list = data
-      })
-    },
-    clearFn() {
-      this.leftBox.input = ``
-      this.searchFn()
-      console.log(`clearFn`)
-    },
-    sortFn() {
-      this.leftBox.sortIndex++
-      this.searchFn()
-      console.log(`sortFn`)
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.leftBox {
-  height: 845px;
-  background: rgba(48, 42, 42, 0.3);
-  backdrop-filter: blur(8px);
-  .search-bar {
-    display: flex;
-    align-items: center;
-    background-color: #2c2f3f;
-    height: 48px;
-    padding: 10px;
-    border-radius: 4px;
-    background: rgba(37, 34, 59, 0.31);
-    border: 0.5px solid;
-    box-sizing: border-box;
-    border-image: linear-gradient(
-        180deg,
-        #8a8989,
-        #bec1cc 27%,
-        rgba(255, 255, 255, 0.72) 59%,
-        #bec1cc 82%,
-        rgba(255, 255, 255, 0.76) 99%
-      )
-      0.5 0.5;
-
-    input {
-      flex: 1;
-      padding: 10px;
-      border: none;
-      background-color: transparent;
-      color: #fff;
-      font-size: 14px;
-      height: 35px;
-      line-height: 35px;
-      outline: none;
-    }
-
-    .icons {
-      display: flex;
-      align-items: center;
-      margin-left: 10px;
-
-      span {
-        margin-right: 10px;
-        color: #fff;
-        font-size: 18px;
-      }
-      .icon {
-        cursor: pointer;
-      }
-    }
-  }
-}
-</style>

src/views/page3/index.vue

@@ -1,281 +1,245 @@
 <template>
-  <bgBox :tabChange="tabChange" class="bgBox" bgType="g-bg3">
-    <div class="main">
-      <div class="topBar">
-        <div class="query">
-          <img src="@/assets/img2/种植分析详情/编组 8.png" alt="" />
-          <el-radio-group v-model="query.radio" class="radio-group">
-            <el-radio class="date" :label="6">近一周</el-radio>
-            <el-radio class="date" :label="30">近30天</el-radio>
-            <el-radio class="date" :label="90">近90天</el-radio>
-          </el-radio-group>
-          <el-date-picker
-            :pickerOptions="pickerOptions0"
-            v-model="query.date[0]"
-            type="date"
-            placeholder="开始日期"
-            class="mr-20px ml-20px date"
-          >
-          </el-date-picker>
-          <el-date-picker
-            class="date"
-            :pickerOptions="pickerOptions1"
-            v-model="query.date[1]"
-            type="date"
-            placeholder="结束日期"
-          >
-          </el-date-picker>
-        </div>
-        <img
-          @click="backFn"
-          src="@/assets/img2/种植分析详情/编组 16备份.png"
-          alt=""
-        />
-      </div>
-      <leftBox class="lefBox" />
-      <leftBox2 class="lefBox2" />
-      <cake
-        id="`移栽数据`"
-        barWidth="448px"
-        style="position: absolute; top: 95px; right: 550px"
-        title="移栽数据"
+  <bgBox :tabChange="tabChange" class="bgBox" :tabIndex="2">
+    <evaluationStatistics
+        style="position: absolute; left: 20px; top: 98px"
+        class="animated fadeInLeft"
+        :barHeight="'312px'"
+        total="2700"
+        :area="Transplantarea"
+        :dataArray="TransplantdataArray"
+    />
+    <wordClouds
+        :barHeight="'312px'"
+        id="平台订单总交易额趋势(月)"
+        style="position: absolute; left: 20px; top: 426px"
+        class="animated fadeInLeft"
+        title="平台订单总交易额趋势(月)"
+    >
+    </wordClouds>
+    <weatherForecast
+        id="平台订单总量趋势（月）"
+        :barHeight="'312px'"
+        style="position: absolute; left: 20px; top: 750px"
+        class="animated fadeInLeft"
+        title="平台订单总量趋势(月)"
+        :area="trendarea"
+        :dataArray="trendDataArray"
+    ></weatherForecast>
+    <threeMap
+        @toView="toView"
+        class="animated zoomIn"
+        style="
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%,15%);
+      "
+        v-if="hasGetJson"
+        :getJson="getJson"
+    ></threeMap>
+    <liquidFill
+        :barHeight="'312px'"
+        id="水球"
+        total="3.5"
+        style="position: absolute; right: 20px; top: 98px"
+        class="animated fadeInRight"
+        title="水球"
+        :area="trendarea"
+        :dataArray="trendDataArray"
+    ></liquidFill>
+    <slotCake
+        :showSlot="false"
+        id="`评价类型分布`"
+        style="position: absolute; right: 20px; top: 434px"
+        title="评价类型分布"
         :data="statisticsData"
         class="animated fadeInRight"
-        v-if="isCake"
-      />
-      <weatherForecast
-        :unit="`摄氏度`"
-        barWidth="448px"
-        style="position: absolute; right: 50px; top: 95px"
+        :barHeight="'312px'"
+    />
+    <weatherForecast
+        id="区域收获评价总量趋势"
+        :barHeight="'312px'"
+        style="position: absolute; right: 20px; top: 758px"
         class="animated fadeInRight"
-        v-if="isWeather"
-        title="实时天气"
+        title="区域收获评价总量趋势(月)"
         :area="Weatherarea"
         :dataArray="WeatherdataArray"
-        :alertValue="30"
-      />
-      <wavyLineChart
-        id="`月度移栽趋势`"
-        barWidth="448px"
-        style="position: absolute; right: 550px; top: 400px; z-index: 10"
-        v-if="isMonthTrend"
-        :lineName="monthName"
-        title="月度移栽趋势"
-        class="animated fadeInRight"
-        :area.sync="monthTrendarea"
-        :dataArray.sync="monthTrendDataArray"
-      />
-      <wavyLineChart
-        id="`月度移栽面积分析`"
-        barWidth="448px"
-        style="position: absolute; right: 550px; top: 730px; z-index: 10"
-        v-if="isAnalyseMonthTrend"
-        :lineName="monthName"
-        title="月度移栽面积分析"
-        class="animated fadeInRight"
-        :area.sync="monthTrendAnalysearea"
-        :dataArray.sync="monthTrendAnalyseDataArray"
-      />
-      <wavyLineChart
-        id="`年度移栽趋势`"
-        barWidth="448px"
-        style="position: absolute; right: 50px; top: 400px; z-index: 10"
-        :lineName="yearName"
-        title="年度移栽趋势"
-        :area.sync="yearTrendarea"
-        class="animated fadeInRight"
-        :dataArray.sync="yearTrendDataArray"
-        v-if="isYearTrend"
-      />
-      <wavyLineChart
-        id="`年度移栽面积分析`"
-        barWidth="448px"
-        style="position: absolute; right: 50px; top: 730px; z-index: 10"
-        :lineName="yearName"
-        title="年度移栽面积分析"
-        :area.sync="yearTrendAnalysearea"
-        class="animated fadeInRight"
-        :dataArray.sync="yearTrendAnalyseDataArray"
-        v-if="isAnalyseYearTrend"
-      />
-    </div>
+    ></weatherForecast>
   </bgBox>
 </template>
 
 <script>
-import 'element-ui/lib/theme-chalk/index.css'
-import wavyLineChart from '@/components/Customize/wavyLineChart'
-import weatherForecast from '@/components/Customize/weatherForecast'
-import cake from '@/components/Customize/cake'
+import mapOfTongren from '@/http/mapOfTongren.json'
 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'
-import dayjs from 'dayjs'
-
-// 获取近一周的日期范围
-function getLastDay(day) {
-  const end = dayjs() // 当前日期
-  const start = end.subtract(day, `day`) // 前六天
-  return { start: start.format(`YYYY-MM-DD`), end: end.format(`YYYY-MM-DD`) }
-}
-
-window.getLastDay = getLastDay
-window.dayjs = dayjs
-
-Vue.use(Button)
-Vue.use(RadioGroup)
-Vue.use(Radio)
-Vue.use(DatePicker)
+import cake from '@/components/Customize/cake'
+import HybridCharts from '@/components/Customize/HybridCharts'
+import liquidFill from '@/components/Customize/liquidfill'
+import wordClouds from '@/components/Customize/wordClouds'
+import slotCake from '@/components/Customize/slotCake'
+import evaluationStatistics from '@/components/Customize/evaluationStatistics/index.vue'
+import ComplexHistograms from '@/components/Customize/Complex histograms'
+import weatherForecast from '@/components/Customize/weatherForecast'
+import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
+import statisticsPanel from '@/components/statisticsPanel/index.vue'
+import threeMap from '@/components/Customize/map/index'
 
 export default {
+  name: `Home`,
   components: {
-    leftBox,
-    leftBox2,
-    bgBox,
-    wavyLineChart,
+    evaluationStatistics,
+    liquidFill,
+    wordClouds,
+    HybridCharts,
+    slotCake,
     weatherForecast,
+    HorizontalHistogram,
+    ComplexHistograms,
+    statisticsPanel,
+    bgBox,
+    threeMap,
     cake,
   },
   data() {
-    const vm = this
     return {
-      pickerOptions0: {
-        disabledDate(time) {
-          return time.getTime() > Date.now()
-        },
+      tabs: {
+        index: 0,
+        list: [`订单总量`, `订单交易额`],
       },
-      pickerOptions1: {
-        disabledDate(time) {
-          if (vm.query.date[0]) {
-            return (
-              time.getTime() < vm.query.date[0] || time.getTime() > Date.now()
-            )
-          } else {
-            return time.getTime() > Date.now()
-          }
-        },
+      max: 100,
+      autoVueFnInit: false,
+      statisticsData: {
+        title: `目标完成率`,
+        value: 0,
+        acrossList: [
+          {name: `年移栽数量`, value: undefined},
+          {name: `年移栽面积`, value: undefined},
+        ],
+        verticalList: [
+          {name: `移栽区域数`, value: undefined},
+          {name: `烟农数量`, value: undefined},
+        ],
       },
-      query: {
-        radio: 6,
-        date: [],
+      yearName: {
+        lastName: `去年`,
+        thisName: `今年`,
       },
-      trendarea: [],
-      trendDataArray: {
-        LastYear: [],
-        thisYear: [],
+      TransplantdataArray: [],
+      Transplantarea: [],
+      Weatherarea: [],
+      WeatherdataArray: {
+        temperature: [],
+        Weather: [],
       },
-      monthTrendarea: [],
-      monthTrendDataArray: {
+      wavyLineArea: [],
+      wavyLinedataArray: {
         LastYear: [],
         thisYear: [],
       },
-      monthName: {
-        lastName: `上月`,
-        thisName: `本月`,
-      },
-      monthTrendAnalysearea: [],
-      monthTrendAnalyseDataArray: [],
-      yearTrendarea: [],
-      yearTrendDataArray: {
+      trendarea: [],
+      trendDataArray: {
         LastYear: [],
         thisYear: [],
       },
-      isMonthTrend: false,
-      isYearTrend: false,
-      isAnalyseMonthTrend: false,
-      isAnalyseYearTrend: false,
-      yearName: {
-        lastName: `去年`,
-        thisName: `今年`,
+      HorizontalArea: [],
+      HorizontalArray: {
+        Done: [],
+        Percentage: [],
       },
-      yearTrendAnalysearea: [],
-      yearTrendAnalyseDataArray: [],
-      statisticsData: {
-        title: `处理率`,
-        value: 0,
-        acrossList: [{ name: `今日种植数`, value: undefined }],
-        verticalList: [
-          { name: `目标移栽数`, value: undefined },
-          { name: `累计移栽`, value: undefined },
-        ],
-      },
-      Weatherarea: [],
-      WeatherdataArray: [],
-      isCake: false,
+      getJson: {},
+      isGetData: false,
       isWeather: false,
-      baseId: this.$route.query.id || 1,
+      isWavyLine: false,
+      isHorizontal: false,
+      isTrend: false,
+      hasGetJson: false,
+      isCake: false,
     }
   },
   computed: {},
-  async created() {
-    this.$util.autoVueFn(
-      [
-        {
-          time: 1000 * 60,
-          fn: this.getTrendOfTransplantQuantityThisMonth,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getThisYearsTransplantingDataTrend,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getMonthlyTransplantationAreaAnalysis,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getAnalysisOfAnnualTransplantArea,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getStatistics,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getWeatherForecast,
-        },
-      ],
-      this
-    )
+  created() {
+    this.getJSON()
+    // this.$util.autoVueFn(
+    //   [
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getWeatherForecast,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getAnalysisOfTransplantYieldInVariousRegions,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getTransplantAreaInEachRegion,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getAnalysisOfTransplantingSituation,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getStatistics,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getTrendAnalysis,
+    //     },
+    //   ],
+    //   {
+    //     vm: this,
+    //     batEnd() {
+    //       this.autoVueFnInit = true
+    //     },
+    //   }
+    // )
   },
-  watch: {
-    'query.radio': {
-      handler(val) {
-        if (this.query.radio) {
-          this.query.date = []
-          const { start, end } = getLastDay(this.query.radio)
-          this.getEchartData(start, end)
-        }
-      },
-      immediate: true,
+  mounted() {
+  },
+  methods: {
+    async toView(code) {
+      console.log(code)
+
+      const {id, 区域编码} = (await this.$util.code2base(this, code)) || {}
+      this.$router.push({
+        path: `/page3`,
+        query: {
+          id,
+          code: 区域编码,
+        },
+      })
     },
-    'query.date'([a, b] = []) {
-      if (a && b) {
-        this.query.radio = 0
-        const start = dayjs(a || Date.now()).format(`YYYY-MM-DD`)
-        const end = dayjs(b || Date.now()).format(`YYYY-MM-DD`)
-        this.getEchartData(start, end)
-      } else if (!a && !b && !this.query.radio) {
-        this.query.radio = 6
+    tabChange(val) {
+      if (val === 0) {
+        this.$router.push(`/page1`)
+      } else if (val === 1) {
+        this.$router.push(`/page2`)
+      } else if (val === 2) {
+        this.$router.push(`/page3`)
       }
+      console.log(`val`, val)
     },
-  },
-  mounted() {},
-  methods: {
-    getEchartData(start, end) {
-      console.log(`start, end`, start, end)
+    getAnalysisOfTransplantYieldInVariousRegions() {
+      return this.$http
+          .get(`/api/analysisOfTransplantYieldInVariousRegions`)
+          .then((res) => {
+            const area = []
+            const dataArray = []
+            res.forEach((element) => {
+              area.push(element.名称.slice(0, 2))
+              dataArray.push(element.值)
+            })
+            this.Transplantarea = area
+            this.TransplantdataArray = dataArray
+            this.isGetData = true
+          })
     },
     getWeatherForecast() {
       return this.$http
-        .get(`/api/weatherForecast`, {
-          params: {
-            districtId: this.baseId,
-          },
-        })
-        .then((res) => {
-          if (res) {
+          .get(`/api/weatherForecast`, {
+            params: {
+              districtId: 0,
+            },
+          })
+          .then((res) => {
             const area = []
             const dataArray = {
               temperature: [],
@@ -289,253 +253,125 @@ export default {
             this.Weatherarea = area
             this.WeatherdataArray = dataArray
             this.isWeather = true
-          }
-        })
-    },
-    getTrendOfTransplantQuantityThisMonth() {
-      this.$http
-        .get(`/api/transplantTrendAnalysis`, {
-          params: {
-            districtId: this.baseId,
-          },
-        })
-        .then((res) => {
-          if (res) {
-            const area = []
-            const dataArray = {
-              LastYear: [],
-              thisYear: [],
-              comparisonLastDay: [],
-              comparisonLastYear: [],
-            }
-            res.forEach((element) => {
-              area.push(element.时间)
-              dataArray.LastYear.push(element.去年)
-              dataArray.thisYear.push(element.今年)
-              dataArray.comparisonLastDay.push(element.较上日)
-              dataArray.comparisonLastYear.push(element.较去年)
-            })
-            this.monthTrendarea = area
-            this.monthTrendDataArray = dataArray
-            this.isMonthTrend = true
-          }
-        })
-    },
-    getMonthlyTransplantationAreaAnalysis() {
-      this.$http
-        .get(`/api/monthlyTransplantationAreaAnalysis`, {
-          params: {
-            districtId: this.baseId,
-          },
-        })
-        .then((res) => {
-          if (res) {
-            const area = []
-            const dataArray = {
-              LastYear: [],
-              thisYear: [],
-              comparisonLastDay: [],
-              comparisonLastYear: [],
-            }
-            res.forEach((element) => {
-              area.push(element.时间)
-              dataArray.LastYear.push(element.去年)
-              dataArray.thisYear.push(element.今年)
-              dataArray.comparisonLastDay.push(element.较上日)
-              dataArray.comparisonLastYear.push(element.较去年)
-            })
-            this.monthTrendAnalysearea = area
-            this.monthTrendAnalyseDataArray = dataArray
-            this.isAnalyseMonthTrend = true
-          }
-        })
+          })
     },
-    getThisYearsTransplantingDataTrend() {
-      this.$http
-        .get(`/api/thisYearsTransplantingDataTrend`, {
-          params: {
-            districtId: this.baseId,
-          },
-        })
-        .then((res) => {
-          if (res) {
-            const area = []
-            const dataArray = {
-              LastYear: [],
-              thisYear: [],
-              comparisonLastDay: [],
-              comparisonLastYear: [],
-            }
-            res.forEach((element) => {
-              area.push(element.时间)
-              dataArray.LastYear.push(element.去年)
-              dataArray.thisYear.push(element.今年)
-              dataArray.comparisonLastDay.push(element.较上日)
-              dataArray.comparisonLastYear.push(element.较去年)
-            })
-            this.yearTrendarea = area
-            this.yearTrendDataArray = dataArray
-            this.isYearTrend = true
-          }
+    getTransplantAreaInEachRegion() {
+      return this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
+        const area = []
+        const dataArray = {
+          LastYear: [],
+          thisYear: [],
+        }
+        res.forEach((element) => {
+          area.push(element.名称.slice(0, 2))
+          dataArray.LastYear.push(element.去年)
+          dataArray.thisYear.push(element.今年)
         })
+        this.wavyLineArea = area
+        this.wavyLinedataArray = dataArray
+        this.isWavyLine = true
+      })
     },
-    getAnalysisOfAnnualTransplantArea() {
-      this.$http
-        .get(`/api/analysisOfAnnualTransplantArea`, {
-          params: {
-            districtId: this.baseId,
-          },
-        })
-        .then((res) => {
-          if (res) {
-            const area = []
-            const dataArray = {
-              LastYear: [],
-              thisYear: [],
-              comparisonLastDay: [],
-              comparisonLastYear: [],
-            }
-            res.forEach((element) => {
-              area.push(element.时间)
-              dataArray.LastYear.push(element.去年)
-              dataArray.thisYear.push(element.今年)
-              dataArray.comparisonLastDay.push(element.较上日)
-              dataArray.comparisonLastYear.push(element.较去年)
-            })
-            this.yearTrendAnalysearea = area
-            this.yearTrendAnalyseDataArray = dataArray
-            this.isAnalyseYearTrend = true
-          }
+    getAnalysisOfTransplantingSituation() {
+      this.$http.get(`/api/analysisOfTransplantingSituation`).then((res) => {
+        const area = []
+        const dataArray = {
+          Done: [],
+          Percentage: [],
+        }
+        const date = res
+        date.forEach((element) => {
+          area.push(element.名称.slice(0, 2))
+          dataArray.Done.push(element.已移载)
+          dataArray.Percentage.push(element.比率.toFixed(0))
         })
+        this.HorizontalArea = area
+        this.HorizontalArray = dataArray
+        this.isHorizontal = true
+      })
     },
     getStatistics() {
-      return this.$http
-        .get(`/api/transplantData`, {
-          params: {
-            districtId: this.baseId,
-          },
+      return this.$http.get(`/api/realTimeStatistics`).then((res) => {
+        const obj = this.statisticsData
+        // eslint-disable-next-line no-prototype-builtins
+        if (res.hasOwnProperty(obj.title)) {
+          obj.value = res[obj.title]
+        }
+        const list1 = this.statisticsData.acrossList
+        this.statisticsData.acrossList = list1.map((item) => {
+          // eslint-disable-next-line no-prototype-builtins
+          if (res.hasOwnProperty(item.name)) {
+            return {...item, value: res[item.name]}
+          }
+          return item
         })
-        .then((res) => {
-          const obj = this.statisticsData
+        const list2 = this.statisticsData.verticalList
+        this.statisticsData.verticalList = list2.map((item) => {
           // eslint-disable-next-line no-prototype-builtins
-          if (res.hasOwnProperty(obj.title)) {
-            obj.value = res[obj.title]
+          if (res.hasOwnProperty(item.name)) {
+            return {...item, value: res[item.name]}
           }
-          const list1 = this.statisticsData.acrossList
-          this.statisticsData.acrossList = list1.map((item) => {
-            // eslint-disable-next-line no-prototype-builtins
-            if (res.hasOwnProperty(item.name)) {
-              return { ...item, value: res[item.name] }
-            }
-            return item
-          })
-          const list2 = this.statisticsData.verticalList
-          this.statisticsData.verticalList = list2.map((item) => {
-            // eslint-disable-next-line no-prototype-builtins
-            if (res.hasOwnProperty(item.name)) {
-              return { ...item, value: res[item.name] }
-            }
-            return item
-          })
-          this.isCake = true
+          return item
         })
+        this.isCake = true
+      })
     },
-    backFn() {
-      this.$router.back()
+    getTrendAnalysis() {
+      return this.$http.get(`/api/transplantTrendAnalysis`).then((res) => {
+        const area = []
+        const dataArray = {
+          LastYear: [],
+          thisYear: [],
+        }
+        res.forEach((element) => {
+          area.push(element.时间)
+          dataArray.LastYear.push(element.去年)
+          dataArray.thisYear.push(element.今年)
+        })
+        this.trendarea = area
+        this.trendDataArray = dataArray
+        this.isTrend = true
+      })
     },
-    tabChange(val) {
-      console.log(`val`, val)
+    async getJSON() {
+      this.getJson = mapOfTongren
+      this.hasGetJson = true
     },
   },
 }
 </script>
+<style lang="less">
+.tabbotton {
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  background-image: url('~@/assets/img2/综合总览/编组 9.png');
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  width: 460px;
 
-<style lang="less" scoped>
-.bgBox {
-  .main {
-    padding: 50px;
-    padding-top: 45px;
-    .topBar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .lefBox,
-    .lefBox2 {
-      position: absolute;
-      z-index: 10;
-      top: 120px;
-    }
-    .lefBox {
-      left: 458px;
-    }
-    .lefBox2 {
-      left: 47px;
-    }
-    .query {
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      .radio-group {
-        margin-top: -1px;
-        margin-left: 20px;
-      }
-      .date {
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 10px;
-      }
-      ::v-deep {
-        .el-radio__input.is-checked + .el-radio__label {
-          color: rgba(255, 255, 255, 0.8);
-        }
-        .el-input__suffix {
-          right: 0;
-        }
-        .el-radio {
-          background: rgba(255, 255, 255, 0.2);
-          box-sizing: border-box;
-          height: 27px;
-          padding: 0 10px;
-          line-height: 27px;
-          color: rgba(255, 255, 255, 0.8);
-          margin-right: 5px;
-        }
-        .el-input--prefix .el-input__inner {
-          padding: 0;
-        }
-        .el-input__prefix {
-          display: none;
-        }
-        .el-date-editor.el-input {
-          width: 120px;
-        }
-        .el-input__icon {
-          line-height: 27px;
-          height: 27px;
-        }
-        .el-input__inner {
-          border-radius: 10px;
-          width: 120px;
-          height: 27px;
-          box-sizing: border-box;
-          line-height: 27px;
-          color: rgba(255, 255, 255, 0.8);
-          text-align: center;
-          border-width: 0;
-        }
-        .el-input__inner,
-        .el-radio__inner {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-  ::v-deep {
-    .top {
-      display: none !important;
-    }
-    *[aria-hidden='true'] {
-      display: none;
+  .tab-item {
+    width: 220px;
+    height: 40px;
+    line-height: 40px;
+    font-family: YouSheBiaoTiHei;
+    font-size: 22px;
+    color: #bababa;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    background-image: url("~@/assets/img/rectangle.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+
+
+    &.cur {
+      color: rgba(77, 255, 251, .9);
+      background-image: url("~@/assets/img/rectangleing.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
     }
   }
 }

src/views/page3/item.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="list">
-    <div
-      :class="[
-        `containerBox`,
-        {
-          online: item.状态 === `作业中`,
-        },
-      ]"
-      v-for="(item, index) in list"
-      :key="index"
-    >
-      <div class="textBox">
-        <p class="title">
-          <span>{{ item.名称 }}</span>
-          <img
-            :src="状态[item.状态]"
-            :class="{ 'animated infinite flash s5': item.状态 === `故障` }"
-            alt=""
-          />
-        </p>
-        <p>设备IP：{{ item.ip || '' }}</p>
-        <p>管理员：{{ item.管理人员 }}</p>
-        <p>联系方式：{{ item.联系电话 || '' }}</p>
-      </div>
-      <div class="imgBox">
-        <img v-if="item.图片" :src="item.图片[0]" alt="风景图" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import 故障 from '@/assets/img2/种植分析详情/故障状态.png'
-import 关机 from '@/assets/img2/种植分析详情/关机.png'
-import 运行中 from '@/assets/img2/种植分析详情/关机_1.png'
-
-export default {
-  name: `LayoutExample`,
-  data() {
-    return {
-      状态: {
-        离线: 关机,
-        在线: 运行中,
-        作业中: 运行中,
-        故障,
-      },
-    }
-  },
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  async created() {},
-}
-</script>
-
-<style scoped lang="less">
-.list {
-  padding: 16px;
-  width: 357px;
-  height: 750px;
-  overflow: auto;
-  .containerBox {
-    &.online {
-      outline: 4px solid rgba(22, 248, 116, 0.5);
-      // border: 4px solid rgba(22, 248, 116, 0.5);
-      border-radius: 6px;
-    }
-    .s5 {
-      animation-duration: 4s;
-    }
-    cursor: pointer;
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #fff;
-    background: rgba(168, 168, 168, 0.15);
-    backdrop-filter: blur(8px);
-    padding: 10px;
-    .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;
-        margin: 0;
-        color: #bec1cc;
-        line-height: 1.5em;
-        font-size: 14px;
-        margin-bottom: 5px;
-      }
-    }
-    .imgBox {
-      order: 1;
-      padding-right: 10px;
-      img {
-        width: 105px;
-        height: 105px;
-        border-radius: 10px;
-      }
-    }
-  }
-}
-</style>

src/views/page3/leftBox.vue

@@ -1,130 +0,0 @@
-<template>
-  <div>
-    <boxTop title="打孔机管理" />
-    <div class="leftBox">
-      <div class="search-bar">
-        <input
-          v-model="leftBox.input"
-          type="text"
-          placeholder="输入关键字进行搜索"
-          @keyup.enter="searchFn"
-        />
-        <div class="icons">
-          <span class="icon i-mdi-search" @click="searchFn"></span>
-          <span class="icon i-mdi-delete" @click="clearFn"></span>
-          <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
-        </div>
-      </div>
-      <item class="listItem" :list="leftBox.list" />
-    </div>
-  </div>
-</template>
-
-<script>
-import item from './item.vue'
-import boxTop from '@/components/boxTop/index.vue'
-
-export default {
-  data() {
-    return {
-      leftBox: {
-        input: ``,
-        list: [],
-        sortIndex: 0,
-        sortList: [`投入时间`, `状态`],
-      },
-    }
-  },
-  components: {
-    boxTop,
-    item,
-  },
-  async created() {
-    this.searchFn()
-  },
-  methods: {
-    async searchFn() {
-      console.log(`search`, this.leftBox.input)
-      const data = await this.$http.get(`/api/holePunchingMachine`, {
-        params: {
-          _sort:
-            this.leftBox.sortList[
-              this.leftBox.sortIndex % this.leftBox.sortList.length
-            ] || undefined,
-          名称_like: this.leftBox.input || undefined,
-        },
-      })
-      this.$nextTick(() => {
-        this.leftBox.list = data
-      })
-    },
-    clearFn() {
-      this.leftBox.input = ``
-      this.searchFn()
-      console.log(`clearFn`)
-    },
-    sortFn() {
-      this.leftBox.sortIndex++
-      this.searchFn()
-      console.log(`sortFn`)
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.leftBox {
-  background: rgba(48, 42, 42, 0.3);
-  backdrop-filter: blur(8px);
-
-  .listItem {
-    height: 800px;
-  }
-  .search-bar {
-    display: flex;
-    align-items: center;
-    background-color: #2c2f3f;
-    height: 48px;
-    padding: 10px;
-    border-radius: 4px;
-    background: rgba(37, 34, 59, 0.31);
-    border: 0.5px solid;
-    box-sizing: border-box;
-    border-image: linear-gradient(
-        180deg,
-        #8a8989,
-        #bec1cc 27%,
-        rgba(255, 255, 255, 0.72) 59%,
-        #bec1cc 82%,
-        rgba(255, 255, 255, 0.76) 99%
-      )
-      0.5 0.5;
-
-    input {
-      flex: 1;
-      padding: 10px;
-      border: none;
-      background-color: transparent;
-      color: #fff;
-      font-size: 14px;
-      height: 35px;
-      line-height: 35px;
-      outline: none;
-    }
-    .icons {
-      display: flex;
-      align-items: center;
-      margin-left: 10px;
-
-      span {
-        margin-right: 10px;
-        color: #fff;
-        font-size: 18px;
-      }
-      .icon {
-        cursor: pointer;
-      }
-    }
-  }
-}
-</style>

src/views/page3/leftBox2.vue

@@ -1,166 +0,0 @@
-<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"
-          style="color: antiquewhite"
-          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.id || 1
-      const data = await this.$http.get(`/api/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;
-      color: #fff;
-    }
-  }
-}
-</style>