Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev

new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue

@@ -33,44 +33,50 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 是否展示高亮圈圈
     showMarkPoint: {
       type: Boolean,
       default: false,
     },
+    // 是否堆叠展示
+    isHorizontal: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
     const chartRef = ref(null);
     const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
     let option = reactive({
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-          label: {
-            show: true,
-            backgroundColor: '#333',
-          },
-        },
-      },
-      legend: {
-        top: 30,
-      },
-      grid: {
-        top: 60,
-      },
-      xAxis: {
-        type: 'category',
-        data: [],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [],
-      isHorizontal: {
-        type: Boolean,
-        default: false,
-      },
+      // tooltip: {
+      //   trigger: 'axis',
+      //   axisPointer: {
+      //     type: 'shadow',
+      //     label: {
+      //       show: true,
+      //       backgroundColor: '#333',
+      //     },
+      //   },
+      // },
+      // legend: {
+      //   top: 30,
+      // },
+      // grid: {
+      //   top: 60,
+      // },
+      // xAxis: {
+      //   type: 'category',
+      //   data: [],
+      // },
+      // yAxis: {
+      //   type: 'value',
+      // },
+      // series: [],
+      // isHorizontal: {
+      //   type: Boolean,
+      //   default: false,
+      // },
     });
 
     watchEffect(() => {
@@ -78,38 +84,41 @@ export default {
     });
 
     function initCharts() {
-      if (props.option) {
+      if (props.option && props.option.grid.top == '15%') {
         Object.assign(option, cloneDeep(props.option));
-      }
-      let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
-      let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
-      let seriesData = [];
-      typeArr.forEach((type, index) => {
-        const barStyle = props.option?.barStyle ?? {};
-        let obj = { name: type, type: props.type, ...barStyle };
-        let data = [];
-        xAxisData.forEach((x) => {
-          let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
-          if (dataArr && dataArr.length > 0) {
-            data.push(dataArr[0].value);
-          } else {
-            data.push(null);
-          }
-        });
-        obj['data'] = data;
-        if (props.option?.color) {
-          obj.color = props.option?.color[index];
-        }
-        if (props.option.series && props.option.series.length > 0) {
-          obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
-        }
-        seriesData.push(obj);
-      });
-      option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
-      if (props.isHorizontal) {
-        option.yAxis.data = xAxisData;
       } else {
-        option.xAxis.data = [];
+        Object.assign(option, cloneDeep(props.option));
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+        let seriesData = [];
+        typeArr.forEach((type, index) => {
+          const barStyle = props.option?.barStyle ?? {};
+          let obj = { name: type, type: props.type, ...barStyle };
+          let data = [];
+          xAxisData.forEach((x) => {
+            let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
+            if (dataArr && dataArr.length > 0) {
+              data.push(dataArr[0].value);
+            } else {
+              data.push(null);
+            }
+          });
+          obj['data'] = data;
+          if (props.option?.color) {
+            obj.color = props.option?.color[index];
+          }
+          if (props.option.series && props.option.series.length > 0) {
+            obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
+          }
+          seriesData.push(obj);
+        });
+        option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
+        if (props.isHorizontal) {
+          option.yAxis.data = xAxisData;
+          option.xAxis.data = [];
+        } else {
+          option.xAxis.data = xAxisData;
+        }
       }
       console.log(option);
       setOptions(option);

new-digital-agriculture-screen/src/styles/common/define.scss

@@ -11,8 +11,6 @@
 
 .custom-tooltip-container{
   border-radius: 8px !important;
-  padding: 6px 16px 6px 8px !important;
-  background-color: rgba(0,0,0,0.7) !important;
   backdrop-filter: blur(8px) !important;
   & span{
     width: 8px !important;

new-digital-agriculture-screen/src/views/business/components/businessThere.vue

@@ -57,10 +57,10 @@ const series = types.map((type, idx) => {
     barGap: '0%', // 强制堆叠布局
     itemStyle: {
       color: colors[idx],
-      barBorderRadius: 8,
+      barBorderRadius: 0,
       shadowColor: colors[idx],
       // shadowBlur: 8,
-      shadowOffsetY: -16,
+      shadowOffsetY: 0,
     },
     label: {
       // 添加标签配置
@@ -70,11 +70,18 @@ const series = types.map((type, idx) => {
       backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景
       padding: [2, 4],
       borderRadius: 4,
-      formatter: '{@value}万亩',
       z: 100,
+      normal: {
+        show: true,
+        position: 'inside',
+        formatter: '{c}万亩',
+      },
     },
+    silent: true, // 禁用所有交互效果
+    animation: false, // 禁用动画
     emphasis: {
       focus: 'series',
+      disabled: true, // 禁用高亮效果
     },
     z: 100 - idx,
     data: towns.map((town) => {
@@ -91,8 +98,10 @@ const state = reactive({
     legend: {
       data: types,
       textStyle: {
-        color: '#ccc',
+        color: '#fff',
       },
+      selectedMode: false, // 禁用图例切换功能
+      inactiveColor: '#fff', // 设置非激活状态颜色（保持原色）
     },
     grid: {
       top: '15%',
@@ -123,7 +132,7 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(0,0,0,0.6);',
+      backgroundColor: 'rgba(0,0,0,0);',
       borderColor: '#35d0c0',
       borderRadius: 8,
       formatter: (params) => `

new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue

@@ -16,6 +16,15 @@ const props = defineProps({
   },
 });
 
+let values = reactive([]);
+const getValue = (dataList) => {
+  let arr = [];
+  for (let i = 0; i < dataList.length; i++) {
+    arr.push(dataList[i].value);
+  }
+  return arr;
+};
+
 const state = reactive({
   data: [],
   option: {
@@ -45,10 +54,10 @@ const state = reactive({
       extraCssText: 'backdrop-filter: blur(8px);',
     },
     barStyle: {
-      barWidth: 10,
+      barWidth: 14,
       itemStyle: {
-        borderWidth: 10,
-        borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
+        borderWidth: 14,
+        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
       },
       color: {
         type: 'linear',
@@ -86,25 +95,100 @@ const state = reactive({
         show: false,
       },
     },
-    yAxis: {
-      type: 'category',
-      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
-      axisTick: {
-        show: false,
+    yAxis: [
+      {
+        type: 'category',
+        data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
       },
-      splitLine: {
-        show: false,
+      {
+        // 右侧数量
+        type: 'category',
+        inverse: true,
+        offset: 10,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#ffffff',
+            fontSize: '16',
+          },
+          formatter: function (value) {
+            let str = '{title|' + value + '吨}';
+            return str;
+          },
+          rich: {
+            title: {
+              color: '#fff',
+              fontSize: 16,
+            },
+          },
+        },
+        data: [12000, 8000, 6000, 4000, 3500],
       },
-      axisLine: {
-        show: false,
-      },
-    },
+    ],
     series: [
       {
+        name: '值',
         type: 'bar',
-        // barWidth: '40%', // 设置柱的宽度
-        // barMinHeight: 2, // 设置柱的最小高度
-        // barGap: '20%', // 设置柱之间的间隙
+        zlevel: 1,
+        barBorderRadius: 10,
+        itemStyle: {
+          borderRadius: [10, 10, 10, 10],
+          color: 'rgba(100, 200, 255, 0.3)',
+        },
+        backgroundStyle: {
+          color: 'rgba(100, 200, 255, 0.3)',
+          borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
+        },
+        barWidth: 20,
+        data: values,
+        label: {
+          position: [0, -16],
+          align: 'left',
+          show: true,
+          formatter: (params) => {
+            return params.name;
+          },
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: 20,
+        barGap: '-100%',
+        data: [],
+        barBorderRadius: 30,
+        itemStyle: {
+          normal: {
+            color: 'rgba(105,131,242,.3)',
+            borderRadius: 10,
+          },
+        },
+        label: {
+          show: false,
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
       },
     ],
   },
@@ -148,6 +232,7 @@ const loadData = (val) => {
       }
     }
   }
+  values = getValue(state.data);
   console.log(val);
 };
 </script>

new-digital-agriculture-screen/src/views/land/components/basicInfo.vue

@@ -33,26 +33,27 @@ const props = defineProps({
 .basic {
   width: 100%;
   margin-top: 10px;
-  height: 100%;
+  height: 95%;
   border: 2px solid #01fefd;
   border-radius: 16px;
   backdrop-filter: blur(2px);
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
   color: #ffffff;
   padding: 20px;
   .line {
     display: flex;
     justify-content: space-between;
     text-align: left;
-    line-height: 20px;
+    line-height: 50px;
     .title {
-      font-size: 16px;
+      font-size: 14px;
       width: 40%;
+      color: #ddd;
     }
     .values {
-      font-size: 20px;
+      font-size: 16px;
       width: 60%;
     }
   }

new-digital-agriculture-screen/src/views/land/components/landOne.vue

@@ -23,6 +23,7 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',

sub-government-affairs-service/src/layouts/component/Menu/SubItem.vue

@@ -12,7 +12,7 @@
       <el-dropdown trigger="hover" placement="right-start" :show-timeout="100" @visible-change="(val) => (isDropdownOpen = val)">
         <span class="el-dropdown-link el-menu-item" @mouseenter.prevent>
           <layout-icon :size="20" :icon="item.meta?.icon" />
-          <span>{{ item.meta?.title + '1' }}</span>
+          <span>{{ item.meta?.title }}</span>
           <el-icon class="arrow-icon" v-if="item.children?.length">
             <component :is="isDropdownOpen ? 'arrow-left' : 'arrow-right'" />
           </el-icon>

sub-operation-service/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="referrer" content="no-referrer" />
     <title>运营服务</title>
   </head>
   <body>

sub-operation-service/src/views/ecommerce/components/goodsItem.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="c-goods-item-warp" @click="toDetail">
+  <div class="c-goods-item-warp" @click="toDetail(data.id)">
     <div class="goods-img">
-      <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? ''" fit="cover" />
+      <img :src="data.goodUrl ? data.goodUrl : ''" alt="" style="width: 100%" />
+      <!--      <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
     </div>
-    <div class="goods-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
+    <div class="goods-name txt-ellipsis clamp2">{{ data.title }}</div>
     <div class="goods-do">
-      <div class="price txt-ellipsis clamp">25.00</div>
+      <div class="price txt-ellipsis clamp">{{ data.goodPrice }}</div>
       <div class="do">
         <div class="iconfont icon-cart"></div>
       </div>
@@ -13,13 +14,25 @@
   </div>
 </template>
 <script setup>
+import { ref, onMounted, computed } from 'vue';
 import { isEmpty, getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
+import { encodeURL } from 'js-base64';
 const route = useRoute();
 const router = useRouter();
 
-const toDetail = () => {
-  let id = '01';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const handleImageError = (e) => {
+  console.error('图片加载失败:', e);
+};
+
+const toDetail = (id) => {
   router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
 };
 </script>

sub-operation-service/src/views/ecommerce/index.vue

@@ -3,15 +3,25 @@
     <common current-name="agricultural">
       <template #main>
         <banner :imglist="bannerList"></banner>
-        <filtertop :list="treeList"></filtertop>
+        <filtertop :list="treeList" @select="selected"></filtertop>
         <div class="goods-list-warp">
           <div class="goods-list">
-            <template v-for="(n, index) in 10" :key="n.id">
+            <template v-for="(n, index) in list" :key="n.id">
               <div class="goods-item">
-                <goodsItem></goodsItem>
+                <goodsItem :data="n"></goodsItem>
               </div>
             </template>
           </div>
+          <el-pagination
+            :current-page="pagination.current"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pagination.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pagination.total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          >
+          </el-pagination>
         </div>
       </template>
     </common>
@@ -81,15 +91,49 @@ let params = reactive({
   parentId: null,
   childrenId: null,
 });
+let pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+const handleSizeChange = (val) => {
+  pagination.size = val;
+  getList();
+};
+const handleCurrentChange = (val) => {
+  pagination.current = val;
+  getList();
+};
 const getList = () => {
+  params.current = pagination.current;
+  params.size = pagination.size;
   agriculturalList(params).then((res) => {
     if (res.code === 200) {
-      console.log('res', res);
+      list.splice(0, list.length, ...res.data.records);
+      pagination.total = res.data.total;
     }
   });
 };
 
 let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
+
+const selected = (data) => {
+  // 获取所有值并转为数组
+  const val = Object.values(data);
+  console.log(data);
+  if (val.length === 1) {
+    params.parentId = val[0].id;
+  } else {
+    if (val[0].id === '') {
+      params.childrenId = '';
+      params.parentId = null;
+    } else {
+      params.childrenId = val[val.length - 1].id;
+      params.parentId = val[val.length - 1].parentId;
+    }
+  }
+  getList();
+};
 </script>
 <style lang="scss" scoped>
 .goods-list-warp {