完成图标设计

src/api/chart/type.ts

@@ -65,3 +65,12 @@ export interface searchInfo{
     endTime: string;
     coor: string;
 }
+//输出指标结构
+export interface targetInfo{
+    title:string;
+    list:listAry;
+}
+interface listAry{
+    name:string;
+    value:any;
+}

src/utils/request.ts

@@ -1,5 +1,6 @@
 import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
 import { useUserStoreHook } from '@/store/modules/user';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 // 创建 axios 实例
 const service = axios.create({

src/utils/requestfile.ts

@@ -1,5 +1,6 @@
 import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
 import { useUserStoreHook } from '@/store/modules/user';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 // 创建 axios 实例
 const service = axios.create({

src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue

@@ -4,6 +4,7 @@
 @ 备注: 排行榜
 -->
 <script lang="ts" setup>
+import { analyzeChartData } from "@/api/chart/index";
 import { echatsViews } from "@/api/DesignForm/types";
 import * as echarts from "echarts";
 
@@ -31,31 +32,87 @@ var myChart = ref<any>();
 const drawPictures = () => {
   if (props.uuid && props.uuid != "") {
     myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement);
-    myChart.value.setOption({
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "5%",
-        top: "15%",
-        containLabel: true,
-      },
-      xAxis: {
-        max: "dataMax",
-      },
-      yAxis: {
-        type: "category",
-        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
-        inverse: true,
-      },
-      series: [
-        {
-          realtimeSort: true,
-          name: "销量",
-          type: "bar",
-          data: [5, 26, 36, 10, 15, 20],
-        },
-      ],
+    analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => {
+      console.log("画图排行榜---->1", data);
+      if (data.code == 0) {
+        let radMap = data.data;
+        let seriesList = new Array();
+        if (Array.isArray(radMap.seriesData)) {
+          radMap.seriesData.forEach((item: any) => {
+            seriesList.push({
+              realtimeSort: true,
+              name: item.name,
+              type: "bar",
+              data: item.value,
+              label: {
+                show: true,
+                position: "right",
+                valueAnimation: true,
+              },
+            });
+          });
+        }
+        let optionData = {
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "5%",
+            top: "15%",
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            show: true,
+          },
+          xAxis: {
+            max: "dataMax",
+          },
+          yAxis: {
+            type: "category",
+            data: radMap.yAxisData,
+            inverse: true,
+            max: radMap.max, // only the largest 3 bars will be displayed
+          },
+          series: seriesList,
+        };
+        myChart.value.setOption(optionData);
+      } else {
+        myChart.value.setOption({
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "5%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            max: "dataMax",
+          },
+          yAxis: {
+            type: "category",
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
+            inverse: true,
+          },
+          series: [
+            {
+              realtimeSort: true,
+              name: "销量",
+              type: "bar",
+              data: [5, 26, 36, 10, 15, 20],
+            },
+            {
+              realtimeSort: true,
+              name: "销量1",
+              type: "bar",
+              data: [5, 26, 36, 10, 15, 20],
+            },
+          ],
+        });
+      }
     });
+
     console.log("画图完毕---->", props);
   }
 };

src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue

@@ -4,6 +4,7 @@
 @ 备注: 饼状图
 -->
 <script lang="ts" setup>
+import { analyzeChartData } from "@/api/chart/index";
 import { echatsViews } from "@/api/DesignForm/types";
 import * as echarts from "echarts";
 
@@ -33,39 +34,92 @@ const drawPie = () => {
     myChartPie.value = echarts.init(
       document.getElementById(props.uuid) as HTMLDivElement
     );
-    myChartPie.value.setOption({
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "5%",
-        top: "15%",
-        containLabel: true,
-      },
-      legend: {
-        left: "center",
-      },
-      series: [
-        {
-          name: "Access From",
-          type: "pie",
-          radius: "50%",
-          data: [
-            { value: 1048, name: "Search Engine" },
-            { value: 735, name: "Direct" },
-            { value: 580, name: "Email" },
-            { value: 484, name: "Union Ads" },
-            { value: 300, name: "Video Ads" },
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)",
+    analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => {
+      console.log("火兔---->1", data);
+      if (data.code == 0) {
+        let optionData = {
+          tooltip: {
+            trigger: "item",
+            formatter: function (params) {
+              var res = params.name + params.percent + "<br/>";
+
+              for (let i = 0; i < data.data.otherData.length; i++) {
+                if (params.name == data.data.otherData[i].fathreName) {
+                  res +=
+                    data.data.otherData[i].toolName +
+                    ":" +
+                    data.data.otherData[i].toolval +
+                    "<br/>";
+                }
+              }
+              return res;
             },
           },
-        },
-      ],
+          legend: {
+            left: "left",
+          },
+          series: [
+            {
+              type: "pie",
+              center: ["50%", "60%"],
+              data: data.data.mastrerData,
+              label: {
+                show: true,
+                formatter: `{data|{b}} {serie|{d}%}`,
+                padding: [0, 15, 0, 0],
+                rich: {
+                  data: {
+                    fontSize: 14,
+                    color: "#666666",
+                  },
+                  serie: {
+                    fontSize: 15,
+                    color: "#000000",
+                    padding: [0, 0, 0, 3],
+                  },
+                },
+              },
+
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+            },
+          ],
+        };
+        console.log("火兔---->2", optionData);
+        myChartPie.value.setOption(optionData);
+      } else {
+        myChartPie.value.setOption({
+          legend: {
+            left: "center",
+          },
+          series: [
+            {
+              type: "pie",
+              data: [
+                { value: 1048, name: "Search Engine" },
+                { value: 735, name: "Direct" },
+                { value: 580, name: "Email" },
+                { value: 484, name: "Union Ads" },
+                { value: 300, name: "Video Ads" },
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+            },
+          ],
+        });
+      }
     });
+
     console.log("画图完毕---->", props);
   }
 };
@@ -82,7 +136,13 @@ const searBut = (val: string) => {
   }
   return false;
 };
