投入品监管和生产经营主体(未完)

components.d.ts

@@ -42,8 +42,6 @@ declare module 'vue' {
     CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
     CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
     CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
-    IndexCo: typeof import('./src/components/custom-echart-line/index-co.vue')['default']
-    IndexRe: typeof import('./src/components/new-hyaline-cake/index-re.vue')['default']
     NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/custom-echart-column-line/index.vue

@@ -128,11 +128,11 @@ export default {
       option.series[1].data = yDataLine.value;
       option.xAxis.data = xData.value;
       setOptions(option);
-      //   startAutoPlay({
+      startAutoPlay({
-      //     interval: 2000,
+        interval: 2000,
-      //     seriesIndex: 0,
+        seriesIndex: 0,
-      //     showTooltip: true,
+        showTooltip: true,
-      //   });
+      });
       getInstance()?.off('click', onClick);
       getInstance()?.on('click', onClick);
     }

src/components/custom-echart-hyaline-cake/index.vue

@@ -183,7 +183,9 @@ export default {
       const option = Object.assign(
         {
           tooltip: {
-            backgroundColor: 'rgba(18, 55, 85, 0.8);',
+            // tooltip样式调整添加这个类名
+            className: 'custom-tooltip-container', // 自定义父容器类名
+            backgroundColor: 'rgba(0,0,0,0.5)',
             borderColor: '#35d0c0',
             color: '#fff',
             position: function (point, params, dom, rect, size) {

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

@@ -56,8 +56,9 @@ export default {
           zlevel: 1,
           name: '漏斗图',
           type: 'funnel',
+          top: '11%',
           left: 'center',
-          width: '28%',
+          width: '25%',
           sort: 'ascending',
           gap: 0,
           label: {
@@ -66,38 +67,51 @@ export default {
             width: '200px',
             align: 'right',
             formatter: function (params) {
+              if (!params.data.reaVal) return '';
               let arr = [`{a|${params.data.name}}`, `{b| ${params.data.reaVal}%}`];
               return arr.join('\n');
-              // params.data.name + ':' + params.data.reaVal + '%'};
             },
             rich: {
               a: { color: '#fff', fontSize: '16px' },
-              b: { color: '#05FCC6', fontSize: '16px' },
+              b: { color: '#05FCC6', fontSize: '16px', marginTop: '10px' },
             },
             verticalAlign: 'middle',
-            padding: [5, 10], // 增加标签内边距
+            padding: [5, 6], // 增加标签内边距
           },
           labelLine: {
             show: true,
-            length: 20,
+            length: 10,
-            length2: 30,
+            length2: 50,
             smooth: true,
             lineStyle: {
-              width: 2,
+              width: 1,
               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]]  // 垂直线段
-            //   ];
-            // },
           },
+          // 添加第二段折线
+          // markLine: {
+          //   symbol: 'none', // 隐藏端点
+          //   lineStyle: {
+          //     type: 'solid',
+          //     color: '#fff',
+          //     width: 1,
+          //   },
+          //   data: [
+          //     // 从默认 labelLine 的终点到自定义位置
+          //     [
+          //       {
+          //         coord: [50, 50], // 第一段线的终点（需动态计算）
+          //         name: 'Label1',
+          //       },
+          //       {
+          //         coord: [80, 50], // 第二段线的终点
+          //         name: 'Label1',
+          //       },
+          //     ],
+          //   ],
+          // },
           itemStyle: {
             show: false,
             borderColor: '#fff',

src/components/subTop.vue

@@ -155,7 +155,7 @@ const handleCommand = (data) => {
     -webkit-background-clip: text;
     color: #fff;
     letter-spacing: 4px;
-    text-shadow: -2px 0 0 1px #add8f1;
+    text-shadow: -2px 0 10px #add8f1;
     width: 100%;
     padding: 0 36px 0 72px;
     box-sizing: border-box;

src/styles/common/define.scss

@@ -9,6 +9,19 @@
   }
 }
 
+.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;
+    height: 8px !important;
+    vertical-align: middle;
+    margin-top: -4px;
+  }
+}
 .custom-echarts-tips {
   color: #fff;
 }
+

src/views/business/components/businessFour.vue

@@ -127,7 +127,7 @@ watch(
     width: 160px;
     margin: 0 auto;
     height: 32px;
-    line-height: 32px;
+    line-height: 26px;
     font-size: 16px;
     font-weight: 400;
     text-align: center;

src/views/business/components/businessOne.vue

@@ -199,7 +199,9 @@ function getPie3D(pieData, internalDiameterRatio) {
       },
     },
     tooltip: {
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      // tooltip样式调整添加这个类名
+      className: 'custom-tooltip-container', // 自定义父容器类名
+      backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
       color: '#fff',
       position: function (point, params, dom, rect, size) {

src/views/business/components/businessThere.vue

@@ -27,7 +27,9 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      // tooltip样式调整添加这个类名
+      className: 'custom-tooltip-container', // 自定义父容器类名
+      backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];

src/views/business/components/businessTwo.vue

@@ -30,7 +30,9 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      // tooltip样式调整添加这个类名
+      className: 'custom-tooltip-container', // 自定义父容器类名
+      backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];

src/views/entities/components/categoryCharts.vue

@@ -12,22 +12,22 @@ const data = ref([
   {
     name: ' 企业',
     value: 10.8,
-    itemStyle: { color: '#3c5fc4', opacity: 0.8 },
+    itemStyle: { color: '#5b7bc7', opacity: 0.8 },
   },
   {
     name: ' 合作社',
     value: 18.4,
-    itemStyle: { color: '#8fd8ff', opacity: 0.8 },
+    itemStyle: { color: '#8ed0f3', opacity: 0.8 },
   },
   {
     name: ' 村集体',
     value: 14.3,
-    itemStyle: { color: '#55d9a4', opacity: 0.8 },
+    itemStyle: { color: '#65be97', opacity: 0.8 },
   },
   {
     name: ' 个体',
     value: 23.7,
-    itemStyle: { color: '#d2a823', opacity: 0.8 },
+    itemStyle: { color: '#f0c94d', opacity: 0.8 },
   },
 ]);
 

src/views/entities/components/entitiesCategoryCharts.vue

@@ -31,7 +31,9 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      // tooltip样式调整添加这个类名
+      className: 'custom-tooltip-container', // 自定义父容器类名
+      backgroundColor: 'rgba(0,0,0,0.5);',
       borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];

src/views/entities/components/entitiesStatistics.vue

@@ -22,7 +22,7 @@ const state = reactive({
   option: {
     grid: {
       left: '3%',
-      right: '10%',
+      right: '1%',
       bottom: '10%',
       top: '15%',
       containLabel: true,
@@ -33,7 +33,9 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      // tooltip样式调整添加这个类名
+      className: 'custom-tooltip-container', // 自定义父容器类名
+      backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
       formatter: (data) => {
         console.log('data', data);
@@ -133,14 +135,14 @@ const state = reactive({
       },
     ],
     legend: {
-      itemWidth: 12,
+      itemWidth: 16,
-      itemHeight: 8,
+      itemHeight: 16,
       itemGap: 20,
       right: '2%',
       top: '3%',
       x: 'center',
       textStyle: {
-        fontSize: 14,
+        fontSize: 16,
         color: '#fff',
       },
       data: ['总产量（吨）', '平均产量（吨）'],
@@ -159,12 +161,12 @@ const state = reactive({
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: 'rgba(53,208,192,1)',
+                color: 'rgba(1,254,253,1)',
               },
 
               {
                 offset: 1,
-                color: 'rgba(53,208,192,0)',
+                color: 'rgba(1,254,253,0)',
               },
             ]),
           },
@@ -183,20 +185,18 @@ const state = reactive({
         name: '平均产量（吨）',
         type: 'line',
         yAxisIndex: 1,
-        showSymbol: true,
+        showSymbol: false,
         symbolSize: 8,
-        smooth: true,
+        smooth: false,
         symbol: 'circle',
         max: 100,
         lineStyle: {
           normal: {
-            color: 'rgba(53,208,192,1)',
+            color: '#FEF906',
           },
         },
         itemStyle: {
-          color: 'rgba(254,249,6,1)',
+          color: '#FEF906',
-          borderColor: '#fff',
-          borderWidth: 1,
         },
       },
     ],
@@ -216,14 +216,14 @@ const loadData = async (code = '') => {
   //   });
   await sleep(500);
   state.data = [
-    { value: 103, value1: 208, name: '耿马镇' },
+    { value: 103, value1: 102, 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: 55, value1: 66, name: '芒洪乡' },
     { value: 68, value1: 84, name: '大兴乡' },
   ];
 };

src/views/entities/components/hotCharts.vue

@@ -12,9 +12,9 @@
 import { ref, reactive, onMounted } from 'vue';
 
 const data = ref([
-  { value: 40, name: '一级', reaVal: '20' },
+  { value: 40, name: '一级', reaVal: '20', itemStyle: { color: '#56b1c0' } },
-  { value: 80, name: '二级', reaVal: '30' },
+  { value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } },
-  { value: 120, name: '三级', reaVal: '50' },
+  { value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } },
 ]);
 const option = reactive({});
 onMounted(() => {});

src/views/entities/index.vue

@@ -121,14 +121,14 @@ const loadData = async () => {
       { value: 20, name: '2025' },
     ],
     third: [
-      { value: 78, value1: 128, name: '耿马镇' },
+      { value: 98, value1: 88, name: '耿马镇' },
       { value: 55, value1: 117, name: '勐撒镇' },
       { value: 65, value1: 145, name: '勐永镇' },
       { value: 60, value1: 126, name: '孟定镇' },
       { value: 40, value1: 86, name: '勐简乡' },
       { value: 81, value1: 152, name: '贺派乡' },
       { value: 41, value1: 130, name: '四排山乡' },
-      { value: 63, value1: 109, name: '芒洪乡' },
+      { value: 100, value1: 101, name: '芒洪乡' },
       { value: 79, value1: 184, name: '大兴乡' },
     ],
   };