产出品管理页面调整(未完)；小模块title和顶部菜单样式调整全局样式；

src/components/custom-echart-triangle/index.vue

@@ -36,10 +36,10 @@ export default {
     const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
     const option = reactive({
       tooltip: {
-        // trigger: 'axis',
+        trigger: 'axis',
-        // axisPointer: {
+        axisPointer: {
-        //   type: 'shadow',
+          type: 'shadow',
-        // },
+        },
         backgroundColor: 'rgba(18, 55, 85, 0.8);',
         borderColor: '#35d0c0',
         formatter: (data) => {
@@ -62,7 +62,7 @@ export default {
           gap: 0,
           label: {
             show: true,
-            position: 'right',
+            position: 'outside',
             width: '200px',
             align: 'right',
             formatter: function (params) {
@@ -74,9 +74,29 @@ export default {
               a: { color: '#fff', fontSize: '16px' },
               b: { color: '#05FCC6', fontSize: '16px' },
             },
+            verticalAlign: 'middle',
+            padding: [5, 10], // 增加标签内边距
           },
           labelLine: {
-            show: false,
+            show: true,
+            length: 20,
+            length2: 30,
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              color: '#ffffff',
+              opacity: 1,
+              type: 'solid',
+            },
+            // 自定义折线路径（从标签到数据点的像素坐标）
+            // 参数：idx-数据索引, params-包含标签位置信息的对象
+            // formatter: function (idx, params) {
+            //   return [
+            //     [params.labelRect.x, params.labelRect.y], // 起点（标签位置）
+            //     [params.labelRect.x + 20, params.labelRect.y], // 水平线段
+            //     [params.labelRect.x + 20, params.dataCoord[1]]  // 垂直线段
+            //   ];
+            // },
           },
           itemStyle: {
             show: false,

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

@@ -69,7 +69,7 @@ const props = defineProps({
 });
 const titleContentW = ref('0');
 const itemW = ref('1');
-const gap = ref(24);
+const gap = ref(1);
 const leftNum = ref(0);
 const position = ref(0);
 const right = ref(null);
@@ -133,7 +133,7 @@ function handleTitleClick(val) {
 .header_title {
   background-color: #000;
   position: relative;
-  padding: 0 68px;
+  padding: 0 40px;
   display: flex;
   justify-content: space-between;
   width: 100vw;
@@ -174,7 +174,7 @@ function handleTitleClick(val) {
   .left_titles_container,
   .right_titles_container {
     position: relative;
-    width: 30%;
+    width: 31%;
     height: 100%;
     overflow: hidden;
     line-height: 90px;
@@ -182,10 +182,10 @@ function handleTitleClick(val) {
       position: absolute;
       top: 10px;
       width: var(--titleContentW);
-      height: 40px;
+      height: 56px;
       transition: all 0.4s ease;
-      font-size: 20px;
+      font-size: 24px;
-      font-weight: bold;
+      // font-weight: bold;
       .active {
         color: #fff;
         opacity: 1 !important;
@@ -194,9 +194,9 @@ function handleTitleClick(val) {
       .title_item {
         margin-right: var(--gap);
         display: inline-block;
-        width: var(--itemW);
+        min-width: var(--itemW);
-        height: 40px;
+        height: 56px;
-        line-height: 40px;
+        line-height: 56px;
         text-align: center;
         color: #f5fffe;
         cursor: pointer;

src/components/subTop.vue

@@ -147,8 +147,8 @@ const handleCommand = (data) => {
   }
   .title-top-content {
     line-height: 38px;
-    font-size: 14px;
+    font-size: 20px;
-    font-weight: bold;
+    // font-weight: bold;
     display: inline-block;
     transform: skewX(-13deg);
     background: linear-gradient(to bottom, '#ff7e5f', '#548fff');

src/layouts/index.vue

@@ -74,6 +74,7 @@ onMounted(() => {
   }
   .base-laytout-header {
     height: 90px;
+    margin-bottom: 50px;
   }
 }
 </style>

src/views/entities/components/benefitCharts.vue

@@ -145,6 +145,7 @@ function handleChange(n) {
       top: 8px;
       width: 24px;
       height: 24px;
+      text-shadow: 2px 0px 10px 0px #01eeff;
     }
     .left_btn {
       left: 6px;

src/views/entities/components/categoryCharts.vue

@@ -1,39 +1,60 @@
 <template>
-  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
+  <customEchartHyalineCake ref="chartRef" :chart-data="data" height="100%" :option="option" />
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
+const chartRef = ref(null);
 
-/* --------------- data --------------- */
+/* --------------- data右上侧饼图 --------------- */
 // #region
 const data = ref([
   {
-    name: '企业',
+    name: ' 企业',
     value: 10.8,
+    itemStyle: { color: '#3c5fc4', opacity: 0.8 },
   },
   {
-    name: '合作社',
+    name: ' 合作社',
-    value: 8.4,
+    value: 18.4,
+    itemStyle: { color: '#8fd8ff', opacity: 0.8 },
   },
   {
-    name: '村集体',
+    name: ' 村集体',
-    value: 4.3,
+    value: 14.3,
+    itemStyle: { color: '#55d9a4', opacity: 0.8 },
   },
   {
-    name: '个体',
+    name: ' 个体',
-    value: 3.7,
+    value: 23.7,
+    itemStyle: { color: '#d2a823', opacity: 0.8 },
   },
 ]);
+
+let itemGapWith = ref(0);
+const getChartrefWith = () => {
+  let len = data.value.length * 2;
+  return chartRef.value.$refs.chartRef.offsetWidth / len + 8;
+};
+
 const option = reactive({
   k: 0.2,
-  opacity: 0.6,
+  opacity: 0.4,
   itemGap: 0,
   autoItemHeight: 3,
   legend: {
+    type: 'plain',
     orient: 'horizontal',
+    width: '100%',
     bottom: 10,
     left: 'center',
+    itemWidth: 16,
+    itemHeight: 16,
+    itemGap: itemGapWith.value ? itemGapWith.value : 50,
+    textStyle: {
+      color: '#fff',
+      fontSize: '16px',
+    },
   },
   title: {
     text: '23亿元',
@@ -47,18 +68,18 @@ const option = reactive({
       color: '#02FD94',
       fontSize: '18px',
     },
-    top: 'center',
+    top: '26%',
     left: 'center',
   },
   grid3D: {
     show: false,
-    boxHeight: 5,
+    boxHeight: 3,
-    top: 'center',
+    top: '-15%', //调整距离顶部距离，0是在中间
     left: 'center',
     viewControl: {
       //3d效果可以放大、旋转等，请自己去查看官方配置
-      alpha: 30, //角度(这个很重要 调节角度的)
+      alpha: 36, //角度(这个很重要 调节角度的)
-      distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+      distance: 130, //调整视角到主体的距离，类似调整zoom(这是整体大小)
       rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
       zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
       panSensitivity: 10, //设置平移灵敏度，0无法平移
@@ -73,6 +94,10 @@ const option = reactive({
 // #region
 
 // #endregion
+onMounted(() => {
+  itemGapWith.value = getChartrefWith();
+  option.legend.itemGap = itemGapWith.value ? itemGapWith.value : 50;
+});
 </script>
 
 <style lang="scss" scoped></style>

src/views/entities/components/entitiesCategoryCharts.vue

@@ -67,7 +67,7 @@ const state = reactive({
 });
 
 const refresData = () => {
-  console.info('landPatrol********************refresData');
+  // console.info('landPatrol********************refresData');
   state.data = reactive([
     {
       value: 20,

src/views/entities/components/entitiesStatistics.vue

@@ -2,21 +2,23 @@
   <custom-echart-column-line :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive } from 'vue';
+import { reactive, watch } from 'vue';
+import { isEmpty, sleep } from '@/utils';
 import * as echarts from 'echarts';
 
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  query: {
+    type: String,
+    default: '',
+  },
+});
+
 const state = reactive({
-  data: [
+  data: [],
-    { value: 103, value1: 208, name: '耿马镇' },
-    { value: 72, value1: 157, name: '勐撒镇' },
-    { value: 50, value1: 125, name: '勐永镇' },
-    { value: 60, value1: 146, name: '孟定镇' },
-    { value: 40, value1: 86, name: '勐简乡' },
-    { value: 111, value1: 172, name: '贺派乡' },
-    { value: 81, value1: 180, name: '四排山乡' },
-    { value: 55, value1: 99, name: '芒洪乡' },
-    { value: 68, value1: 84, name: '大兴乡' },
-  ],
   option: {
     grid: {
       left: '3%',
@@ -38,8 +40,8 @@ const state = reactive({
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
           <span>${params.name}</span><br/>
-          <span>${params.marker} ${params.data} 万</span><br />
+          <span>${params.marker} ${params.data} 万吨</span><br />
-          <span>${data[1].marker} ${data[1].data} 万</span>
+          <span>${data[1].marker} ${data[1].data} 万吨</span>
         </div>`;
         return str;
       },
@@ -200,4 +202,55 @@ const state = reactive({
     ],
   },
 });
+
+const loadData = async (code = '') => {
+  state.loading = true;
+  // GetInputsInfo()
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       state.data = res.data;
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   });
+  await sleep(500);
+  state.data = [
+    { value: 103, value1: 208, name: '耿马镇' },
+    { value: 72, value1: 157, name: '勐撒镇' },
+    { value: 50, value1: 125, name: '勐永镇' },
+    { value: 60, value1: 146, name: '孟定镇' },
+    { value: 40, value1: 86, name: '勐简乡' },
+    { value: 111, value1: 172, name: '贺派乡' },
+    { value: 81, value1: 180, name: '四排山乡' },
+    { value: 55, value1: 99, name: '芒洪乡' },
+    { value: 68, value1: 84, name: '大兴乡' },
+  ];
+};
+
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      state.data = val;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+watch(
+  () => props.query,
+  (val) => {
+    if (!isEmpty(val)) {
+      loadData(val);
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>

src/views/entities/components/entitieslist.vue

@@ -1,34 +1,40 @@
 <template>
-  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
+  <customEchartHyalineCake :chart-data="dataList" height="100%" :option="option" />
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 
-/* --------------- data --------------- */
+/* --------------- 左中饼图 --------------- */
 // #region
-const data = ref([
+const dataList = ref([
   {
     name: '烟草',
     value: 60.8,
+    money: 100,
   },
   {
     name: '甘蔗',
     value: 44.4,
+    money: 88,
   },
   {
     name: '核桃',
     value: 24.3,
+    money: 92,
   },
   {
     name: '蔬菜',
     value: 32.7,
+    money: 56,
   },
   {
     name: '其他',
     value: 32.9,
+    money: 18,
   },
 ]);
+
 const option = reactive({
   k: 0.3,
   opacity: 1,
@@ -36,13 +42,13 @@ const option = reactive({
   autoItemHeight: 2,
   grid3D: {
     show: false,
-    boxHeight: 5,
+    boxHeight: 4, //厚度
-    top: '0',
+    top: '0', //距离顶部的距离
     left: '-20%',
     viewControl: {
       //3d效果可以放大、旋转等，请自己去查看官方配置
       alpha: 30, //角度(这个很重要 调节角度的)
-      distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+      distance: 200, //调整视角到主体的距离，类似调整zoom(这是整体大小)
       rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
       zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
       panSensitivity: 10, //设置平移灵敏度，0无法平移
@@ -50,6 +56,41 @@ const option = reactive({
       autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
     },
   },
+  // series: [
+  //   // 透明的 2D 饼图（仅用于生成标签折线）
+  //   {
+  //     type: 'pie',
+  //     radius: ['30%', '70%'],
+  //     center: ['40%', '50%'],
+  //     startAngle: -40, // 调整角度与 3D 图形对齐
+  //     clockwise: false,
+  //     label: {
+  //       show: true,
+  //       position: 'outside',
+  //       formatter: (params) => {
+  //         console.log(params);
+  //         return `{a|${params.data.name}}\n{b|${params.data.money}万元}`;
+  //       },
+  //       rich: {
+  //         a: { color: '#ffffff' },
+  //         b: { color: '#79F5AF' },
+  //       },
+  //     },
+  //     labelLine: {
+  //       show: true,
+  //       length: 10,
+  //       length2: 15,
+  //       lineStyle: {
+  //         color: '#ffffff',
+  //         width: 1,
+  //       },
+  //     },
+  //     data: dataList,
+  //     itemStyle: {
+  //       opacity: 1, // 隐藏扇区，仅保留标签和折线
+  //     },
+  //   },
+  // ],
 });
 // #endregion
 

src/views/entities/components/hotCharts.vue

@@ -1,5 +1,10 @@
 <template>
   <div ref="chartsWarp" class="hot-charts">
+    <section class="_top_btns">
+      <span class="left_btn" @click="handleChange(-1)"></span>
+      <span class="right_btn" @click="handleChange(1)"></span>
+      {{ current.info.name }}
+    </section>
     <custom-echart-triangle :chart-data="data" height="100%" :option="option" />
   </div>
 </template>
@@ -13,9 +18,72 @@ const data = ref([
 ]);
 const option = reactive({});
 onMounted(() => {});
+
+const list = ref([
+  {
+    name: '茶叶',
+    value: '1',
+  },
+  {
+    name: '核桃',
+    value: '2',
+  },
+  {
+    name: '玉米',
+    value: '3',
+  },
+]);
+const current = reactive({
+  index: 0,
+  length: list.value.length - 1,
+  info: {
+    name: '茶叶',
+    value: '20',
+  },
+});
+function handleChange(n) {
+  if (current.index == 0 && n == -1) {
+    current.index = current.length;
+  } else if (current.index == current.length && n == 1) {
+    current.index = 0;
+  } else {
+    current.index += n;
+  }
+  current.info = list.value[current.index];
+}
 </script>
 <style lang="scss" scoped>
 .hot-charts {
+  width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  ._top_btns {
+    position: relative;
+    height: 40px;
+    width: 30%;
+    font-size: 20px;
+    text-align: center;
+    color: #fff;
+    line-height: 40px;
+    background: url('../../../assets/images/basic/tagBG-small.png') no-repeat center center / cover;
+    span {
+      display: block;
+      position: absolute;
+      top: 8px;
+      width: 24px;
+      height: 24px;
+      text-shadow: 2px 0px 10px 0px #01eeff;
+    }
+    .left_btn {
+      left: -10px;
+      background: url('../../../assets/images/basic/leftArrowIcon.png') no-repeat center center / cover;
+    }
+    .right_btn {
+      right: -10px;
+      background: url('../../../assets/images/basic/rightArrowIcon.png') no-repeat center center / cover;
+    }
+  }
 }
 </style>

src/views/entities/index.vue

@@ -100,6 +100,7 @@ import entitiesMap from './components/entitiesMap.vue';
 import { sleep } from '@/utils';
 
 const oneRef = ref(null);
+const thirdRef = ref(null);
 
 const state = reactive({
   loading: false,
@@ -144,9 +145,9 @@ const handleCommand = (data) => {
 const handleContrast = (data) => {
   state.contrastCode = data.value;
   // console.info('data=', data);
-  // nextTick(() => {
+  nextTick(() => {
-  //   thirdRef.value && thirdRef.value.refresData();
+    thirdRef.value && thirdRef.value.refresData();
-  // });
+  });
 };
 </script>
 <style lang="scss" scoped>