-
+watch(
+  () => props.data,
+  (val: any) => {
+    drawPie();
+  },
+  { deep: true }
+);
 onMounted(() => {
   nextTick(() => {
     drawPie();

src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue

@@ -4,6 +4,7 @@
 @ 备注: 雷达图
 -->
 <script lang="ts" setup>
+import { analyzeChartData } from "@/api/chart/index";
 import { echatsViews } from "@/api/DesignForm/types";
 import * as echarts from "echarts";
 
@@ -28,50 +29,81 @@ var myChartPie = ref<any>();
 @ 时间: 2025-06-26 11:34:21
 @ 功能: 画图
 */
-const drawPie = () => {
+const drawRadar = () => {
   if (props.uuid && props.uuid != "") {
     myChartPie.value = echarts.init(
       document.getElementById(props.uuid) as HTMLDivElement
     );
-    myChartPie.value.setOption({
-      grid: {
-        left: "2%",
-        right: "2%",
-        bottom: "5%",
-        top: "5%",
-        containLabel: true,
-      },
-      legend: {
-        data: ["Allocated Budget", "Actual Spending"],
-      },
-      radar: {
-        // shape: 'circle',
-        indicator: [
-          { name: "Sales", max: 6500 },
-          { name: "Administration", max: 16000 },
-          { name: "Information Technology", max: 30000 },
-          { name: "Customer Support", max: 38000 },
-          { name: "Development", max: 52000 },
-          { name: "Marketing", max: 25000 },
-        ],
-      },
-      series: [
-        {
-          name: "Budget vs spending",
-          type: "radar",
-          data: [
+    analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => {
+      console.log("画图雷达---->1", data);
+      if (data.code == 0) {
+        let radMap = data.data;
+        let optionData = {
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            data: radMap.legend,
+            left: "left",
+          },
+          radar: {
+            // shape: 'circle',
+            indicator: radMap.indicator,
+          },
+          series: [
             {
-              value: [4200, 3000, 20000, 35000, 50000, 18000],
-              name: "Allocated Budget",
+              type: "radar",
+              data: radMap.dataList,
             },
+          ],
+        };
+        myChartPie.value.setOption(optionData);
+      } else {
+        myChartPie.value.setOption({
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "5%",
+            top: "5%",
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            data: ["Allocated Budget", "Actual Spending"],
+          },
+          radar: {
+            // shape: 'circle',
+            indicator: [
+              { name: "Sales", max: 6500 },
+              { name: "Administration", max: 16000 },
+              { name: "Information Technology", max: 30000 },
+              { name: "Customer Support", max: 38000 },
+              { name: "Development", max: 52000 },
+              { name: "Marketing", max: 25000 },
+            ],
+          },
+          series: [
             {
-              value: [5000, 14000, 28000, 26000, 42000, 21000],
-              name: "Actual Spending",
+              name: "Budget vs spending",
+              type: "radar",
+              data: [
+                {
+                  value: [4200, 3000, 20000, 35000, 50000, 18000],
+                  name: "Allocated Budget",
+                },
+                {
+                  value: [5000, 14000, 28000, 26000, 42000, 21000],
+                  name: "Actual Spending",
+                },
+              ],
             },
           ],
-        },
-      ],
+        });
+      }
     });
+
     console.log("画图完毕---->", props);
   }
 };
@@ -88,10 +120,16 @@ const searBut = (val: string) => {
   }
   return false;
 };
-
+watch(
+  () => props.data,
+  (val: any) => {
+    drawRadar();
+  },
+  { deep: true }
+);
 onMounted(() => {
   nextTick(() => {
-    drawPie();
+    drawRadar();
   });
 });
 </script>

src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/target.vue

@@ -4,9 +4,12 @@
 @ 备注: 指标图
 -->
 <script lang="ts" setup>
+import { analyzeChartData } from "@/api/chart/index";
 import { echatsViews } from "@/api/DesignForm/types";
+import { targetInfo } from "@/api/chart/type";
 const props = withDefaults(
   defineProps<{
+    uuid: string;
     data: echatsViews;
     tableKey: string;
   }>(),
@@ -16,8 +19,209 @@ const props = withDefaults(
     },
   }
 );
+const listAry = ref<targetInfo>([]);
+/**
+@ 作者: 秦东
+@ 时间: 2025-07-23 13:38:00
+@ 功能: 获取指标数据
+*/
+const getTargetData = () => {
+  if (props.uuid && props.uuid != "") {
+    analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => {
+      console.log("获取指标数据---->1", data);
+      listAry.value = data.data;
+    });
+  }
+};
+
+/**
+@ 作者: 秦东
+@ 时间: 2025-06-26 09:47:45
+@ 功能: 判断是否有收缩条件
+*/
+const searBut = (val: string) => {
+  if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) {
+    if (props.data.search.searchBut.includes(val)) {
+      return true;
+    }
+  }
+  return false;
+};
+watch(
+  () => props.data,
+  (val: any) => {
+    getTargetData();
+  },
+  { deep: true }
+);
+onMounted(() => {
+  nextTick(() => {
+    getTargetData();
+  });
+});
 </script>
 <template>
-  <div>指标图</div>
+  <div>
+    <el-space wrap class="spaceBox">
+      <svg-icon icon-class="zydq" :size="20" />
+      <el-text>{{ props.data.title }}</el-text>
+    </el-space>
+    <el-form
+      v-if="props.data.search"
+      :inline="true"
+      label-width="auto"
+      class="demo-form-inline"
+    >
+      <el-form-item v-for="item in props.data.search.factor" :label="item.lable">
+        <el-date-picker
+          v-if="item.type == 3 && item.timeType == 'ymdhms'"
+          v-model="item.value"
+          type="daterange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'year'"
+          v-model="item.value"
+          type="yearrange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'month'"
+          v-model="item.value"
+          type="monthrange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'day'"
+          v-model="item.value"
+          type="daterange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'hour'"
+          v-model="item.value"
+          type="datetimerange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'minute'"
+          v-model="item.value"
+          type="datetimerange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'second'"
+          v-model="item.value"
+          type="datetimerange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-select
+          v-else-if="item.options != null"
+          v-model="item.value"
+          clearable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in item.options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input v-else v-model="item.value" />
+      </el-form-item>
+      <el-form-item v-if="props.data.search.state">
+        <el-button v-if="searBut('search')" type="primary" @click="onSubmit"
+          >查询</el-button
+        >
+        <el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div class="targetBox">
+      <el-scrollbar height="340px">
+        <el-row style="width: 98%; margin-left: 1%" :gutter="10">
+          <el-col v-for="(item, index) in listAry" :span="8" :key="index">
+            <el-card shadow="always">
+              <div class="targetBody">
+                <div class="targetTitle">{{ item.title }}</div>
+                <div v-for="itemSun in item.list" class="targetContent">
+                  {{ itemSun.name }}：{{ itemSun.value }}
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-scrollbar>
+    </div>
+  </div>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.barBox {
+  height: 250px;
+  width: 100%;
+}
+.spaceBox {
+  margin-top: 15px;
+  span {
+    font-size: 20px;
+  }
+}
+.demo-form-inline {
+  padding: 10px 0 0px 0;
+}
+.demo-form-inline .el-input {
+  --el-input-width: 200px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 200px;
+}
+.targetBox {
+  width: 100%;
+  .targetCard {
+    width: 25%;
+  }
+
+  :deep .el-col {
+    margin-top: 10px;
+  }
+  :deep .el-card {
+    min-height: 150px;
+  }
+  .targetBody {
+    padding: 10px;
+    .targetTitle {
+      text-align: center;
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .targetContent {
+      text-align: left;
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/right.vue

@@ -152,7 +152,7 @@ const setMeaInfo = (val: dimSetInfo) => {
 const setFilInfo = (val: dimSetInfo) => {
   pickFilpage.value = val;
   openFilpage.value = true;
-  console.log("打开过滤条件设置", openFilpage.value, pickFilpage.value);
+  // console.log("打开过滤条件设置", openFilpage.value, pickFilpage.value);
 };
 /**
 @ 作者: 秦东
@@ -161,7 +161,7 @@ const setFilInfo = (val: dimSetInfo) => {
 */
 const setSearch = (val: searchInfo) => {
   pickSearInfo.value = val;
-  console.log("设置搜索条件配置", val);
+  // console.log("设置搜索条件配置", val);
   openSearch.value = true;
 };
 /**
@@ -173,7 +173,7 @@ const shuxingmh = (val: any) => {
   let titleVal = "";
   if (Array.isArray(matchList)) {
     matchList.forEach((item: any) => {
-      console.log(item.value, val, item.value == val);
+      // console.log(item.value, val, item.value == val);
       if (item.value == val) {
         titleVal = item.label;
       }

src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/dimMea.vue

@@ -614,6 +614,21 @@ const huanyuan = () => {
       break;
   }
 };
+//维度变化设定
+const weiduBianhua = () => {
+  console.log("------------------->", checkDimList.value);
+  checkDimList.value = checkDimList.value.slice(-1);
+  console.log("------------------->", checkDimList.value);
+  return false;
+};
+//度量变化
+const duliangBianhua = () => {
+  console.log("------------------->", checkMeaList.value);
+  console.log("------------------->", controlData.value.type);
+  if (controlData.value.type == "barRace") {
+    checkMeaList.value = checkMeaList.value.slice(-1);
+  }
+};
 </script>
 <template>
   <el-drawer
@@ -621,7 +636,7 @@ const huanyuan = () => {
     :title="drawTitle"
     direction="rtl"
     :before-close="handleClose"
-  >
+    >{{ controlData.type }}--->{{ props.dimMeaType }}
     <div class="drawBodyBox">
       <el-divider
         v-if="props.dimMeaType == 3 || props.dimMeaType == 4"
@@ -631,6 +646,7 @@ const huanyuan = () => {
       <el-checkbox-group
         v-if="props.dimMeaType == 1 || props.dimMeaType == 3 || props.dimMeaType == 4"
         v-model="checkDimList"
+        @change="weiduBianhua"
       >
         <div v-for="(item, index) in props.dimAry">
           <el-checkbox v-if="item.type == 1" :label="item.title" :value="item.field" />
@@ -678,6 +694,7 @@ const huanyuan = () => {
       <el-checkbox-group
         v-if="props.dimMeaType == 2 || props.dimMeaType == 3 || props.dimMeaType == 4"
         v-model="checkMeaList"
+        @change="duliangBianhua"
       >
         <div v-for="(item, index) in props.meaAry">
           <el-checkbox v-if="item.type == 2" :label="item.title" :value="item.field" />