feat:inputs

src/components/custom-scroll-board/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-scroll-board">
-    <div v-if="status.header.length && status.mergedConfig" class="header" :style="`background-color: ${status.mergedConfig.headerBGC};`">
+    <div v-if="status.header.length && status.mergedConfig" class="header" :style="`background: ${status.mergedConfig.headerBGC};`">
       <div
         v-for="(headerItem, i) in status.header"
         :key="`${headerItem}${i}`"
@@ -23,7 +23,7 @@
         :style="`
         height: ${status.heights[ri]}px;
         line-height: ${status.heights[ri]}px;
-        background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
+        background: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
       `"
       >
         <div

src/views/inputs/components/inputsFive.vue

@@ -1,99 +1,76 @@
 <template>
-  <div class="monthly-use-charts">
+  <custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
-    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
-  </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { reactive, ref } from 'vue';
-
+let dataList = [
-const chartsData = reactive({
+  { value: 10, name: '2020' },
+  { value: 66, name: '2021' },
+  { value: 100, name: '2022' },
+  { value: 120, name: '2023' },
+  { value: 150, name: '2024' },
+  { value: 80, name: '2025' },
+];
+const state = reactive({
   option: {
+    color: ['#35D0C0'],
     grid: {
-      left: '3%',
+      left: '5%',
-      right: '4%',
+      right: '5%',
-      bottom: '2%',
+      bottom: '5%',
-      top: '18%',
+      top: '10%',
       containLabel: true,
     },
-    // color: ['#3685fe', '#41b879', '#fed500'],
+    tooltip: {
-    title: {
+      trigger: 'axis',
-      text: ' ',
+      axisPointer: {
-      textStyle: {
+        type: 'shadow',
-        color: '#333',
       },
-    },
+      formatter: (data) => {
-    legend: {
+        const params = data[0];
-      right: '0', // 距离左侧10%的位置
+        let str = `<div class="custom-echarts-tips">
-      top: '0', // 垂直居中
+          <span>${params.name}</span><br/>
-      itemWidth: 15, // 图例标记的宽度
+          <span>${params.marker} ${params.data} 万元</span>
-      itemHeight: 8, // 图例标记的高度
+        </div>`;
-      textStyle: {
+        return str;
-        fontSize: 10, // 图例文字的字体大小
-        color: '#fff', // 图例文字的颜色
       },
-      data: ['农药', '肥料', '种源', '兽药', '农机'],
     },
     xAxis: {
       type: 'category',
-      name: ' ',
+      // name: '年份',
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      axisTick: {
+        show: false,
+        alignWithLabel: false,
+        interval: 'auto',
+        inside: false,
+        length: 5,
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+          color: 'rgba(28, 158, 222, 1)',
+        },
+      },
     },
     yAxis: {
       type: 'value',
-      name: '',
+      // name: '',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#BAE7FF',
-          width: 1,
-          type: 'solid',
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(186, 231, 255, 0.2)',
-          type: 'dashed',
-        },
-      },
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: 'white',
-        },
-      },
     },
-    series: [
-      {
-        name: '农药',
-        type: 'line',
-        data: [120, 132, 101, 134, 90, 230, 210, 500, 600, 200, 300, 150],
-      },
-      {
-        name: '肥料',
-        type: 'line',
-        data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 600, 158, 320],
-      },
-      {
-        name: '种源',
-        type: 'line',
-        data: [120, 516, 238, 453, 368, 519, 432, 128, 578, 120, 578, 324],
-      },
-      {
-        name: '兽药',
-        type: 'line',
-        data: [120, 132, 101, 134, 90, 230, 210, 500, 600, 565, 134, 256],
-      },
-      {
-        name: '农机',
-        type: 'line',
-        data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 326, 456, 189],
-      },
-    ],
   },
+  data: dataList,
+});
+const lineCharts = ref(null);
+const refresData = () => {
+  state.data = [
+    { value: 5, name: '2020' },
+    { value: 36, name: '2021' },
+    { value: 70, name: '2022' },
+    { value: 56, name: '2023' },
+    { value: 70, name: '2024' },
+    { value: 20, name: '2025' },
+  ];
+};
+
+defineExpose({
+  refresData,
 });
 </script>
-<style lang="scss" scoped>
-.monthly-use-charts {
-  height: 100%;
-}
-</style>

src/views/inputs/components/inputsFour.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" @click="handleClick" />
 </template>
 <script setup>
 import { reactive, ref, onMounted } from 'vue';
@@ -267,6 +267,11 @@ function getPie3D(pieData, internalDiameterRatio) {
   return option;
 }
 
+const handleClick = (params) => {
+  console.log(270, params);
+  // console.log(270, params.seriesName, params.dataIndex);
+};
+
 onMounted(() => {
   const option = getPie3D(pieData, 0.8);
   state.option = option;

src/views/inputs/components/inputsSix.vue

@@ -1,65 +1,52 @@
 <template>
-  <div class="dealer-distribution-charts">
+  <div class="board">
-    <custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+    <custom-scroll-board :chart-config="options" />
   </div>
 </template>
+
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref } from 'vue';
-const chartsData = reactive({
+const header = ['白名单企业', '产品名称', '黑名单企业', '产品名称'];
+const len = header.length;
+const options = ref({
+  attr: { w: 200, h: 240 },
   option: {
-    grid: {
+    header,
-      left: '3%',
+    dataset: [
-      right: '4%',
+      ['富农种源', '京科824', '南方农业', '京科824'],
-      bottom: '2%',
+      ['富农种源', '京科824', '南方农业', '京科824'],
-      top: '18%',
+      ['富农种源', '京科824', '南方农业', '京科824'],
-      containLabel: true,
+      ['富农种源', '京科824', '南方农业', '京科824'],
-    },
+      ['富农种源', '京科824', '南方农业', '京科824'],
-    title: {
+      ['富农种源', '京科824', '南方农业', '京科824'],
-      text: ' ',
+      ['富农种源', '京科824', '南方农业', '京科824'],
-      textStyle: {
+    ],
-        color: '#333',
+    index: false,
-      },
+    columnWidth: [100, 100, 100, 100],
-    },
+    align: new Array(len).fill('center'),
-    label: {
+    rowNum: 5,
-      color: '#333',
+    waitTime: 5,
-    },
+    headerHeight: 40,
-    barStyle: {
+    carousel: 'single',
-      barWidth: 15,
+    headerBGC: 'rgba(53, 208, 192, 0.4)',
-      itemStyle: {
+    oddRowBGC: 'rgba(0, 59, 81, 0.1)',
-        borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
+    evenRowBGC: 'rgba(10, 39, 50, 0.1)',
-      },
-      color: {
-        type: 'linear', // 线性渐变
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        colorStops: [
-          { offset: 0, color: '#45bfe9' },
-          { offset: 1, color: '#01589c' },
-        ],
-        global: false, // 默认为 false
-      },
-    },
-    legend: {
-      show: false,
-    },
   },
-  valData: [
-    { value: 80, type: '经销商', name: '耿马镇' },
-    { value: 105, type: '经销商', name: '勐撒镇' },
-    { value: 100, type: '经销商', name: '勐永镇' },
-    { value: 125, type: '经销商', name: '孟定镇' },
-    { value: 217, type: '经销商', name: '勐简乡' },
-    { value: 200, type: '经销商', name: '贺派乡' },
-    { value: 155, type: '经销商', name: '四排山乡' },
-    { value: 80, type: '经销商', name: '芒洪乡' },
-    { value: 105, type: '经销商', name: '大兴乡' },
-  ],
 });
 </script>
-<style lang="scss" scoped>
+<style scoped lang="scss">
-.dealer-distribution-charts {
+.board {
-  height: 100%;
+  padding: 10px 0px;
+
+  &:deep(.row-item) {
+    font-size: 16px;
+
+    .ceil {
+      &:nth-child(3),
+      &:nth-child(4) {
+        color: $color-danger;
+      }
+    }
+  }
 }
 </style>

src/views/inputs/index.vue

@@ -24,7 +24,7 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <centerMap></centerMap>
+      <inputsMap></inputsMap>
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
@@ -57,14 +57,14 @@
           @command="handleCommand"
         >
           <template #back>
-            <inputsFive ref="fiveRef" />
+            <!-- <inputsFive ref="fiveRef" /> -->
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
         <customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
           <template #back>
-            <inputsSix />
+            <!-- <inputsSix /> -->
           </template>
         </customBack>
       </div>
@@ -72,7 +72,6 @@
   </el-row>
 </template>
 <script setup>
-import centerMap from '@/components/centerMap.vue';
 import inputsOne from './components/inputsOne.vue';
 import inputsTwo from './components/inputsTwo.vue';
 import inputsThere from './components/inputsThere.vue';