feat: 全县交易统计

src/assets/styles/common.less

@@ -8,9 +8,7 @@
   height: 1080px;
 }
 .g-bg2 {
-  background-image: url('~@/assets/img2/综合总览/编组 16.png'),
-  url('~@/assets/img2/综合总览/背景左线条.png'),
-  url('~@/assets/img2/综合总览/背景线条上.png');
+  background-image:url('~@/assets/img/page1bg.png');
   background-position: right 10px bottom 10px, 10px center,
     left 510px top 13px;
   background-size: auto;
@@ -19,10 +17,7 @@
   height: 1080px;
 }
 .g-bg3 {
-  background-image: url('~@/assets/img2/种植分析详情/bg右.png'),
-    url('~@/assets/img2/种植分析详情/bg左.png'),
-    url('~@/assets/img2/种植分析详情/bg上.png'),
-    url('~@/assets/img2/综合总览/背景.png');
+  background-image:url('~@/assets/img/page1bg.png');
   background-position: right 10px bottom 10px, 10px center,
     left 510px top 13px, center;
   background-size: auto;

src/components/Customize/Complex histograms.vue

@@ -0,0 +1,166 @@
+<!-- 圆柱柱状图 -->
+<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'
+
+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))
+      let data = {
+        data: [
+          [92, 0, 8, 143, 89, 67, 0, 0],
+          [12, 0, 8, 14, 23, 44, 0, 0],
+        ],
+        color: [["#00FFE3", "#4693EC"], ["#1B92FF", "#1B92FF"]],
+        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
+        legend: ["今年当月", "去年当月"],
+      };
+
+      let series = data.data.map((item, index) => {
+        return {
+          name: data.legend[index],
+          type: 'bar',
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: data.color[index][0]
+                },
+                {
+                  offset: 1,
+                  color: data.color[index][1]
+                }
+              ])
+            }
+          },
+          data: data.data[index]
+        }
+      })
+      this.option = {
+        xAxis: {
+          axisLabel: {
+            color: '#29d0d0'
+          },
+          type: 'category',
+          data: data.xAxis
+        },
+        legend: {
+          show: true,
+          textStyle: {
+            color: '#ffffff'//字体颜色
+          }
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              show: true,
+            },
+          },
+        },
+        grid: {
+          top: '15%',
+          left: '5%',
+          right: '5%',
+          bottom: '15%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: series
+      }
+      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: 90%;
+  }
+
+  .title {
+    position: absolute;
+    top: 20px;
+    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/HybridCharts.vue

@@ -0,0 +1,503 @@
+<!-- 饼图统计 -->
+<template>
+  <div class="box">
+    <boxTop :title="title"/>
+    <div class="cakeBox">
+      <div class="flex">
+        <div class="chartsDom" id="PieCharts"></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>
+        </div>
+      </div>
+    </div>
+    <div id="rankingCharts"></div>
+  </div>
+</template>
+
+<script>
+import boxTop from '@/components/boxTop/index.vue'
+
+export default {
+  data() {
+    return {
+      isHoist: true,
+      tabs: {
+        index: this.$props.tabIndex,
+        list: [`交易额`, `交易类型`],
+      },
+      chartData: [
+        {
+          value: 30,
+          name: "平台一",
+          color: '#975fe4',
+          amount: 3395,
+        },
+        {
+          value: 40,
+          name: "平台二",
+          color: '#45a5ff',
+          amount: 2323
+        },
+        {
+          value: 50,
+          name: "平台三",
+          color: '#81c926',
+          amount: 3322
+        },
+        {
+          value: 20,
+          name: "平台四",
+          amount: 6644,
+          color: '#ff8e49'
+        },
+        {
+          value: 16,
+          name: "平台五",
+          amount: 3211,
+          color: '#37cbcb'
+        },
+      ]
+    }
+  },
+  components: {
+    boxTop,
+  },
+  props: {
+    id: {
+      type: String,
+      default: ``,
+    },
+    data: {
+      type: Object,
+      default: new Object(),
+    },
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: ``,
+    },
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
+    },
+  },
+  async mounted() {
+    this.getEchart()
+    this.getEchartAgain()
+  },
+  watch: {
+    data: {
+      handler() {
+        this.getEchart()
+        this.getEchartAgain()
+      },
+      deep: true, // 深度监听
+      immediate: true, // 立即执行
+    },
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById('PieCharts'))
+      const sum = this.chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+
+      const color = this.chartData.map(item => item.color);
+      for (let i = 0; i < this.chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...this.chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        color,
+        title: {
+          show: true,
+          text: sum.toLocaleString(),
+          subtext: "订单总量",
+          x: "45%",
+          y: "35%",
+          itemGap: 6,
+          textStyle: {
+            color: "hsla(179, 100%, 65%, 1)",
+            fontSize: 24,
+            fontWeight: "400"
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "400"
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["82%", "92%"],
+            center: ["50%", "50%"],
+            data: pieData1,
+            labelLine: {
+              length: 8,
+              length2: 16,
+              lineStyle: {
+                width: 1,
+              },
+            },
+            label: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            radius: ["78%", "81%"],
+            center: ["50%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "77%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option)
+    },
+    getEchartAgain() {
+      let myChart = echarts.init(document.getElementById('rankingCharts'))
+      const dataSource = [
+        {name: '服务数据管理', value: 3713, percent: "29.5"},
+        {name: '组织部', value: 3022, percent: "32"},
+        {name: '服务数据', value: 2647, percent: "24.3"},
+        {name: '水务管理', value: 2291, percent: "50"},
+        {name: '水务管理', value: 2291, percent: "50"}
+      ];
+      let dataSourcemax = 0
+      dataSource.forEach((item) => {
+        if (dataSourcemax < item.value) {
+          dataSourcemax = item.value
+        }
+      })
+      const salvProMax = dataSource.map(item => dataSourcemax)
+      const title = '责任单位指标总数'
+      let option = {
+        title: [
+          {
+            show: false,
+            text: title,
+            fontSize: 20,
+            color: '#fff',
+            fontWeight: 600,
+            x: '70%',
+            y: '3%',
+          },
+        ],
+        grid: {
+          left: '6%',
+          right: '6%',
+          top: '10%',
+          bottom: '8%',
+        },
+        xAxis: {
+          show: false,
+          type: 'value',
+          max: dataSourcemax + 100
+        },
+        yAxis: [
+          {
+            type: 'category',
+            inverse: true,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#fff',
+              align: 'left',
+              verticalAlign: 'bottom',
+              position: 'right',
+              padding: [0, 0, 5, 15],
+              fontSize: 12,
+            },
+            data: dataSource.map(item => item.name)
+          }
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              padding: [0, 0, 0, 0],
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
+                    [{
+                      offset: 0,
+                      color: 'rgba(77, 255, 251, 0.3)'
+                    },
+                      {
+                        offset: 1,
+                        color: 'rgba(77, 255, 251, 1)'
+                      }
+                    ], false),
+
+              }
+            },
+            label: {
+              show: false,
+              offset: [10, -20],
+              formatter: '{c}人',
+              position: 'insideRight', // 在上方显示
+              // position: 'insideLeft',
+              // 数值样式，显示的文字大小和颜色
+              fontSize: '12',
+              color: '#f00',
+              fontWeight: 400,
+              lineHeight: '18'
+            },
+
+            data: dataSource
+          },
+          {
+            z: 1,
+            name: '背景',
+            type: 'bar',
+            barWidth: 8,
+            barGap: '-100%',
+            data: salvProMax,
+            itemStyle: {
+              color: 'rgba(0, 255, 255, 0.3)',
+              // borderRadius: [30, 30, 30, 30]
+            },
+            tooltip: {show: false},
+            label: {
+              show: true, // 开启显示
+              offset: [10, -20],
+              formatter: function (fItem) {
+                let obj = dataSource.find(item => item.name === fItem.name)
+                return `{unitWid|交易量}{value|${obj.value}}{unit|交易额}{percent|${obj.percent}}`
+              },
+              position: 'insideRight', // 在上方显示
+              // 数值样式，显示的文字大小和颜色
+              fontSize: '14',
+              fontWeight: 400,
+              lineHeight: '18',
+              rich: {
+                value: {
+                  color: '#00ffff',
+                  fontSize: 16,
+                  padding: [0, 0, -10, 5]
+                },
+                percent: {
+                  color: '#00ffff',
+                  fontSize: 16,
+                  padding: [0, 0, -10, 5],
+                  align: 'right',
+                },
+                unitWid: {
+                  fontSize: 12,
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  padding: [0, 0, -10, 40],
+                  // width: 80,
+                },
+                unit: {
+                  fontSize: 12,
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  padding: [0, 0, -10, 40]
+                }
+              }
+            },
+          }
+        ]
+      };
+
+      myChart.setOption(option)
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.box {
+  width: 460px;
+  height: 428px;
+  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);
+}
+
+#rankingCharts {
+  width: 460px;
+  height: 210px;
+}
+
+.cakeBox {
+  width: 460px;
+  height: 160px;
+
+  .chartsDom {
+    margin: 8px 30px;
+    width: 150px;
+    height: 150px;
+  }
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.l-height {
+  line-height: 100%;
+}
+
+.space_around {
+  justify-content: space-around;
+  align-items: center;
+}
+
+.space_between {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.number {
+  text-align: center;
+  font-size: 16px;
+  padding: 4px 0;
+  margin: 3px 0;
+}
+
+.text {
+  font-size: 14px;
+  color: #888888;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.column_reverse {
+  flex-direction: column-reverse;
+}
+
+.panel {
+  height: 114px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+
+  .panel-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 20px;
+    width: 195px;
+    font-size: 12px;
+
+    .color {
+      border-radius: 2px;
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  margin: 10px 30px;
+
+  .label {
+    font-weight: 600;
+    font-size: 16px;
+    color: #FFFFFF;
+
+  }
+
+  .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;
+  }
+
+}
+
+.title > * {
+  margin: 0 6px;
+}
+
+.AICenter {
+  display: flex;
+  align-items: center
+}
+
+</style>

src/components/Customize/cake.vue

@@ -1,42 +1,64 @@
 <!-- 饼图统计 -->
 <template>
-  <div>
-    <boxTop :title="title" />
-    <div class="cakeBox flex" :style="{ width: barWidth }">
-      <div class="chartsdom" :id="id"></div>
-<!--      <div class="panel">-->
-<!--        <div class="panelitem flex space_around">-->
-<!--          <div v-for="item in data.acrossList" :key="item.index">-->
-<!--            <div class="number">{{ item.value }}</div>-->
-<!--            <div class="text">-->
-<!--              <img class="img1" src="../../assets/img/rectangle.png" alt="" />-->
-<!--              {{ item.name }}-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <div class="panelitem">-->
-<!--          <div-->
-<!--            v-for="item in data.verticalList"-->
-<!--            :key="item.index"-->
-<!--            class="flex space_between secondItem"-->
-<!--          >-->
-<!--            <img class="img" src="../../assets/img/tree.png" alt="" />-->
-<!--            <div>{{ item.name }}</div>-->
-<!--            <div>{{ item.value }}</div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
+  <div class="box">
+    <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="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>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import boxTop from '@/components/boxTop/index.vue'
+
 export default {
   data() {
     return {
-      option: null,
-      information: {},
+      isHoist: true,
+      chartData: [
+        {
+          value: 30,
+          name: "待付款",
+          color: '#975fe4',
+          amount: 3395,
+        },
+        {
+          value: 40,
+          name: "已付款",
+          color: '#45a5ff',
+          amount: 2323
+        },
+        {
+          value: 50,
+          name: "已发货",
+          color: '#81c926',
+          amount: 3322
+        },
+        {
+          value: 20,
+          name: "待收货",
+          amount: 6644,
+          color: '#ff8e49'
+        },
+        {
+          value: 16,
+          name: "已完成",
+          amount: 3211,
+          color: '#37cbcb'
+        },
+      ]
     }
   },
   components: {
@@ -47,10 +69,6 @@ export default {
       type: String,
       default: ``,
     },
-    barWidth: {
-      type: String,
-      default: `401px`,
-    },
     data: {
       type: Object,
       default: new Object(),
@@ -79,199 +97,186 @@ export default {
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById(this.id))
-      const title = this.data.title
-      const value = this.data.value
-      const splitLineLength = `19%`
-      const splitLineDistance = -5
-      const splitLineWidth = 2
-      const int = value.toFixed(1).split(`.`)[0]
-      const float = value.toFixed(1).split(`.`)[1]
-      this.option = {
+      const sum = this.chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+
+      const color = this.chartData.map(item => item.color);
+      for (let i = 0; i < this.chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...this.chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        color,
         title: {
-          text: `{a|` + int + `}{b|.` + float + `%}\n{c|` + title + `}`,
-          x: `center`,
-          y: `center`,
+          show: true,
+          text: sum.toLocaleString(),
+          subtext: "订单总量",
+          x: "45%",
+          y: "35%",
+          itemGap: 6,
           textStyle: {
-            rich: {
-              a: {
-                fontSize: 36,
-                color: `#fff`,
-              },
-              b: {
-                fontSize: 20,
-                color: `#96A2BC`,
-                padding: [2, 0, 0, 0],
+            color: "hsla(179, 100%, 65%, 1)",
+            fontSize: 24,
+            fontWeight: "400"
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "400"
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["82%", "92%"],
+            center: ["50%", "50%"],
+            data: pieData1,
+            labelLine: {
+              length: 8,
+              length2: 16,
+              lineStyle: {
+                width: 1,
               },
-              c: {
-                fontSize: 16,
-                color: `#96A2BC`,
-                padding: [2, 0, 0, 0],
+            },
+            label: {
+              show: false,
+              fontFamily: "ysbth",
+              position: "outside",
+              padding: [0, 0, 0, 0],
+              formatter(params) {
+                if (params.name === "") {
+                  return "";
+                }
+                return `${params.percent.toFixed(0)}%`;
               },
+              color: "#fff",
+              fontSize: "14px",
+              lineHeight: 10,
             },
           },
-        },
-        series: [
           {
-            type: `pie`,
-            radius: [`84%`, `70%`],
-            silent: true,
-            clockwise: false,
-            startAngle: 90,
-            z: 0,
-            zlevel: 0,
+            type: "pie",
+            radius: ["78%", "81%"],
+            center: ["50%", "50%"],
+            animation: false,
+            hoverAnimation: false,
             data: [
               {
-                value: value,
-                itemStyle: {
-                  color: {
-                    type: `linear`,
-                    x: 1,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                      {
-                        offset: 0,
-                        color: `#DFFFFF`, // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: `#0E7E7D`, // 100% 处的颜色
-                      },
-                    ],
-                    global: false, // 缺省为 false
-                  },
-                },
-                label: {
-                  show: false,
-                },
-              },
-              {
-                value: 100 - value,
-                label: {
-                  show: false,
-                },
-                itemStyle: {
-                  normal: {
-                    color: `rgba(15, 31, 52,1)`,
-                  },
-                },
+                value: 100,
               },
             ],
-          },
-          {
-            name: ``,
-            type: `gauge`,
-            radius: `88%`,
-            center: [`50%`, `50%`],
-            startAngle: 0,
-            endAngle: 360,
-            splitNumber: 100,
-            hoverAnimation: true,
-            axisTick: {
+            label: {
               show: false,
             },
-            splitLine: {
-              length: splitLineLength,
-              distance: splitLineDistance,
-              lineStyle: {
-                width: splitLineWidth,
-                color: `#000`,
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
               },
             },
-            axisLabel: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
           },
           {
-            name: `外边框`,
-            type: `pie`,
-            clockwise: false, // 顺时加载
-            emphasis: {
-              scale: false, // 鼠标移入变大
-            },
-            center: [`50%`, `50%`],
-            radius: [`88%`, `88%`],
-            label: {
-              show: false,
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "77%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
             },
             data: [
               {
-                value: 0,
-                name: ``,
-                itemStyle: {
-                  borderWidth: 2,
-                  borderColor: `#24FFFD`,
-                },
+                value: 100,
               },
             ],
           },
         ],
-      }
-      myChart.setOption(this.option)
+      };
+      myChart.setOption(option)
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
+.box {
+  width: 460px;
+  height: 250px;
+  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);
+}
+
 .cakeBox {
-  width: 401px;
-  height: 234px;
+  width: 460px;
+  height: 210px;
+
   .chartsdom {
-    width: 90%;
-    height: 90%;
-  }
-  .panel {
-    width: 80%;
-    height: 80%;
-    .panelitem {
-      border-top: 2px solid rgba(255, 255, 255, 0.3);
-      box-sizing: border-box;
-      height: 50%;
-      margin: 0 10px;
-      .secondItem {
-        font-size: 14px;
-        margin: 21px 0;
-      }
-    }
+    margin: 0 30px;
+    width: 150px;
+    height: 150px;
   }
 }
+
 .flex {
   display: flex;
+  align-items: center;
 }
-.img {
-  height: 25px;
-  margin-right: 3px;
-}
-.img1 {
-  height: 17px;
-  width: 3px;
-  margin-right: 3px;
-}
+
 .l-height {
   line-height: 100%;
 }
+
 .space_around {
   justify-content: space-around;
   align-items: center;
 }
+
 .space_between {
   justify-content: space-between;
   align-items: center;
 }
+
 .number {
   text-align: center;
   font-size: 16px;
   padding: 4px 0;
   margin: 3px 0;
 }
+
 .text {
   font-size: 14px;
   color: #888888;
@@ -279,7 +284,57 @@ export default {
   justify-content: center;
   align-items: center;
 }
+
 .column_reverse {
   flex-direction: column-reverse;
 }
+
+.panel {
+  height: 114px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+
+  .panel-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 20px;
+    width: 195px;
+
+    .color {
+      border-radius: 2px;
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  margin: 10px 30px;
+
+  .label {
+    font-weight: 600;
+    font-size: 16px;
+    color: #FFFFFF;
+
+  }
+
+  .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;
+  }
+
+}
+
+.title > * {
+  margin: 0 6px;
+}
 </style>

src/components/Customize/histogram.vue

@@ -0,0 +1,130 @@
+<!-- 圆柱柱状图 -->
+<template>
+  <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>
+</template>
+
+<script>
+import boxTop from '@/components/boxTop/index.vue'
+
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+  components: {
+    boxTop,
+  },
+  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 {
+    position: absolute;
+    top: 20px;
+    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

@@ -0,0 +1,402 @@
+<!-- 饼图统计 -->
+<template>
+  <div class="box">
+    <boxTop :title="title">
+      <div 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">
+        <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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import boxTop from '@/components/boxTop/index.vue'
+
+export default {
+  data() {
+    return {
+      isHoist: true,
+      tabs: {
+        index: this.$props.tabIndex,
+        list: [`交易额`, `交易类型`],
+      },
+      chartData: [
+        {
+          value: 30,
+          name: "待付款",
+          color: '#975fe4',
+          amount: 3395,
+        },
+        {
+          value: 40,
+          name: "已付款",
+          color: '#45a5ff',
+          amount: 2323
+        },
+        {
+          value: 50,
+          name: "已发货",
+          color: '#81c926',
+          amount: 3322
+        },
+        {
+          value: 20,
+          name: "待收货",
+          amount: 6644,
+          color: '#ff8e49'
+        },
+        {
+          value: 16,
+          name: "已完成",
+          amount: 3211,
+          color: '#37cbcb'
+        },
+      ]
+    }
+  },
+  components: {
+    boxTop,
+  },
+  props: {
+    id: {
+      type: String,
+      default: ``,
+    },
+    data: {
+      type: Object,
+      default: new Object(),
+    },
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: ``,
+    },
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
+    },
+  },
+  async mounted() {
+    this.getEchart()
+  },
+  watch: {
+    data: {
+      handler() {
+        this.getEchart()
+      },
+      deep: true, // 深度监听
+      immediate: true, // 立即执行
+    },
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(this.id))
+      const sum = this.chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+
+      const color = this.chartData.map(item => item.color);
+      for (let i = 0; i < this.chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...this.chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        color,
+        title: {
+          show: true,
+          text: sum.toLocaleString(),
+          subtext: "订单总量",
+          x: "45%",
+          y: "35%",
+          itemGap: 6,
+          textStyle: {
+            color: "hsla(179, 100%, 65%, 1)",
+            fontSize: 24,
+            fontWeight: "400"
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: "400"
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["82%", "92%"],
+            center: ["50%", "50%"],
+            data: pieData1,
+            labelLine: {
+              length: 8,
+              length2: 16,
+              lineStyle: {
+                width: 1,
+              },
+            },
+            label: {
+              show: false,
+              fontFamily: "ysbth",
+              position: "outside",
+              padding: [0, 0, 0, 0],
+              formatter(params) {
+                if (params.name === "") {
+                  return "";
+                }
+                return `${params.percent.toFixed(0)}%`;
+              },
+              color: "#fff",
+              fontSize: "14px",
+              lineHeight: 10,
+            },
+          },
+          {
+            type: "pie",
+            radius: ["78%", "81%"],
+            center: ["50%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "77%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.box {
+  width: 460px;
+  height: 220px;
+  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);
+}
+
+.cakeBox {
+  width: 460px;
+  height: 180px;
+
+  .chartsDom {
+    margin: 0 30px;
+    width: 150px;
+    height: 150px;
+  }
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.l-height {
+  line-height: 100%;
+}
+
+.space_around {
+  justify-content: space-around;
+  align-items: center;
+}
+
+.space_between {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.number {
+  text-align: center;
+  font-size: 16px;
+  padding: 4px 0;
+  margin: 3px 0;
+}
+
+.text {
+  font-size: 14px;
+  color: #888888;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.column_reverse {
+  flex-direction: column-reverse;
+}
+
+.panel {
+  height: 114px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+
+  .panel-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 20px;
+    width: 195px;
+    font-size: 12px;
+
+    .color {
+      border-radius: 2px;
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  margin: 10px 30px;
+
+  .label {
+    font-weight: 600;
+    font-size: 16px;
+    color: #FFFFFF;
+
+  }
+
+  .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;
+  }
+
+}
+
+.title > * {
+  margin: 0 6px;
+}
+
+.AICenter {
+  display: flex;
+  align-items: center
+}
+
+.tabs {
+  text-align: center;
+  display: flex;
+  background-image: url('~@/assets/img2/综合总览/编组 9.png');
+  background-repeat: no-repeat;
+  background-position: center bottom;
+
+  .tab-item {
+    line-height: 56px;
+    margin-right: 32px;
+
+    font-size: 16px;
+    color: #FFFFFF;
+    text-shadow: 0px 2px 4px #004F4D;
+    text-align: left;
+    font-style: normal;
+    position: relative;
+    cursor: pointer;
+
+    &.cur {
+      color: hsla(179, 100%, 65%, 1);
+    }
+
+    &:not(:last-child)::after {
+      content: '';
+      display: block;
+      width: 1px;
+      height: 16px;
+      background-color: rgba(255, 255, 255, 0.3);
+      position: absolute;
+      top: 50%;
+      right: -16px;
+      transform: translate(0%, -50%);
+    }
+  }
+}
+</style>

src/components/Customize/weatherForecast.vue

@@ -1,32 +1,50 @@
 <!-- 温度折线图 -->
 <template>
-  <div>
-    <boxTop :title="title" />
-    <div class="weatherBox" :style="{ width: barWidth }">
-      <div class="chartsdom" id="weather"></div>
-    </div>
+  <div class="weatherBox" :style="{height:barHeight}">
+    <boxTop :title="title">
+      <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>
+    </boxTop>
+    <div class="chartsdom" :id="id"></div>
   </div>
 </template>
 
 <script>
+import {Select, Option} from 'element-ui'
+import Vue from 'vue'
+
+Vue.use(Select)
+Vue.use(Option)
+
 import boxTop from '@/components/boxTop/index.vue'
+
 export default {
   data() {
     return {
+      value: '2025',
       option: null,
       information: {},
     }
   },
   props: {
+    id: {
+      type: String,
+      default: ``,
+    },
     area: {
       type: Array,
     },
     dataArray: {
       type: Object,
     },
-    barWidth: {
+    barHeight: {
       type: String,
-      default: `401px`,
+      default: `200px`,
     },
     title: {
       type: String,
@@ -35,10 +53,6 @@ export default {
     unit: {
       type: String,
     },
-    alertValue: {
-      type: Number,
-      default: 100,
-    },
   },
   components: {
     boxTop,
@@ -53,146 +67,176 @@ export default {
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById(`weather`))
-      let visualMap = []
-      let upColor = [`red`] // 超出标准线折线图的颜色
-      let lineColor = [`#17E2CD`] // 折线图颜色
-      lineColor.map((item, index) => {
-        visualMap.push({
-          type: `piecewise`,
-          show: false,
-          dimension: 1,
-          seriesIndex: index,
-          pieces: [
-            {
-              gt: this.alertValue,
-              color: upColor[index], // 超过部分的颜色
-            },
-            {
-              lt: 0,
-              color: lineColor[index], // 未超出标准线颜色
-            },
-          ],
-          outOfRange: {
-            // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
-            color: lineColor[index],
+      let myChart = echarts.init(document.getElementById(this.id))
+
+      function addAlpha(rgb, alpha) {
+        // 匹配rgb颜色格式
+        const rgbPattern = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
+        const match = rgb.match(rgbPattern);
+
+        if (!match) {
+          throw new Error('Invalid RGB format');
+        }
+
+        // 提取红、绿、蓝值
+        const r = match[1];
+        const g = match[2];
+        const b = match[3];
+
+        // 返回rgba颜色格式
+        return `rgba(${r},${g},${b},${alpha})`;
+      }
+
+      let colors = [
+        'rgb(150,208,135)',
+        'rgb(63,162,246)',
+        'rgb(244,162,97)',
+        'rgb(145,122,176)'
+      ]
+
+      let data = {
+        data: [
+          [92, 0, 8, 143, 89, 67, 0, 0, 0, 0, 197, 0],
+          [12, 0, 8, 14, 23, 44, 0, 0, 0, 0, 19, 0],
+        ],
+        unit: "亩",
+        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        legend: ["今年当月", "去年当月"],
+      };
+
+      let series = data.data.map((item, index) => {
+        return {
+          name: data.legend[index],
+          type: 'line',
+          smooth: false, //是否平滑
+          showAllSymbol: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          lineStyle: {
+            color: colors[index],
+          },
+          label: {
+            show: false,
+            position: 'top',
+            textStyle: {
+              color: colors[index],
+            }
           },
-        })
+          itemStyle: {
+            color: colors[index],
+            borderColor: "#fff",
+            borderWidth: 2,
+            shadowColor: 'rgba(0, 0, 0, .1)',
+            shadowBlur: 0,
+            shadowOffsetY: 2,
+            shadowOffsetX: 2,
+          },
+          tooltip: {
+            show: true
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: addAlpha(colors[index], 0.2)
+              },
+                {
+                  offset: 1,
+                  color: addAlpha(colors[index], 0)
+                }
+              ], false),
+              shadowColor: 'rgba(0,179,244, 0.5)',
+              shadowBlur: 20
+            }
+          },
+          data: data.data[index]
+        }
       })
       this.option = {
-        // 悬浮框
         tooltip: {
-          trigger: `axis`,
+          show: true,
+          trigger: 'axis',
           axisPointer: {
-            type: `shadow`,
-          },
-          backgroundColor: `rgba(0,0,0,0.8)`,
-          borderColor: `rgba(255,255,255,0.3)`,
-          textStyle: {
-            fontSize: 20,
-            color: `#fff`,
-          },
-          formatter: function (params) {
-            return [
-              params[0].axisValueLabel,
-              params[0].value +
-                `℃` +
-                `<i style="padding:0 12px"></i> ` +
-                params[1].value,
-            ].join(`<br>`)
+            label: {
+              show: true,
+            },
           },
         },
-        // 图例
-        legend: {
-          data: [`CO`, `Co2`],
-        },
         grid: {
-          left: 50,
-          right: 20,
-          top: 40,
-          bottom: 20,
+          top: '15%',
+          left: '5%',
+          right: '5%',
+          bottom: '15%',
+          containLabel: true
         },
-        // x轴
-        xAxis: {
-          type: `category`,
-          axisLabel: {
-            formatter: `{value}`,
-            color: `#c7d6f2`,
-            fontSize: `12px`,
-            fontFamily: `Microsoft YaHei`,
-          },
-
+        xAxis: [{
+          type: 'category',
           boundaryGap: true,
-          data: this.area,
-          axisTick: {
-            show: false,
+          axisLine: {
+            show: true
           },
-        },
-        // y轴
-        yAxis: {
-          type: `value`,
-          name: this.unit,
-          axisLabel: {
-            textStyle: {
-              color: `#65ABE7`,
+          splitArea: {
+            // show: true,
+            color: '#f00',
+            lineStyle: {
+              color: '#f00'
             },
           },
-          nameTextStyle: {
-            color: `#65ABE7`,
-            fontSize: 12,
-            lineHeight: 20,
+          axisLabel: {},
+          splitLine: {
+            show: false
           },
-        },
-        // 超出标准线颜色
-        visualMap: visualMap,
-        color: lineColor,
-        // 数据
-        series: [
-          {
-            data: this.dataArray.temperature,
-            connectNulls: true,
-            type: `line`,
-            symbolSize: 0,
-            // 标记线
-            markLine: {
-              symbol: `none`,
-              silent: true,
-              lineStyle: {
-                color: `red`,
-              },
-              data: [
-                {
-                  yAxis: this.alertValue,
-                  label: {
-                    position: `end`, // 文字位置
-                    formatter: ``, // 文字
-                    color: `red`, // 文字颜色
-                  },
-                },
-              ],
-            },
+          data: data.xAxis
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgba(255,255,255,0.1)'
+            }
           },
-          {
-            data: this.dataArray.Weather,
-            type: `line`,
+          axisLine: {
+            show: true,
           },
-        ],
-      }
+          axisLabel: {
+            show: true,
+            margin: 20,
+            textStyle: {},
+          },
+          axisTick: {
+            show: true,
+          },
+        }],
+        legend: {
+          show: true,
+          textStyle: {
+            color: '#ffffff'//字体颜色
+          }
+        },
+        series: series
+      };
       myChart.setOption(this.option, true)
     },
   },
-  beforeDestroy() {},
+  beforeDestroy() {
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .weatherBox {
-  width: 401px;
-  height: 234px;
+  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 {
     width: 100%;
-    height: 100%;
+    height: 90%;
   }
 }
+
+
 </style>

src/components/bgBox/index.vue

@@ -145,7 +145,6 @@ export default {
       font-size: 25px;
       text-align: center;
       display: flex;
-      background-image: url('~@/assets/img2/综合总览/编组 9.png');
       background-repeat: no-repeat;
       background-position: center bottom;
       width: 766px;
@@ -189,6 +188,7 @@ export default {
           text-align: right;
           font-style: normal;
           margin-right: 20px;
+          width: 115px;
         }
 
       }
@@ -231,4 +231,5 @@ export default {
   display: flex;
   align-items: center
 }
+
 </style>

src/components/boxTop/index.vue

@@ -2,10 +2,11 @@
   <div class="containerBox">
     <div class="title">
       <div class="titleZn">{{ title }}</div>
+      <div>
+        <slot></slot>
+      </div>
     </div>
-    <div>
-      <slot>&nbsp;</slot>
-    </div>
+
   </div>
 </template>
 
@@ -41,11 +42,12 @@ export default {
     background-size: cover;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 
     .titleZn {
       height: 30px;
       font-family: YouSheBiaoTiHei, sans-serif;
-      font-size: 24px;
+      font-size: 20px;
       background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
       background-clip: text;
       -webkit-background-clip: text;

src/router/index.js

@@ -6,16 +6,16 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: `/`,
+    redirect: `/page1`,
+  },
+  {
+    path: `/login`,
     name: `Login`,
     component: () => import(`@/views/Login.vue`),
     meta: {
       title: `登录界面`,
     },
   },
-  {
-    path: `/login`,
-    redirect: `/`,
-  },
   {
     path: `/page1`,
     name: `page1`,

src/views/page1/index.vue

@@ -1,68 +1,43 @@
 <template>
   <bgBox :tabChange="tabChange" class="bgBox" :tabIndex="0">
-    <cake
-        id="`实时统计`"
-        style="position: absolute; top: 115px; left: 50px"
-        title="实时统计"
-        :data="statisticsData"
+    <histogram
+        style="position: absolute; left: 20px; top: 98px"
         class="animated fadeInLeft"
-        v-if="isCake"
-    />
-    <cylindricalHistogram
-        style="position: absolute; left: 50px; top: 430px"
-        class="animated fadeInLeft"
-        v-if="isGetData"
-        :unit="`公斤/产量`"
+        total='1700'
+        :barHeight="'234px'"
         title="各区域移栽产量分析"
         :area="Transplantarea"
         :dataArray="TransplantdataArray"
     />
-    <weatherForecast
-        :unit="`摄氏度`"
-        style="position: absolute; left: 50px; top: 760px"
+    <cake
+        id="`订单统计分析`"
+        style="position: absolute; top: 344px; left: 20px"
+        title="订单统计分析"
+        :data="statisticsData"
         class="animated fadeInLeft"
-        v-if="isWeather"
-        title="天气预报"
-        :area="Weatherarea"
-        :dataArray="WeatherdataArray"
-        :alertValue="30"
     />
-    <wavyLineChart
-        :unit="`平方米/面积`"
-        id="`wavyLineChart`"
-        :lineName="yearName"
-        style="position: absolute; right: 50px; top: 115px"
-        class="animated fadeInRight"
-        v-if="isWavyLine"
-        title="各区域移栽面积"
-        :area="wavyLineArea"
-        :dataArray="wavyLinedataArray"
-        smooth="true"
+    <slotCake
+        id="`历史平台交易统计分析`"
+        style="position: absolute; top: 608px; left: 20px"
+        title="历史平台交易统计分析"
+        :data="statisticsData"
+        class="animated fadeInLeft"
     />
     <HorizontalHistogram
-        style="position: absolute; right: 50px; top: 430px"
-        class="animated fadeInRight"
-        v-if="isHorizontal"
-        id="`移栽情况分析`"
-        title="移栽情况分析"
+        style="position: absolute; left: 20px; top: 840px"
+        class="animated fadeInLeft"
+        id="订单商品类型排名"
+        title="订单商品类型排名"
         :area="HorizontalArea"
         :dataArray="HorizontalArray"
     />
-    <wavyLineChart
-        id="`移栽趋势分析`"
-        :lineName="yearName"
-        style="position: absolute; right: 50px; top: 760px"
-        class="animated fadeInRight"
-        v-if="isTrend"
-        title="移栽趋势分析"
-        :area="trendarea"
-        :dataArray="trendDataArray"
-    />
-    <statisticsPanel style="
+    <statisticsPanel
+        class="animated zoomIn"
+        style="
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-55%, 150%);
+        transform: translate(-50%, 150%);
       "/>
     <threeMap
         @toView="toView"
@@ -70,11 +45,57 @@
         style="
         position: absolute;
         left: 50%;
-        transform: translate(-55%, 30%);
+        transform: translate(-50%, 25%);
       "
         v-if="hasGetJson"
         :getJson="getJson"
     ></threeMap>
+    <div class="tabsBox AICenter animated fadeInRight" style="position: absolute; right: 20px; top: 98px">
+      <div class="tabbotton">
+        <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>
+    <weatherForecast
+        id="当年平台订单总量月同比"
+        :lineName="yearName"
+        style="position: absolute; right: 20px; top: 150px"
+        class="animated fadeInRight"
+        title="当年平台订单总量月同比"
+        :area="trendarea"
+        :dataArray="trendDataArray"
+    ></weatherForecast>
+    <ComplexHistograms
+        id="当年平台订单总量月环比"
+        style="position: absolute; right: 20px; top: 378px"
+        :barHeight="'216px'"
+        class="animated fadeInRight"
+        title="当年平台订单总量月环比"
+    >
+    </ComplexHistograms>
+    <weatherForecast
+        id="总交易趋势"
+        :lineName="yearName"
+        style="position: absolute; right: 20px; top: 606px"
+        class="animated fadeInRight"
+        title="系统当年平台订单总交易趋势(月)"
+        :area="Weatherarea"
+        :dataArray="WeatherdataArray"
+    ></weatherForecast>
+    <ComplexHistograms
+        id="系统去年平台订单总交易趋势"
+        style="position: absolute; right: 20px; top: 834px"
+        :barHeight="'225px'"
+        class="animated fadeInRight"
+        title="系统去年平台订单总交易趋势(月)"
+    >
+    </ComplexHistograms>
   </bgBox>
 </template>
 
@@ -82,9 +103,10 @@
 import mapOfTongren from '@/http/mapOfTongren.json'
 import bgBox from '@/components/bgBox/index.vue'
 import cake from '@/components/Customize/cake'
-import cylindricalHistogram from '@/components/Customize/cylindricalHistogram'
+import slotCake from '@/components/Customize/slotCake'
+import histogram from '@/components/Customize/histogram'
+import ComplexHistograms from '@/components/Customize/Complex histograms'
 import weatherForecast from '@/components/Customize/weatherForecast'
-import wavyLineChart from '@/components/Customize/wavyLineChart'
 import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
 import statisticsPanel from '@/components/statisticsPanel/index.vue'
 import threeMap from '@/components/Customize/map/index'
@@ -92,10 +114,11 @@ import threeMap from '@/components/Customize/map/index'
 export default {
   name: `Home`,
   components: {
-    cylindricalHistogram,
+    histogram,
+    slotCake,
     weatherForecast,
-    wavyLineChart,
     HorizontalHistogram,
+    ComplexHistograms,
     statisticsPanel,
     bgBox,
     threeMap,
@@ -103,6 +126,10 @@ export default {
   },
   data() {
     return {
+      tabs: {
+        index: 0,
+        list: [`订单总量`, `订单交易额`],
+      },
       max: 100,
       autoVueFnInit: false,
       statisticsData: {
@@ -190,7 +217,6 @@ export default {
     //     },
     //   }
     // )
-    // this.$http.get(`https://httpbin.org/get`)
   },
   mounted() {
   },
@@ -338,3 +364,39 @@ export default {
   },
 }
 </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;
+
+  .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;
+    }
+  }
+}
+</style>

src/views/page2/index.vue

@@ -1,166 +1,269 @@
 <template>
-  <div>
-    <bgBox class="bgBox" bgType="g-bg2" :tabChange="tabChange" :tabIndex="1">
-      <leftBox
-        class="lefBox animated fadeInLeft"
-        :listCb="(data) => (baseList = data)"
-      />
-      <cmap :baseList="baseList" />
-      <HorizontalHistogram
-        style="position: absolute; right: 50px; top: 115px; z-index: 10"
-        v-if="isHorizontal"
-        id="`各区域移栽面积1`"
-        title="各区域移栽面积"
-        :area="HorizontalArea"
-        :dataArray="HorizontalArray"
+  <bgBox :tabChange="tabChange" class="bgBox" :tabIndex="1">
+    <histogram
+        style="position: absolute; left: 20px; top: 98px"
+        class="animated fadeInLeft"
+        title="各区域移栽产量分析"
+        :barHeight="'316px'"
+        total="2700"
+        :area="Transplantarea"
+        :dataArray="TransplantdataArray"
+    />
+    <weatherForecast
+        id="平台订单总量趋势（月）"
+        :barHeight="'312px'"
+        style="position: absolute; left: 20px; top: 426px"
+        class="animated fadeInLeft"
+        title="平台订单总量趋势(月)"
+        :area="trendarea"
+        :dataArray="trendDataArray"
+    ></weatherForecast>
+    <ComplexHistograms
+        :barHeight="'312px'"
+        id="平台订单总交易额趋势(月)"
+        style="position: absolute; left: 20px; top: 750px"
+        class="animated fadeInLeft"
+        title="平台订单总交易额趋势(月)"
+    >
+    </ComplexHistograms>
+    <threeMap
+        @toView="toView"
+        class="animated zoomIn"
+        style="
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%,15%);
+      "
+        v-if="hasGetJson"
+        :getJson="getJson"
+    ></threeMap>
+    <weatherForecast
+        :barHeight="'254px'"
+        id="订单总量"
+        style="position: absolute; right: 20px; top: 98px"
         class="animated fadeInRight"
-      />
-      <wavyLineChart
-        id="`本月移栽数量趋势`"
-        style="position: absolute; right: 50px; top: 460px; z-index: 10"
-        v-if="isMonthTrend"
-        title="本月移栽数量趋势"
-        :max="max"
-        :area.sync="monthTrendarea"
-        :dataArray.sync="monthTrendDataArray"
-        :lineName="monthName"
+        title="订单总量"
+        :area="trendarea"
+        :dataArray="trendDataArray"
+    ></weatherForecast>
+    <weatherForecast
+        id="订单总量2"
+        :barHeight="'254px'"
+        style="position: absolute; right: 20px; top: 364px"
         class="animated fadeInRight"
-      />
-      <wavyLineChart
-        id="`本年移栽数量趋势`"
-        :lineName="yearName"
-        style="position: absolute; right: 50px; top: 760px; z-index: 10"
-        title="本年移栽数据趋势"
-        :area.sync="yearTrendarea"
+        title="订单总量"
+        :area="Weatherarea"
+        :dataArray="WeatherdataArray"
+    ></weatherForecast>
+    <HybridCharts
         class="animated fadeInRight"
-        :dataArray.sync="yearTrendDataArray"
-        v-if="isYearTrend"
-      />
-    </bgBox>
-  </div>
+        title="平台订单来源类型分布"
+        style="position: absolute; right: 20px; top: 630px">
+    </HybridCharts>
+  </bgBox>
 </template>
 
 <script>
+import mapOfTongren from '@/http/mapOfTongren.json'
 import bgBox from '@/components/bgBox/index.vue'
-import cmap from './cmap.vue'
-import leftBox from './leftBox.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'
+import ComplexHistograms from '@/components/Customize/Complex histograms'
+import weatherForecast from '@/components/Customize/weatherForecast'
 import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
-import wavyLineChart from '@/components/Customize/wavyLineChart'
-window.map = {}
+import statisticsPanel from '@/components/statisticsPanel/index.vue'
+import threeMap from '@/components/Customize/map/index'
+
 export default {
+  name: `Home`,
   components: {
-    bgBox,
-    leftBox,
-    cmap,
-    wavyLineChart,
+    histogram,
+    HybridCharts,
+    slotCake,
+    weatherForecast,
     HorizontalHistogram,
+    ComplexHistograms,
+    statisticsPanel,
+    bgBox,
+    threeMap,
+    cake,
   },
   data() {
     return {
-      baseList: [],
+      tabs: {
+        index: 0,
+        list: [`订单总量`, `订单交易额`],
+      },
       max: 100,
-      HorizontalArea: [],
-      HorizontalArray: {
-        Done: [],
+      autoVueFnInit: false,
+      statisticsData: {
+        title: `目标完成率`,
+        value: 0,
+        acrossList: [
+          {name: `年移栽数量`, value: undefined},
+          {name: `年移栽面积`, value: undefined},
+        ],
+        verticalList: [
+          {name: `移栽区域数`, value: undefined},
+          {name: `烟农数量`, value: undefined},
+        ],
       },
       yearName: {
         lastName: `去年`,
         thisName: `今年`,
       },
-      isHorizontal: true,
-      monthTrendarea: [],
-      monthTrendDataArray: {
+      TransplantdataArray: [],
+      Transplantarea: [],
+      Weatherarea: [],
+      WeatherdataArray: {
+        temperature: [],
+        Weather: [],
+      },
+      wavyLineArea: [],
+      wavyLinedataArray: {
         LastYear: [],
         thisYear: [],
       },
-      monthName: {
-        lastName: `上月`,
-        thisName: `本月`,
-      },
-      yearTrendarea: [],
-      yearTrendDataArray: {
+      trendarea: [],
+      trendDataArray: {
         LastYear: [],
         thisYear: [],
       },
-      isMonthTrend: false,
-      isYearTrend: false,
+      HorizontalArea: [],
+      HorizontalArray: {
+        Done: [],
+        Percentage: [],
+      },
+      getJson: {},
+      isGetData: false,
+      isWeather: false,
+      isWavyLine: false,
+      isHorizontal: false,
+      isTrend: false,
+      hasGetJson: false,
+      isCake: false,
     }
   },
   computed: {},
-  async created() {
-    this.$util.autoVueFn(
-      [
-        {
-          time: 1000 * 60,
-          fn: this.getAnalysisOfTransplantingSituation,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getTrendOfTransplantQuantityThisMonth,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getThisYearsTransplantingDataTrend,
-        },
-      ],
-      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
+    //     },
+    //   }
+    // )
   },
-  mounted() {},
-  unmounted() {
-    window.map.destroy()
+  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`)
       }
       console.log(`val`, val)
     },
-    getTrendOfTransplantQuantityThisMonth() {
-      this.$http.get(`/api/transplantTrendAnalysis`).then((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
-      })
+    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: 0,
+            },
+          })
+          .then((res) => {
+            const area = []
+            const dataArray = {
+              temperature: [],
+              Weather: [],
+            }
+            res.forEach((element) => {
+              area.push(element.时间)
+              dataArray.temperature.push(element.温度)
+              dataArray.Weather.push(element.天气)
+            })
+            this.Weatherarea = area
+            this.WeatherdataArray = dataArray
+            this.isWeather = true
+          })
     },
-    getThisYearsTransplantingDataTrend() {
-      this.$http.get(`/api/thisYearsTransplantingDataTrend`).then((res) => {
+    getTransplantAreaInEachRegion() {
+      return this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
         const area = []
         const dataArray = {
           LastYear: [],
           thisYear: [],
-          comparisonLastDay: [],
-          comparisonLastYear: [],
         }
         res.forEach((element) => {
-          area.push(element.时间)
+          area.push(element.名称.slice(0, 2))
           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
+        this.wavyLineArea = area
+        this.wavyLinedataArray = dataArray
+        this.isWavyLine = true
       })
     },
     getAnalysisOfTransplantingSituation() {
-      this.$http.get(`/api/transplantAreaInEachRegion2`).then((res) => {
+      this.$http.get(`/api/analysisOfTransplantingSituation`).then((res) => {
         const area = []
         const dataArray = {
           Done: [],
@@ -169,7 +272,7 @@ export default {
         const date = res
         date.forEach((element) => {
           area.push(element.名称.slice(0, 2))
-          dataArray.Done.push(element.已移栽)
+          dataArray.Done.push(element.已移载)
           dataArray.Percentage.push(element.比率.toFixed(0))
         })
         this.HorizontalArea = area
@@ -177,22 +280,88 @@ export default {
         this.isHorizontal = true
       })
     },
+    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
+      })
+    },
+    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
+      })
+    },
+    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 {
-  .lefBox {
-    position: absolute;
-    z-index: 10;
-    left: 47px;
-    top: 120px;
-  }
-  ::v-deep {
-    .bg {
-      position: absolute;
-      z-index: 9;
+  .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;
     }
   }
 }