数据大屏投入品分类

main/package.json

@@ -23,6 +23,7 @@
     "axios": "^1.6.5",
     "dayjs": "^1.11.11",
     "echarts": "^5.6.0",
+    "echarts-gl": "^2.0.9",
     "element-plus": "^2.7.3",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.7",

main/src/components/custom-echart-pie-3d/index.vue

@@ -35,23 +35,7 @@ export default {
     const chartRef = ref(null);
     const { setOptions, getInstance, resize } = useEcharts(chartRef);
     const option = reactive({
-      tooltip: {
+      series: [],
-        formatter: '{b} ({c})',
-      },
-      series: [
-        {
-          type: 'pie',
-          radius: '72%',
-          center: ['50%', '55%'],
-          data: [],
-          labelLine: { show: true },
-          label: {
-            show: true,
-            formatter: '{b} \n ({d}%)',
-            color: '#B1B9D3',
-          },
-        },
-      ],
     });
 
     watchEffect(() => {
@@ -72,8 +56,7 @@ export default {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
-      // option.series[0].data = props.chartData;
+      option.series = props.chartData;
-      option.series[0].data = props.chartData;
       setOptions(option);
       resize();
       getInstance()?.off('click', onClick);

main/src/utils/echarts.js

@@ -1,7 +1,7 @@
 import * as echarts from 'echarts/core';
 
 import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart } from 'echarts/charts';
-
+import 'echarts-gl';
 import {
   TitleComponent,
   TooltipComponent,

main/yarn.lock

@@ -1628,6 +1628,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+claygl@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
+  integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
+
 clean-css@^5.2.2:
   version "5.3.3"
   resolved "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
@@ -2177,6 +2182,14 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
     es-errors "^1.3.0"
     gopd "^1.2.0"
 
+echarts-gl@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
+  integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
+  dependencies:
+    claygl "^1.2.1"
+    zrender "^5.1.1"
+
 echarts@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
@@ -7095,7 +7108,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zrender@5.6.1:
+zrender@5.6.1, zrender@^5.1.1:
   version "5.6.1"
   resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
   integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==

sub-government-screen-service/package.json

@@ -21,6 +21,7 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.6.5",
     "echarts": "^5.6.0",
+    "echarts-gl": "^2.0.9",
     "element-plus": "^2.7.2",
     "js-base64": "^3.7.6",
     "lodash": "^4.17.21",

sub-government-screen-service/src/views/entities/components/benefitCharts.vue

@@ -80,7 +80,7 @@ const chartsData = reactive({
     },
     //图表大小位置限制
     grid: {
-      x: '10%',
+      x: '16%',
       x2: '5%',
       y: '15%',
       y2: '15%',

sub-government-screen-service/src/views/entities/components/entitiesCategoryCharts.vue

@@ -6,16 +6,17 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
 const dataList = reactive([
-  { name: '打车费', val: 1230, itemStyle: { color: 'rgba(56, 136, 235, 1)' } },
+  { name: '肉类', val: 1230, itemStyle: { color: 'rgba(56, 136, 235, 1)' } },
-  { name: '住宿费', val: 300, itemStyle: { color: 'rgba(113, 70, 159, 1)' } },
+  { name: '水果', val: 300, itemStyle: { color: 'rgba(113, 70, 159, 1)' } },
-  { name: '办公费', val: 800, itemStyle: { color: 'rgba(237, 171, 87, 1)' } },
+  { name: '蔬菜', val: 800, itemStyle: { color: 'rgba(237, 171, 87, 1)' } },
-  { name: '差旅费', val: 500, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
+  { name: '水产', val: 500, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
+  { name: '谷物', val: 600, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
 ]);
 const heightProportion = ref(0.3); // 柱状扇形的高度比例
 
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 // #region
-const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height) => {
+const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height, radiusScale) => {
   // 计算
   let midRatio = (startRatio + endRatio) / 3;
 
@@ -54,22 +55,22 @@ const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h
 
     x: function (u, v) {
       if (u < startRadian) {
-        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
       }
       if (u > endRadian) {
-        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
       }
-      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
     },
 
     y: function (u, v) {
       if (u < startRadian) {
-        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
       }
       if (u > endRadian) {
-        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
       }
-      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
     },
 
     z: function (u, v) {
@@ -86,7 +87,7 @@ const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h
 // #endregion
 
 // 生成模拟 3D 饼图的配置项
-const getPie3D = (pieData, internalDiameterRatio) => {
+const getPie3D = (pieData, internalDiameterRatio, radiusScale = 1.8) => {
   let series = [];
   let sumValue = 0;
   let startValue = 0;
@@ -138,7 +139,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
       false,
       false,
       k,
-      series[i].pieData.value
+      series[i].pieData.value,
+      radiusScale
     );
 
     startValue = endValue;
@@ -148,8 +150,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
     const midRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
     // 计算扇区外缘顶部坐标（v=0时）
     const radius = 1 + k; // 外径公式
-    const posX = Math.cos(midRadian) * radius;
+    const posX = Math.cos(midRadian) * radius * radiusScale;
-    const posY = Math.sin(midRadian) * radius;
+    const posY = Math.sin(midRadian) * radius * radiusScale;
     // 获取该扇区实际高度
     const posZ = heightProportion.value * series[i].pieData.value;
     let flag = (midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2) ? 1 : -1;
@@ -169,15 +171,15 @@ const getPie3D = (pieData, internalDiameterRatio) => {
       {
         type: 'scatter3D',
         label: {
-          show: true,
+          show: true, //设置label的显示和隐藏
           distance: 0,
           position: 'center',
           textStyle: {
             color: '#ffffff',
             backgroundColor: color,
             borderWidth: 2,
-            fontSize: 14,
+            fontSize: 8,
-            padding: 10,
+            padding: 4,
             borderRadius: 4,
           },
           formatter: '{b}',
@@ -241,8 +243,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
     },
     parametricEquation: {
       u: {
-        min: 0.74, // 控制环的内径（92%半径）
+        min: 0.94, // 控制环的内径（92%半径）
-        max: 0.75, // 外径（100%半径）
+        max: 0.95, // 外径（100%半径）
         step: 0.0001,
       },
       v: {
@@ -277,8 +279,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
     },
     parametricEquation: {
       u: {
-        min: 0.54, // 控制环的内径（92%半径）
+        min: 0.94, // 控制环的内径（92%半径）
-        max: 0.55, // 外径（100%半径）
+        max: 0.95, // 外径（100%半径）
         step: 0.0001,
       },
       v: {
@@ -309,7 +311,6 @@ dataList.forEach((item) => {
 
 const chartsData = reactive({
   option: {
-    backgroundColor: '#2d58e4',
     xAxis3D: {
       min: -1.5,
       max: 1.5,
@@ -325,7 +326,7 @@ const chartsData = reactive({
     grid3D: {
       show: false,
       boxHeight: 4,
-      bottom: '50%',
+      top: '10%',
       viewControl: {
         distance: 380,
         alpha: 25,

sub-government-screen-service/src/views/entities/index.vue

@@ -7,7 +7,7 @@
             <div class="left-charts-item">
               <customBack top-title="生产经营主体类别统计" :top-postion="'left'">
                 <template #back>
-                  <!-- <entitiesCategoryCharts></entitiesCategoryCharts> -->
+                  <entitiesCategoryCharts></entitiesCategoryCharts>
                 </template>
               </customBack>
             </div>

sub-government-screen-service/src/views/inputs/components/casesAlerts.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="cases-alerts-warp">
+    <div class="cases-alerts" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg1.png') + ')' }">
+      <div class="cases-alerts-content">
+        <div class="cases-alerts-item-pos">
+          <template v-for="(n, index) in datalist" :key="index">
+            <div class="cases-alerts-item">
+              <div class="header" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg2.png') + ')' }">
+                <div class="title">{{ n.title }}</div>
+              </div>
+              <div class="content">
+                <template v-for="(m, mindex) in n.valStr" :key="mindex">
+                  <div class="content-item" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg3.png') + ')' }">
+                    <div class="num">{{ m }}</div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+const datalist = reactive([
+  { title: '案件次数', val: 100 },
+  { title: '预警次数', val: 236 },
+]);
+
+onMounted(() => {
+  if (datalist.length && datalist.length > 0) {
+    datalist.forEach((m) => {
+      let valStr = '';
+
+      if (m.val < 1000 && m.val >= 100) {
+        valStr = '0' + m.val;
+      } else if (m.val < 100 && m.val >= 10) {
+        valStr = '00' + m.val;
+      } else if (m.val < 10) {
+        valStr = '000' + m.val;
+      } else {
+        valStr = m.val.toFixed(0);
+      }
+      m.valStr = [...valStr];
+      console.info('valStr', m.valStr);
+    });
+  }
+});
+</script>
+<style lang="scss" scoped>
+div {
+  box-sizing: border-box;
+}
+.cases-alerts-warp {
+  height: 100%;
+  padding: 8px;
+  .cases-alerts {
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .cases-alerts-content {
+      width: 100%;
+      height: 100%;
+      padding: 0 20px;
+      display: inline-flex;
+      justify-content: center;
+      flex-direction: column;
+      .cases-alerts-item-pos {
+        width: 100%;
+        display: inline-flex;
+        justify-content: space-around;
+      }
+      .cases-alerts-item {
+        display: inline-block;
+        width: calc((100% - 20px) / 2);
+        .header,
+        .content {
+          display: inline-flex;
+          width: 100%;
+        }
+        .header {
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          line-height: 32px;
+          height: 32px;
+          display: inline-block;
+          width: 100%;
+          .title {
+            text-align: center;
+            font-size: 16px;
+            font-weight: bold;
+            transform: skewX(-8deg);
+            background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+            -webkit-background-clip: text;
+            color: #fff;
+            letter-spacing: 8px;
+            text-shadow: -6px 0 0 1px #add8f1;
+          }
+        }
+        .content {
+          justify-content: space-around;
+          margin-top: 50%;
+          .content-item {
+            height: 36px;
+            display: inline-block;
+            width: calc((100% - 20px) / 4);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            line-height: 36px;
+            text-align: center;
+            .num {
+              text-align: center;
+              font-size: 20px;
+              font-weight: bold;
+              transform: skewX(-8deg);
+              background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+              -webkit-background-clip: text;
+              color: #fff;
+              text-shadow: -6px 0 0 1px #add8f1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/inputs/components/inputsType.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="demo roll-list-land-plan" style="height: 90%">
+    <!-- <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div> -->
+    <!-- <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list"> -->
+    <div v-for="(item, index) in list" :key="index" class="list-item">
+      <div class="list-item-content">
+        <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+          <div class="item-content">
+            <div class="label">{{ item.title }}</div>
+            <div class="val">
+              <el-progress :percentage="50" :show-text="false" :stroke-width="12" color="#6cd1f9" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- </vue3ScrollSeamless> -->
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { title: '农药', value: 357 },
+  { title: '肥料', value: 159 },
+  { title: '种源', value: 516 },
+  { title: '兽药', value: 82 },
+  { title: '农机', value: 45 },
+]);
+
+const listKeys = reactive(['title', 'value']);
+const listKeysHeader = reactive({
+  title: '分类',
+  value: '数量',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
+</script>
+
+<style scoped lang="scss">
+.roll-list-land-plan {
+  margin-top: 8px;
+  ::v-deep() {
+    .el-progress-bar__outer {
+      background: transparent;
+    }
+  }
+  .scroll-wrap {
+    height: 90%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
+    }
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6cd1f9 !important;
+      }
+      &.zebra-b {
+        background: #051225 !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+    .item-content {
+      width: 100%;
+      display: inline-flex;
+      justify-content: flex-start;
+      margin: 8px 0;
+      .label,
+      .val {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .label {
+        width: 50px;
+        color: #fff;
+      }
+      .val {
+        width: calc(100% - 50px);
+      }
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+    }
+  }
+}
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
+</style>

sub-government-screen-service/src/views/inputs/index.vue

@@ -6,7 +6,9 @@
           <el-col :span="6" class="left-charts">
             <div class="left-charts-item">
               <customBack top-title="投入品分类统计" :top-postion="'left'">
-                <template #back> </template>
+                <template #back>
+                  <inputsType></inputsType>
+                </template>
               </customBack>
             </div>
             <div class="left-charts-item">
@@ -30,7 +32,9 @@
           <el-col :span="6" class="right-charts">
             <div class="right-charts-item">
               <customBack top-title="案件次数" :top-postion="'right'">
-                <template #back> </template>
+                <template #back>
+                  <casesAlerts></casesAlerts>
+                </template>
               </customBack>
             </div>
             <div class="right-charts-item">
@@ -61,6 +65,8 @@ import inputsGmp from './components/inputsGmp.vue';
 import landbreedCharts from './components/landbreedCharts.vue';
 import monthlyuseCharts from './components/monthlyuseCharts.vue';
 import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
+import casesAlerts from './components/casesAlerts.vue';
+import inputsType from './components/inputsType.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {

sub-government-screen-service/yarn.lock

@@ -1601,6 +1601,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+claygl@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
+  integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
+
 clone-regexp@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/clone-regexp/-/clone-regexp-1.0.1.tgz#051805cd33173375d82118fc0918606da39fd60f"
@@ -2086,6 +2091,14 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
     es-errors "^1.3.0"
     gopd "^1.2.0"
 
+echarts-gl@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
+  integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
+  dependencies:
+    claygl "^1.2.1"
+    zrender "^5.1.1"
+
 echarts@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
@@ -6686,7 +6699,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zrender@5.6.1:
+zrender@5.6.1, zrender@^5.1.1:
   version "5.6.1"
   resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
   integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==