fix: page1接口对接

src/components/Customize/cake.vue

@@ -1,18 +1,18 @@
 <!-- 饼图统计 -->
 <template>
-  <div class="box">
+  <div class="box" :style="{height:barHeight}">
     <boxTop :title="title"/>
     <div class="cakeBox">
-      <div class="title"><span class="label">订单总额</span><span class="value">1700</span><span style="font-size: 16px">26.5%</span><img
-          v-if="isHoist" src="@/assets/img/hoist.png"><img v-else src="@/assets/img/decline.png"></div>
+<!--      <div class="title"><span class="label">订单总额</span><span class="value">1700</span><span style="font-size: 16px">26.5%</span><img-->
+<!--          v-if="isHoist" src="@/assets/img/hoist.png"><img v-else src="@/assets/img/decline.png"></div>-->
       <div class="flex">
         <div class="chartsdom" :id="id"></div>
         <div class="panel">
           <div class="panel-item" v-for="item in chartData">
             <div class="color" :style="{'background-color':item.color }"></div>
             <div class="type">{{ item.name }}</div>
-            <div class="number">{{ item.value }}</div>
-            <div class="amount">￥{{ item.amount }}</div>
+            <div class="number">{{ item.value }}单</div>
+            <div class="amount">{{ item.ratio }}%</div>
           </div>
         </div>
       </div>
@@ -58,7 +58,8 @@ export default {
           amount: 3211,
           color: '#37cbcb'
         },
