Explorar o código

图表封装、数据筛选

liujiejie hai 6 meses
pai
achega
1028a8f3b9

+ 17 - 2
src/assets/js/constants/echarts-config/bar.js

@@ -21,11 +21,26 @@ export const option = {
       alignWithLabel: true,
     },
   },
-
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  legend: {
+    top: "bottom",
+  },
   yAxis: {
     type: "value",
+    nameLocation: "middle", // 设置名称位置,可以是 'start', 'middle' 或 'end'
+    nameTextStyle: {
+      fontSize: 14, // 文字大小
+      color: "#333", // 文字颜色
+      padding: [0, 0, 30, 0], // 文字与轴线的距离
+    },
   },
-
   series: [
     {
       name: "Direct",

+ 16 - 2
src/assets/js/constants/echarts-config/line.js

@@ -6,9 +6,17 @@ export const option = {
     trigger: "axis",
   },
   legend: {
-    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
+    top: "bottom",
+    // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
   },
-
   toolbox: {
     feature: {
       saveAsImage: {},
@@ -21,6 +29,12 @@ export const option = {
   },
   yAxis: {
     type: "value",
+    nameLocation: "middle", // 设置名称位置,可以是 'start', 'middle' 或 'end'
+    nameTextStyle: {
+      fontSize: 14, // 文字大小
+      color: "#333", // 文字颜色
+      padding: [0, 0, 30, 0], // 文字与轴线的距离
+    },
   },
   grid: {
     top: "20%",

+ 4 - 1
src/store/dragChart.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-04 10:06:23
- * @LastEditTime: 2024-11-14 16:02:22
+ * @LastEditTime: 2024-11-15 09:17:48
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/store/dragChart.js
@@ -41,6 +41,9 @@ export default {
         originChartList: [],
         fileList: [],
         dataBaseCheckList: {},
+        triggerGetData: false,
+        updateTriggerGetData: false,
+        relatedFieldsData: [], //关联字段表
       };
 
       // 遍历重置每个字段

+ 11 - 2
src/views/performance/components/custonAsCom/AssociatedFields.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="associtedFieldsContent">
+  <div class="global-variable">
     <el-row type="flex" class="row-bg" justify="end">
       <el-button type="primary" @click="handleDrawer">新建关联</el-button>
     </el-row>
-    <el-table :data="relatedFieldsData || []" border style="width: 100%">
+    <el-table
+      height="600"
+      :data="relatedFieldsData || []"
+      border
+      style="width: 100%"
+    >
       <el-table-column prop="tableFileName1" label="关联表1"> </el-table-column>
       <el-table-column prop="tableFileName2" label="关联表2"> </el-table-column>
       <el-table-column prop="tableFileName1" label="表1关联字段" align="center">
@@ -360,6 +365,10 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+// ::v-deep .global-variable {
+//   height: 100% !important;
+//   overflow: scroll !important;
+// }
 .row-bg {
   margin: 10px 0;
 }

+ 3 - 3
src/views/performance/components/custonAsCom/dataTable.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2024-10-28 16:46:38
- * @LastEditTime: 2024-11-14 15:55:59
+ * @LastEditTime: 2024-11-15 09:59:57
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dataTable.vue
 -->
 <template>
-  <div class="dataTableContent" v-loading="loading">
+  <div class="global-variable" v-loading="loading">
     <el-tabs
       v-if="tabData.length > 0"
       v-model="activeName"
@@ -130,7 +130,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.dataTableContent {
+.global-variable {
   .tabsBox {
     margin: 0 15px;
     ::v-deep .el-tabs__item {

+ 152 - 20
src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/title.vue

@@ -16,7 +16,7 @@
           "
         >
           <span>纬度标签</span>
-          <el-tooltip content="添加纬度" placement="bottom-start">
+          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
             <i
               @click="
                 formLabelAlign.Xdata.push({ lable: '', data: [], id: '' })
@@ -24,7 +24,7 @@
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
-          </el-tooltip>
+          </el-tooltip> -->
         </div>
         <template v-for="(item, ind) in formLabelAlign.Xdata">
           <el-select
@@ -65,21 +65,40 @@
           </el-tooltip>
         </div>
         <template v-for="(item, ind) in formLabelAlign.Ydata">
-          <el-select
-            style="margin: 5px 0"
-            :key="ind + 'select' + 'zhibiao'"
-            v-model="formLabelAlign.Ydata[ind].id"
-            placeholder="请先进行数据配置"
-            :disabled="disabled"
-            @change="handleYdata"
-          >
-            <el-option
-              v-for="item in selectData"
-              :label="item.label"
-              :value="item.id"
-              :key="item.id"
-            ></el-option>
-          </el-select>
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select' + 'zhibiao'"
+              v-model="formLabelAlign.Ydata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleYdata"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              :content="
+                ind === 0 ? '该指标不可删除,最少存在一组指标' : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="ind === 0"
+                @click="removeYdata(ind)"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
         </template>
       </el-form-item>
       <el-form-item label="标题名称">
@@ -98,12 +117,95 @@
         <el-input v-model="formLabelAlign.Ylable"></el-input>
       </el-form-item>
     </el-form>
+    <div style="margin: 20px 0">
+      <el-divider style="height: 2px"></el-divider>
+    </div>
+    <!-- <el-collapse v-if="formLabelAlign.Ydata[0].data.length > 0">
+      <el-collapse-item
+        v-for="(itemFilter, filterInd) in formLabelAlign.Ydata"
+        :title="itemFilter.label || `数据筛选`"
+        :name="itemFilter.id"
+        :key="itemFilter.id"
+      >
+        <el-form
+          label-position="top"
+          :model="formFilterAlign[filterInd]"
+          size="mini"
+          ref="form"
+        >
+          <el-form-item label="数据筛选">
+            <el-select
+              v-model="formFilterAlign[filterInd].filter"
+              placeholder="请选择数据"
+              multiple
+              collapse-tags
+            >
+              <el-option label="全部" value="all"></el-option>
+              <el-option
+                v-for="(item, index) in itemFilter.data"
+                :label="
+                  item[itemFilter.label] ? `${item[itemFilter.label]} ` : `0`
+                "
+                :value="item[itemFilter.label] + '' + index"
+                :key="item[itemFilter.label] + '' + index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="条件过滤">
+            <el-select placeholder="请选择过滤条件" v-model="value">
+              <el-option label="全部" value="all"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="显示值满足一下条件">
+            <el-select
+              v-model="formFilterAlign[filterInd].filterType1"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-model="formLabelAlign[filterInd].number1"
+              type="number"
+            ></el-input>
+            <el-radio v-model="formLabelAlign[filterInd].radio" label="1"
+              >或</el-radio
+            >
+            <el-radio v-model="formLabelAlign[filterInd].radio" label="2"
+              >且</el-radio
+            >
+            <el-select
+              v-model="formFilterAlign[filterInd].filterType2"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-model="formLabelAlign[filterInd].number2"
+              type="number"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse> -->
   </div>
 </template>
-
 <script>
 import { mapState, mapMutations } from "vuex";
 import { getFormattedLabels, getFormattedSeries } from "./configFn";
+import { all } from "axios";
 export default {
   name: "title",
   props: {
@@ -120,6 +222,22 @@ export default {
   },
   data() {
     return {
+      value: "all",
+      formFilterAlign: [],
+      options: [
+        {
+          value: "1",
+          label: "小于",
+        },
+        {
+          value: "2",
+          label: "大于",
+        },
+        {
+          value: "3",
+          label: "等于",
+        },
+      ],
       formLabelAlign: {
         Xdata: [
           {
@@ -202,7 +320,10 @@ export default {
     },
 
     changeData() {
-      this.$refs.form.resetFields();
+      if (this.$refs.form) {
+        this.$refs.form.resetFields();
+      }
+
       if (this.curEdit && this.curEdit.option) {
         console.log(this.curEdit, "title-changeData-this.curEdit");
         this.formLabelAlign = {
@@ -235,6 +356,7 @@ export default {
         console.log("curEdit.option 不存在", this.curEdit);
       }
     },
+    //全部数据渲染
     changeChart() {
       if (!this.curEdit || !this.curEdit.option) return; // 确保 curEdit 和 option 存在
       const item = JSON.parse(JSON.stringify(this.curEdit));
@@ -294,10 +416,12 @@ export default {
 
       this.updateChart(item); // 更新图表
     },
+    removeYdata(index) {
+      this.formLabelAlign.Ydata.splice(index, 1); // 删除当前项
+    },
   },
 };
 </script>
-
 <style scoped lang="scss">
 ::v-deep .el-form-item {
   width: 100% !important;
@@ -305,5 +429,13 @@ export default {
   .el-form-item__label {
     width: 100% !important;
   }
+  .attributeItemData {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+.el-divider--horizontal {
+  height: 2px;
 }
 </style>

+ 2 - 1
src/views/performance/components/custonAsCom/dragChart/components/chartsAttributes.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-11-01 10:14:11
- * @LastEditTime: 2024-11-13 10:17:18
+ * @LastEditTime: 2024-11-18 09:36:53
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
@@ -166,6 +166,7 @@ export default {
 }
 ::v-deep .el-divider--horizontal {
   margin: 5px 0;
+  height: 2px;
 }
 ::v-deep .el-form--label-top .el-form-item__label {
   padding: 0;

+ 36 - 0
src/views/performance/customAnalysis.vue

@@ -146,6 +146,25 @@
             <el-option label="区域二" value="beijing"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="选择数据范围:">
+          <div class="demo-input-suffix">
+            <el-input
+              size="small"
+              type="number"
+              placeholder="最小值"
+              v-model="ruleForm.min"
+            >
+            </el-input>
+            <el-col class="line" :span="2">-</el-col>
+            <el-input
+              size="small"
+              type="number"
+              placeholder="最大值"
+              v-model="ruleForm.max"
+            >
+            </el-input>
+          </div>
+        </el-form-item>
         <el-form-item label="选择特征值计算:" prop="type">
           <el-checkbox-group v-model="ruleForm.type">
             <el-checkbox label="有效值" name="type"></el-checkbox>
@@ -204,6 +223,8 @@ export default {
       ruleForm: {
         region: "",
         type: [],
+        min: null,
+        max: null,
       },
       rules: {
         region: [
@@ -394,6 +415,21 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .el-tab-pane {
+    height: 100%;
+    overflow: scroll !important;
+  }
+  .demo-input-suffix {
+    display: flex;
+    .line {
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .el-input--small {
+    // font-size: 13px;
+    width: 190px !important;
+  }
 }
 .uploadBoxContent {
   margin: 5px;