-      ]
+      ],
+      colorList:['#975fe4','#45a5ff','#81c926','#ff8e49','#37cbcb']
     }
   },
   components: {
@@ -70,24 +71,30 @@ export default {
       default: ``,
     },
     data: {
-      type: Object,
-      default: new Object(),
+      type: Array,
+      default: [],
     },
-    title: {
+    barHeight: {
       type: String,
-      default: ``,
+      default: `250px`,
     },
-    titleEn: {
+    title: {
       type: String,
-      default: `Tongren Tobacco Planting Digital Management Platform`,
+      default: ``,
     },
   },
-  async mounted() {
+  mounted() {
     this.getEchart()
   },
   watch: {
     data: {
       handler() {
+        this.chartData = this.data.map((item, index) => ({
+          value: item.value,
+          name: item.label,
+          color: this.colorList[index],
+          ratio:item.ratio
+        }))
         this.getEchart()
       },
       deep: true, // 深度监听
@@ -243,6 +250,9 @@ export default {
 .cakeBox {
   width: 460px;
   height: 210px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .chartsdom {
     margin: 0 30px;
@@ -269,10 +279,17 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-
+.type {
+  width: 100px;
+  text-align: center;
+  font-size: 14px;
+  padding: 4px 0;
+  margin: 3px 0;
+}
 .number {
+  width: 100px;
   text-align: center;
-  font-size: 16px;
+  font-size: 14px;
   padding: 4px 0;
   margin: 3px 0;
 }
@@ -305,8 +322,8 @@ export default {
 
     .color {
       border-radius: 2px;
-      width: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
     }
   }
 }

src/components/Customize/histogram.vue

@@ -3,7 +3,7 @@
   <div class="oblongBox" :style="{height:barHeight }">
     <div class="chartsdom" id="cylindrical">
     </div>
-    <div class="title"><span class="label">商品总额</span><span class="value">{{ total }}</span></div>
+    <div class="title"><span class="label">商品总数</span><span class="value">{{ total }}</span></div>
   </div>
 </template>
 
@@ -58,14 +58,14 @@ export default {
             color: '#29d0d0'
           },
           type: 'category',
-          data: ['商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型']
+          data: this.area
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: this.dataArray,
             type: 'bar',
             itemStyle: {
               normal: {

src/components/Customize/map/index.vue

@@ -148,12 +148,6 @@ export default {
 
 
       myChart.setOption(this.option)
-      myChart.on(`click`, function (params) {
-        console.log(params)
-
-        const idx = params.dataIndex
-        that.$emit(`toView`, params.data.name)
-      })
     },
   },
 }

src/components/Customize/slotCake.vue

@@ -2,18 +2,6 @@
 <template>
   <div class="box" :style="{height:barHeight}">
     <boxTop :title="title">
-      <div v-show="showSlot" class="tabsBox AICenter">
-        <div class="tabs">
-          <div
-              :class="[`tab-item`, { cur: index === tabs.index }]"
-              :key="item"
-              @click="tabs.index = index"
-              v-for="(item, index) in tabs.list"
-          >
-            {{ item }}
-          </div>
-        </div>
-      </div>
     </boxTop>
     <div class="cakeBox">
       <div class="flex">
@@ -22,8 +10,8 @@
           <div class="panel-item" v-for="item in chartData">
             <div class="color" :style="{'background-color':item.color }"></div>
             <div class="type">{{ item.name }}</div>
-            <div class="number">{{ item.value }}</div>
-            <div class="amount">￥{{ item.amount }}</div>
+            <div class="number">￥{{ item.value }}</div>
+            <div class="number">{{ item.ratio }}%</div>
           </div>
         </div>
       </div>
@@ -73,7 +61,8 @@ export default {
           amount: 3211,
           color: '#37cbcb'
         },
-      ]
+      ],
+      colorList: ['#975fe4', '#45a5ff', '#81c926', '#ff8e49', '#37cbcb']
     }
   },
   components: {
@@ -106,14 +95,17 @@ export default {
     },
   },
   async mounted() {
-    if (this.data.length > 0) {
-      this.chartData = this.data
-    }
     this.getEchart()
   },
   watch: {
     data: {
       handler() {
+        this.chartData = this.data.map((item, index) => ({
+          value: item.value,
+          name: item.label,
+          color: this.colorList[index],
+          ratio:item.ratio
+        }))
         this.getEchart()
       },
       deep: true, // 深度监听
@@ -121,6 +113,9 @@ export default {
     },
   },
   methods: {
+    changeTab(index) {
+      this.tabs.index = index
+    },
     getEchart() {
       let myChart = echarts.init(document.getElementById(this.id))
       const sum = this.chartData.reduce((per, cur) => per + cur.value, 0);
@@ -271,6 +266,7 @@ export default {
   height: 80%;
   display: flex;
   align-items: center;
+  justify-content: center;
 
   .chartsDom {
     margin: 0 30px;

src/components/Customize/weatherForecast.vue

@@ -2,15 +2,16 @@
 <template>
   <div class="weatherBox" :style="{height:barHeight}">
     <boxTop :title="title">
-    <div class="select_btn">
-      <el-select size="small" :popper-append-to-body="false" style="width: 80px" v-model="value" placeholder="请选择">
-        <el-option
-            key="2025"
-            label="2025"
-            value="2025">
-        </el-option>
-      </el-select>
-    </div>
+      <div class="select_btn">
+        <el-select size="small" :popper-append-to-body="false" style="width: 120px" v-model="value" placeholder="请选择">
+          <el-option
+              v-for="(item, index) in selectList"
+              :key="index"
+              :label="item.value"
+              :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
     </boxTop>
     <div class="chartsdom" :id="id"></div>
   </div>
@@ -28,7 +29,18 @@ import boxTop from '@/components/boxTop/index.vue'
 export default {
   data() {
     return {
-      value: '2025',
+      value: null,
+      selectList: [
+        {
+          value: "2025-01",
+        }, {
+          value: "2025-02",
+        }, {
+          value: "2025-03",
+        }, {
+          value: "2025-04",
+        },
+      ],
       option: null,
       information: {},
     }
@@ -48,13 +60,14 @@ export default {
       type: String,
       default: `200px`,
     },
+    showLegnd: {
+      type: Boolean,
+      default: true
+    },
     title: {
       type: String,
       default: ``,
     },
-    unit: {
-      type: String,
-    },
   },
   components: {
     boxTop,
@@ -212,7 +225,7 @@ export default {
           },
         }],
         legend: {
-          show: true,
+          show: this.showLegnd,
           textStyle: {
             color: '#ffffff'//字体颜色
           }
@@ -245,10 +258,12 @@ export default {
 .el-select {
   width: 115px;
 }
+
 .input-with-select .el-input-group__prepend {
   background: rgba(10, 30, 55, 0.7);
   box-shadow: 0px 4px 4px rgba(49, 49, 49, 0.5);
 }
+
 .el-input-group {
   line-height: normal;
   display: inline-table;
@@ -261,14 +276,17 @@ export default {
     background-color: rgba(10, 30, 55, 0.7);
   }
 }
+
 .el-input__inner {
   background: rgba(10, 30, 55, 0.7);
 }
+
 // 修改下拉菜单背景颜色
 .el-scrollbar {
   background: #1d2f46;
   border-radius: 6px;
 }
+
 //下拉背景
 .el-card.is-hover-shadow:focus,
 .el-card.is-hover-shadow:hover,
@@ -284,12 +302,15 @@ export default {
   opacity: 0.8;
   border-radius: 6px;
 }
+
 .el-popper__arrow {
   display: none;
 }
+
 .el-select-dropdown__item {
   color: #fff;
 }
+
 //修改输入框背景颜色
 .el-input-group > .el-input__inner {
   box-shadow: 0px 4px 4px rgba(49, 49, 49, 0.5);
@@ -300,20 +321,24 @@ export default {
   border-right: 0;
   font-size: 14px;
 }
+
 .el-input-group--prepend .el-input__inner,
 .el-input-group__append {
   background: rgba(10, 30, 55, 0.7);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .el-input-group__append {
   border-left: 0;
 }
+
 .el-select-dropdown__wrap,
 .el-scrollbar__wrap,
 .el-scrollbar__wrap--hidden-default {
   background: rgba(10, 30, 55, 0.7);
 }
+
 //修改输入框字体
 .el-input-group--append .el-input__inner,
 .el-input-group__prepend {
@@ -327,6 +352,7 @@ export default {
   font-size: 25px;
   visibility: hidden;
 }
+
 //修改下拉框的字体
 .el-select-dropdown__list {
   padding: 5px;
@@ -337,15 +363,18 @@ export default {
     color: #ffff;
     font-size: 16px;
   }
+
   .el-select-dropdown__item.selected {
     color: #ffff;
   }
+
   //item选项的hover样式
   .el-select-dropdown__item.hover,
   .el-select-dropdown__item:hover {
     background: rgba(10, 30, 55, 0.7);
   }
 }
+
 // 修改下拉箭头左侧字体大小颜色
 .el-input-group__append button.el-button,
 .el-input-group__append div.el-select .el-input__inner,
@@ -356,6 +385,7 @@ export default {
   color: #ffff !important;
   font-size: 16px;
 }
+
 // 修改鼠标选中输入框时输入框的颜色
 input.el-input__inner:focus {
   border-color: #fff;

src/components/statisticsPanel/index.vue

@@ -49,8 +49,29 @@ export default {
     },
   },
   mounted() {
+    this.getTotalStatistics()
+  },
+  methods: {
+    getTotalStatistics() {
+      return this.$http
+          .get(`/api/screen/swpt/totalStatistics`)
+          .then((res) => {
+            const mapping = {
+              '今日访问次数': 'todayVisitCount',
+              '使用总人数': 'totalUserCount',
+              '入住商户总数': 'totalSettledMerchantCount',
+              '总访问次数': 'totalVisitCount',
+              '昨日活跃人数': 'yesterdayActiveUserCount'
+            };
+            this.testList.forEach((item) => {
+              const key = mapping[item.title];
+              if (key) {
+                item.number = res[key];
+              }
+            });
+          })
+    },
   },
-  methods: {},
   beforeDestroy() {
   },
 }
@@ -59,6 +80,7 @@ export default {
 .containerBox {
   display: flex;
   width: 880px;
+
   .boxItem {
     width: 20%;
     height: 74px;

src/config.js

@@ -1,10 +1,12 @@
 export default {
   development: {
     // baseApi: `http://192.168.1.86:8100`,
-    baseApi: `https://www.gzzzyd.com/tobacco-api`,
+    // baseApi: `https://www.gzzzyd.com/tobacco-api`,
+    baseApi: `http://192.168.0.223:8080`,
   },
   production: {
     // baseApi: `http://192.168.1.86:8100`,
-    baseApi: `https://www.gzzzyd.com/tobacco-api`,
+    // baseApi: `https://www.gzzzyd.com/tobacco-api`,
+    baseApi: `http://192.168.0.223:8080`,
   },
 }[process.env.NODE_ENV || `production`]

src/views/page1/index.vue

@@ -3,23 +3,22 @@
     <histogram
         style="position: absolute; left: 20px; top: 98px"
         class="animated fadeInLeft"
-        total='1700'
+        :total=goodsStatisticsTotal
         :barHeight="'234px'"
-        title="各区域移栽产量分析"
-        :area="Transplantarea"
-        :dataArray="TransplantdataArray"
+        :area="goodsStatisticsArea"
+        :dataArray="goodsStatisticsArray"
     />
     <cake
-        id="`订单统计分析`"
+        id="历史平台交易类型分布"
         style="position: absolute; top: 344px; left: 20px"
-        title="订单统计分析"
-        :data="statisticsData"
+        title="历史平台交易类型分布"
+        :data="tradeTypeDateList"
         class="animated fadeInLeft"
     />
     <slotCake
-        id="`历史平台交易统计分析`"
+        id="历史平台交易金额类型分布"
         style="position: absolute; top: 608px; left: 20px"
-        title="历史平台交易统计分析"
+        title="历史平台交易金额类型分布"
         :data="statisticsData"
         class="animated fadeInLeft"
     />
@@ -28,8 +27,7 @@
         class="animated fadeInLeft"
         id="订单商品类型排名"
         title="订单商品类型排名"
-        :area="HorizontalArea"
-        :dataArray="HorizontalArray"
+        :data="tradeTypeRankData"
     />
     <statisticsPanel
         class="animated zoomIn"
@@ -40,7 +38,6 @@
         transform: translate(-50%, 150%);
       "/>
     <threeMap
-        @toView="toView"
         class="animated zoomIn"
         style="
         position: absolute;
@@ -132,24 +129,15 @@ export default {
       },
       max: 100,
       autoVueFnInit: false,
-      statisticsData: {
-        title: `目标完成率`,
-        value: 0,
-        acrossList: [
-          {name: `年移栽数量`, value: undefined},
-          {name: `年移栽面积`, value: undefined},
-        ],
-        verticalList: [
-          {name: `移栽区域数`, value: undefined},
-          {name: `烟农数量`, value: undefined},
-        ],
-      },
+      statisticsData: [],
+      tradeTypeDateList: [],
       yearName: {
         lastName: `去年`,
         thisName: `今年`,
       },
-      TransplantdataArray: [],
-      Transplantarea: [],
+      goodsStatisticsArray: [],
+      goodsStatisticsArea: [],
+      goodsStatisticsTotal: null,
       Weatherarea: [],
       WeatherdataArray: {
         temperature: [],
@@ -165,11 +153,7 @@ export default {
         LastYear: [],
         thisYear: [],
       },
-      HorizontalArea: [],
-      HorizontalArray: {
-        Done: [],
-        Percentage: [],
-      },
+      tradeTypeRankData: [],
       getJson: {},
       isGetData: false,
       isWeather: false,
@@ -183,81 +167,82 @@ export default {
   computed: {},
   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
-    //     },
-    //   }
-    // )
+    this.$util.autoVueFn(
+        [
+          //   {
+          //     time: 1000 * 60,
+          //     fn: this.getWeatherForecast,
+          //   },
+          {
+            time: 1000 * 300,
+            fn: this.getGoodsStatistics,
+          },
+          {
+            time: 1000 * 300,
+            fn: this.getTradeTypeDate,
+          },
+          {
+            time: 1000 * 300,
+            fn: this.getStatistics,
+          },
+          //   {
+          //     time: 1000 * 60,
+          //     fn: this.getTransplantAreaInEachRegion,
+          //   },
+          {
+            time: 1000 * 360,
+            fn: this.getTradeTypeRankData,
+          },
+          //   {
+          //     time: 1000 * 60,
+          //     fn: this.getTrendAnalysis,
+          //   },
+        ],
+        {
+          vm: this,
+          batEnd() {
+            this.autoVueFnInit = 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: 区域编码,
-        },
-      })
-    },
     tabChange(val) {
       if (val === 0) {
         this.$router.push(`/page1`)
       } else if (val === 1) {
         this.$router.push(`/page2`)
-      }else if (val === 2) {
+      } else if (val === 2) {
         this.$router.push(`/page3`)
       }
       console.log(`val`, val)
     },
-    getAnalysisOfTransplantYieldInVariousRegions() {
+    getGoodsStatistics() {
       return this.$http
-          .get(`/api/analysisOfTransplantYieldInVariousRegions`)
+          .get(`/api/screen/swpt/goodsStatistics`)
           .then((res) => {
             const area = []
             const dataArray = []
-            res.forEach((element) => {
-              area.push(element.名称.slice(0, 2))
-              dataArray.push(element.值)
+            res.list.forEach((element) => {
+              area.push(element.label)
+              dataArray.push(element.value)
             })
-            this.Transplantarea = area
-            this.TransplantdataArray = dataArray
+            this.goodsStatisticsArea = area
+            this.goodsStatisticsTotal = res.total
+            this.goodsStatisticsArray = dataArray
             this.isGetData = true
           })
     },
+    getTradeTypeDate() {
+      return this.$http
+          .get(`/api/screen/swpt/tradeType`)
+          .then((res) => {
+            this.tradeTypeDateList = res.list
+          })
+    },
     getWeatherForecast() {
       return this.$http
           .get(`/api/weatherForecast`, {
@@ -298,48 +283,15 @@ export default {
         this.isWavyLine = 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
+    getTradeTypeRankData() {
+      this.$http.get(`/api/screen/swpt/tradeTypeRank`).then((res) => {
+        console.log(res)
+        this.tradeTypeRankData = res
       })
     },
     getStatistics() {
-      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
-        })
-        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 this.$http.get(`/api/screen/swpt/tradeTypeAmount`).then((res) => {
+        this.statisticsData = res.list
       })
     },
     getTrendAnalysis() {

src/views/page2/index.vue

@@ -74,7 +74,6 @@
 <script>
 import mapOfTongren from '@/http/mapOfTongren.json'
 import bgBox from '@/components/bgBox/index.vue'
-import cake from '@/components/Customize/cake'
 import HybridCharts from '@/components/Customize/HybridCharts'
 import slotCake from '@/components/Customize/slotCake'
 import histogram from '@/components/Customize/histogram'
@@ -98,7 +97,7 @@ export default {
     statisticsPanel,
     bgBox,
     threeMap,
-    cake,
+
   },
   data() {
     return {
@@ -124,8 +123,8 @@ export default {
         lastName: `去年`,
         thisName: `今年`,
       },
-      TransplantdataArray: [],
-      Transplantarea: [],
+      TransplantdataArray: [120, 200, 150, 80, 70, 110, 130],
+      Transplantarea: ['商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型'],
       Weatherarea: [],
       WeatherdataArray: {
         temperature: [],

src/views/page3/index.vue

@@ -70,7 +70,6 @@
 <script>
 import mapOfTongren from '@/http/nationwide.json'
 import bgBox from '@/components/bgBox/index.vue'
-import cake from '@/components/Customize/cake'
 import HybridCharts from '@/components/Customize/HybridCharts'
 import liquidFill from '@/components/Customize/liquidfill'
 import wordClouds from '@/components/Customize/wordClouds'
@@ -96,15 +95,9 @@ export default {
     statisticsPanel,
     bgBox,
     threeMap,
-    cake,
   },
   data() {
     return {
-      tabs: {
-        index: 0,
-        list: [`订单总量`, `订单交易额`],
-      },
-      max: 100,
       autoVueFnInit: false,
       statisticsData: [
         {
@@ -126,10 +119,7 @@ export default {
           amount: 3322
         }
       ],
-      yearName: {
-        lastName: `去年`,
-        thisName: `今年`,
-      },
+
       TransplantdataArray: [],
       Transplantarea: [],
       Weatherarea: [],

vue.config.js

@@ -23,7 +23,7 @@ module.exports = defineConfig({
       realContentHash: true,
     },
   },
-  publicPath: process.env.NODE_ENV === `production` ? `/tryc/` : `/`,
+  publicPath: process.env.NODE_ENV === `production` ? `/dsdp/` : `/`,
   productionSourceMap: false,
   lintOnSave: false,
   devServer: {