bi看板

src/views/BI_manage/components/BoardContent.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="BI-board-content">
-    <div class="BI-board-list" v-infinite-scroll="handleScroll" :infinite-scroll-immediate="false">
-      <table-no-data v-if="list.length===0" style="flex:1"/>
+    <div class="BI-board-list">
+      <table-no-data v-if="value.length===0" style="flex:1"/>
       <div
         class="BI-board-item-box"
-        v-for="(item, index) in list"
+        v-for="(item, index) in value"
         :key="item.UniqueCode"
         @dragover.prevent
         @drop="drop(index)"
@@ -23,6 +23,9 @@
               style="cursor: move"
             />
           </template>
+          <template v-slot:delete>
+            <img class="icon" src="~@/assets/img/icons/delete-red.png" alt="" />
+          </template>
         </component>
       </div>
     </div>
@@ -37,7 +40,7 @@ import TableBox from './TableBox.vue';
 export default {
   components: { ChartBox, TableBox, TableNoData },
   props: {
-    dataList: {
+    value: {
       type: Array,
       default: () => []
     },
@@ -46,39 +49,12 @@ export default {
       default: true
     }
   },
-  watch: {
-    dataList:{
-      handler(){
-        this.init()
-      },
-      immediate:true,
-      deep:true
-    }
-  },
   data() {
     return {
-      page: 0,
-      pageSize: 6,
-      list: [],
       draggedIndex: null,
     };
   },
   methods: {
-    init() {
-      console.log('初始化看板');
-      this.page = 0
-      this.list = []
-      this.handleLoadContent()
-    },
-    handleLoadContent() {
-      this.list = this.list.concat(this.dataList.slice(this.page * this.pageSize, (this.page + 1) * this.pageSize))
-    },
-    handleScroll(){
-      if(this.list.length>=this.dataList.length) return
-      this.page++
-      this.handleLoadContent()
-    },
-
     getCompType(type) {
       return type === 1 ? ChartBox : TableBox;
     },
@@ -92,11 +68,12 @@ export default {
     drop(index) {
       if (this.draggedIndex === null) return
       // Swap the two items
-      const temp = this.list[this.draggedIndex];
-      this.$set(this.list, this.draggedIndex, this.list[index]);
-      this.$set(this.list, index, temp);
+      const temp = this.value[this.draggedIndex];
+      this.$set(this.value, this.draggedIndex, this.value[index]);
+      this.$set(this.value, index, temp);
       this.draggedIndex = null;
-      this.$emit('sortChange',this.list)
+      this.$emit('input',this.value)
+      this.$emit('sortChange',this.value)
     },
   }
 };

src/views/BI_manage/components/ChartBox.vue

@@ -1,63 +1,260 @@
 <template>
-  <div class="chart-box" v-if="compData">
+  <div class="chart-box" v-if="compData" ref="compRef" v-loading="loading">
     <div class="top-title-box">
-      <div class="title">标题{{compData.UniqueCode}}</div>
+      <div class="title" @click="goDetail">{{ compData.ChartName }}</div>
       <div class="opt-box">
-        <img class="icon" src="~@/assets/img/icons/refresh_blue_new.png" alt="">
+        <img
+          class="icon"
+          src="~@/assets/img/icons/refresh_blue_new.png"
+          alt=""
+        />
         <slot name="drag"></slot>
-        <img class="icon" src="~@/assets/img/icons/delete-red.png" alt="">
+        <slot name="delete"></slot>
       </div>
     </div>
-    <img class="bg" src="https://hzstatic.hzinsights.com/static/images/202409/20240924/iy8dDVu5HwzLdIKyuX2ajkqBrrB7.png" alt="">
+    <!-- 无权限 -->
+    <div class="nodata" v-if="chartInfo.HaveOperaAuth === false">
+      <noDataAuth :text="$t('MsgPrompt.no_chart_auth')" />
+    </div>
+    <div class="chart-render-wrap" v-else>
+      <Chart
+        minHeight="480px"
+        height="480px"
+        :options="options"
+        :chartInfo="chartInfo"
+        :index="compData.UniqueCode"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import Chart from '@/views/dataEntry_manage/components/chart';
+import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic'
+import { dataBaseInterface } from '@/api/api.js';
 export default {
-  props:{
-    compData:null
-  }
+  components: { Chart },
+  mixins: [chartSetMixin],
+  props: {
+    compData: null
+  },
+  watch: {
+    tableData: {
+      handler(newval) {
+        newval.length && !this.chartInfo.WarnMsg && [1, 11].includes(this.chartInfo.Source) && this.setChartOptionHandle(newval);
+      },
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      observer: null,
+      isVisible: false, // 是否可见
+
+      chartInfo: {},
+    }
+  },
+  mounted() {
+    console.log('图表组件挂载');
+    this.createObserver();
+  },
+  beforeUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  methods: {
+    goDetail() {
+      const pathMap = new Map([
+        [1,'/chartsetting'],
+        [3,'/chartrelevance'],
+        [6,'/fittingEquationList'],
+        [7,'/statisticFeatureList'],
+        [10,'/crossVarietyChartList'],
+        [12,'/rangeAnalysis']
+      ])
+      const href = this.$router.resolve({
+        path: pathMap.get(this.chartInfo.Source),
+        query: {
+          code: this.chartInfo.UniqueCode,
+          id: this.chartInfo.ChartInfoId
+        }
+      }).href
+      window.open(href, "_blank")
+    },
+
+    // 获取图表数据
+    async handleGetChartData() {
+      const res = await dataBaseInterface.getChartByCode({ UniqueCode: this.compData.UniqueCode })
+      this.loading = false
+      if (res.Ret !== 200) return;
+      this.chartInfo = res.Data.ChartInfo;
+
+      this.chartInfo.SeasonExtraConfig && (this.SeasonExtraConfig = JSON.parse(this.chartInfo.SeasonExtraConfig))
+
+      if (!this.chartInfo.HaveOperaAuth) return
+
+      if ([1, 11, 12].includes(this.chartInfo.Source)) {
+        //季节性图处理SeasonAverageConfig,SeasonRightEdbConfig
+        if (this.chartInfo.ChartType === 2) {
+          const { MaxMinLimits, SamePeriodAverage, SamePeriodStandardDeviation, RightAxis } = res.Data.DataResp
+          this.chartInfo.SeasonAverageConfig = { MaxMinLimits, SamePeriodAverage, SamePeriodStandardDeviation }
+          this.chartInfo.SeasonRightConfig = RightAxis
+        }
+        this.tableData = res.Data.EdbInfoList;
+        //初始化上下限
+        this.setLimitData(this.tableData)
+
+        this.chartInfo.ChartType === 7 && this.initBarData(res.Data);
+
+        //截面散点图
+        this.chartInfo.ChartType === 10 && this.initSectionScatterData(res.Data);
+
+        //雷达图
+        this.chartInfo.ChartType === 11 && this.initRadarData(res.Data);
+
+        // 截面组合图
+        this.chartInfo.ChartType === 14 && this.initSectionalCombinationChart(res.Data);
+
+        // 区间分析
+        this.chartInfo.Source === 12 && this.initIntervalAnalysisChartData(res.Data)
+
+      } else if ([2, 5].includes(this.chartInfo.Source)) {
+        // this.tableData = [res.Data.EdbInfoList[0]];
+        this.tableData = res.Data.EdbInfoList.filter(_e => _e.Source)
+        this.chartInfo = res.Data.ChartInfo.Source === 5 ? {
+          ...res.Data.ChartInfo,
+          ProfitNameEn: res.Data.DataResp.ProfitNameEn,
+          ProfitName: res.Data.DataResp.ProfitName,
+        } : res.Data.ChartInfo;
+        //商品价格图
+        this.initCommodityData(res.Data);
+      } else if ([3].includes(this.chartInfo.Source)) {//相关性 滚动相关性
+
+        this.relevanceChartData = {
+          ChartInfo: res.Data.ChartInfo,
+          EdbInfoList: res.Data.EdbInfoList,
+          XEdbIdValue: res.Data.XEdbIdValue,
+          CorrelationChartInfo: res.Data.CorrelationChartInfo,
+          YDataList: [
+            {
+              Value: res.Data.YDataList[0].Value,
+              Color: '#00f',
+              Name: res.Data.YDataList[0].Name || res.Data.ChartInfo.ChartName,
+              NameEn: res.Data.YDataList[0].NameEn || res.Data.ChartInfo.ChartNameEn
+            }
+          ]
+        }
+        //多因子
+        if (res.Data.CorrelationChartInfo.AnalysisMode === 1) {
+          this.relevanceChartData.YDataList = res.Data.YDataList
+        }
+
+        this.initRelevanceChartData()
+        this.tableData = res.Data.EdbInfoList
+      } else if (this.chartInfo.Source === 4) {//滚动相关性换成曲线图绘图
+        this.tableData = res.Data.EdbInfoList
+        this.relevanceChartData = {
+          CorrelationChartInfo: res.Data.CorrelationChartInfo
+        }
+        this.setDefaultChart([res.Data.DataResp]);
+
+      } else if ([6, 7, 8].includes(this.chartInfo.Source)) {//拟合方程 标准差 百分比
+        this.tableData = res.Data.EdbInfoList;
+
+        this.setDefaultChart([res.Data.DataResp]);
+      } else if (this.chartInfo.Source === 9) { //统计频率
+        this.tableData = res.Data.EdbInfoList;
+        this.statisticFrequencyData = res.Data.DataResp;
+        this.setStatisticFrequency();
+      } else if (this.chartInfo.Source === 10) { //跨品种分析
+        this.tableData = res.Data.EdbInfoList;
+        this.crossVarietyChartData = res.Data.DataResp;
+
+        /* 历史数据chartInfo里全是空 兼容下历史数据不崩 */
+        this.chartLimit = {
+          min: res.Data.ChartInfo.LeftMin ? Number(res.Data.ChartInfo.LeftMin) : Number(res.Data.DataResp.YMinValue),
+          max: res.Data.ChartInfo.LeftMax ? Number(res.Data.ChartInfo.LeftMax) : Number(res.Data.DataResp.YMaxValue),
+          x_min: res.Data.ChartInfo.XMin ? Number(res.Data.ChartInfo.XMin) : Number(res.Data.DataResp.XMinValue),
+          x_max: res.Data.ChartInfo.XMax ? Number(res.Data.ChartInfo.XMax) : Number(res.Data.DataResp.XMaxValue),
+        }
+        this.setCrossVarietyChart();
+      }
+    },
+
+    // 利用判断是否进入可视区域 来加载数据 
+    // 如果加载过了就不用再加载了
+    createObserver() {
+      const options = {
+        root: null, // 使用浏览器可视区域为根
+        threshold: 0.1, // 当至少10%的内容进入可视区时触发回调
+      };
+
+      this.observer = new IntersectionObserver(this.handleIntersect, options);
+      this.observer.observe(this.$refs.compRef); // 监听组件
+    },
+    handleIntersect(entries) {
+      if (this.isVisible) return
+      entries.forEach(entry => {
+        // 判断是否在可视范围内
+        if (entry.isIntersecting) {
+          this.isVisible = true;
+          console.log('Component is visible');
+          // 在这里你可以执行其他操作，比如懒加载数据或图片等
+          this.handleGetChartData()
+        }
+      });
+    }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.chart-box{
+.chart-box {
   width: 100%;
   height: 100%;
   padding: 20px;
   box-sizing: border-box;
-  .top-title-box{
+  display: flex;
+  flex-direction: column;
+  .top-title-box {
     display: flex;
     margin-bottom: 10px;
-    .title{
+    .title {
       font-size: 20px;
       font-weight: bold;
       flex: 1;
-      &::before{
-        content:'';
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 1;
+      line-break: anywhere;
+      -webkit-box-orient: vertical;
+      &::before {
+        content: "";
         display: inline-block;
         width: 4px;
         height: 20px;
-        background-color: #0052D9;
+        background-color: #0052d9;
         position: relative;
         top: 2px;
         margin-right: 5px;
       }
     }
-    .opt-box{
+    .opt-box {
       flex-shrink: 0;
       margin-left: 10px;
-      .icon{
+      .icon {
         width: 24px;
         height: 24px;
         margin-left: 5px;
       }
     }
   }
-  .bg{
+  .chart-render-wrap {
     width: 100%;
-    height: 200px;
+    flex: 1;
   }
-
 }
 </style>

src/views/BI_manage/components/CommonClassify.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-dialog
+    title="设置公共看板分类"
+    :visible.sync="show"
+    :center="true"
+    v-dialogDrag
+    custom-class="dialogclass"
+    width="680px"
+    @close="handleClose"
+    append-to-body
+  >
+    <div class="common-classify-wrap">
+      <el-button type="text" icon="el-icon-plus" @click="showEdit=true">添加分类</el-button>
+      <div class="classify-list-box">
+        <div class="item-box" v-for="item in 10" :key="item">
+          <el-input disabled style="flex:1"></el-input>
+          <img class="icon" src="~@/assets/img/icons/edit-blue.png" alt="">
+          <img class="icon" src="~@/assets/img/icons/delete-red.png" alt="">
+        </div>
+      </div>
+    </div>
+    <EditCommonClassify v-model="showEdit"/>
+  </el-dialog>
+</template>
+
+<script>
+import EditCommonClassify from './EditCommonClassify.vue'
+export default {
+  name: "CommonClassify",
+  components:{EditCommonClassify},
+  model: {
+    prop: 'show',
+    event: 'showChange'
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showEdit:false
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('showChange', false)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.common-classify-wrap{
+  .classify-list-box{
+    margin: 20px 0;
+    height: 300px;
+    overflow-y: auto;
+    .item-box{
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      gap: 0 5px;
+      .icon{
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+.dia-bot {
+  display: flex;
+  justify-content: center;
+  margin: 40px 0;
+}
+</style>

src/views/BI_manage/components/EditCommonClassify.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    title="设置公共看板分类"
+    :visible.sync="show"
+    :center="true"
+    v-dialogDrag
+    custom-class="dialogclass"
+    width="680px"
+    @close="handleClose"
+    append-to-body
+  >
+    <div class="edit-common-classify-wrap" style="padding-top: 40px">
+      <el-form
+        :model="formData"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+      >
+        <el-form-item label="分类名称" prop="name">
+          <el-input
+            v-model="formData.name"
+            placeholder="请输入分类名称"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dia-bot">
+        <el-button
+          type="primary"
+          plain
+          @click="handleClose"
+          style="margin-right: 20px"
+          >{{ $t("Dialog.cancel_btn") }}</el-button
+        >
+        <el-button type="primary" @click="saveHandle">{{
+          $t("Dialog.confirm_save_btn")
+        }}</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "EditCommonClassify",
+  model: {
+    prop: 'show',
+    event: 'showChange'
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      rules: { name: [{ required: true, message: '请输入分类名称', trigger: 'blur' },] },
+      formData: { name: "" },
+
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('showChange', false)
+    },
+    saveHandle() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dia-bot {
+  display: flex;
+  justify-content: center;
+  margin: 60px 0 40px 0;
+}
+</style>

src/views/BI_manage/components/SelectChart.vue

@@ -26,18 +26,18 @@
         <div style="margin-top: 10px">
           <el-radio-group v-model="chart_source" @change="searchHandle" style="margin-right:15px;">
 						<el-radio :label="1"><!-- ETA图库 -->{{$t('Chart.AllChartSource.eta_chart')}}</el-radio>
-						<el-radio :label="2"><!-- 商品价格曲线 -->{{$t('Chart.AllChartSource.commodity_chart')}}</el-radio>
 						<el-radio :label="3"><!-- 相关性图表 -->{{$t('Chart.AllChartSource.correla_chart')}}</el-radio>
 						<el-radio :label="6"><!-- 拟合方程曲线 -->{{$t('Chart.AllChartSource.equation_chart')}}</el-radio>
 						<el-radio :label="7"><!-- 统计特征 -->{{$t('Chart.AllChartSource.statis_chart')}}</el-radio>
 						<el-radio :label="10"><!-- 跨品种分析 -->{{$t('Chart.AllChartSource.cross_chart')}}</el-radio>
+            <el-radio :label="12">区间分析</el-radio>
 					</el-radio-group>
           <el-checkbox v-model="isShowMe"  @change="searchHandle"><!-- 只看我的 -->{{$t('MyEtaPage.label_see_mine')}}</el-checkbox>
         </div>
       </div>
       <div class="choose-dialog-min">
+        <el-checkbox-group v-model="checkList" v-if="haveData">
         <div
-          v-if="haveData"
           class="chart-public-list"
           style="margin-bottom: 20px;padding-right: 20px;"
           :infinite-scroll-disabled="!haveMove"
@@ -52,25 +52,19 @@
           >
             <el-card shadow class="public-chart-item">
               <div slot="header" class="item-top">
-                <span class="text_oneLine">{{ $parent.chart_lang==='en' ? (chart.ChartNameEn||chart.ChartName) : chart.ChartName }}</span>
+                <span class="text_oneLine">{{chart.ChartName}}</span>
+                <el-checkbox :disabled="chart_source===1&&!chart.HaveOperaAuth" :label="chart.ChartInfoId"
+                    ><span>&nbsp;</span></el-checkbox
+                  >
               </div>
               <img :src="(chart_source===1&&!chart.HaveOperaAuth) ? $icons.lock_big : chart.ChartImage" alt="" class="chart-img" />
               <div class="item-bottom">
-                <span class="last-time"><!-- 最近更新 -->{{$t('MyEtaPage.label_update_time')}}：{{ chart.ModifyTime.substr(0,10) }}</span>
-                <span class="join_txt" @click="addMychartHandle(chart)" 
-                v-if="(chart.HaveOperaAuth&&chart_source===1)||chart_source!==1">
-                  <img
-                    :src="$icons.chart_join_ico"
-                    alt=""
-                    style="width: 13px; height: 12px; vertical-align: middle"
-                  />
-                  <!-- 加入我的图库 -->{{$t('Chart.chart_addmy_btn')}}
-                </span>
-                <!-- <span style="color: #3BB737;" v-else>已加入</span> -->
+                <span class="last-time">创建时间：{{ chart.CreateTime.substr(0,10) }}</span>
               </div>
             </el-card>
           </el-col>
         </div>
+        </el-checkbox-group>
         <div v-else class="nodata">
           <tableNoData :text="$t('Common.no_chart_msg')"/>
         </div>
@@ -96,6 +90,7 @@ import { mychartInterface } from '@/api/api.js';
 import chartRelevanceApi from '@/api/modules/chartRelevanceApi';
 import { fittingEquationInterface,statisticFeatureInterface,crossVarietyInterface } from '@/api/modules/chartRelevanceApi';
 import futuresInterface from '@/api/modules/futuresBaseApi';
+import apiIntervalAnalysis from '@/api/modules/intervalAnalysis'
 export default {
   model: {
     prop: 'show',
@@ -122,10 +117,16 @@ export default {
       chartPublicList: [],
 
       chart_source:1,
-      isShowMe: false
+      isShowMe: false,
+      checkList:[]
     };
   },
   methods: {
+    saveHandle(){
+      const arr=this.chartPublicList.filter(item=>this.checkList.includes(item.ChartInfoId))
+      this.$emit('addChart', arr)
+    },
+
     /* 获取图库列表 */
     async getPublicChartList() {
       let params = {
@@ -138,11 +139,11 @@ export default {
 
        const apiMap = {
         1: mychartInterface.publicList,
-        2: futuresInterface.searchChart,
         3: chartRelevanceApi.getChartList,
         6: fittingEquationInterface.getChartList,
         7: statisticFeatureInterface.getChartList,
         10: crossVarietyInterface.searchChart,
+        12: apiIntervalAnalysis.chartSearch
       }
       let res = await apiMap[this.chart_source](params)
 
@@ -158,11 +159,6 @@ export default {
       
     },
 
-    addSuccess(params) {
-      this.isAddMyChart = false;
-      this.isHaveAdd = true;
-    },
-
     loadMove() {
       this.page_no++;
       this.getPublicChartList();
@@ -176,6 +172,7 @@ export default {
 
     init() {
       this.page_no = 1;
+      this.checkList=[]
       if(this.$refs.scrollCont) this.$refs.scrollCont.scrollTop = 0;
       this.search_txt = '';
     },

src/views/BI_manage/components/SetShare.vue

@@ -7,7 +7,7 @@
     :center="true"
     v-dialogDrag
     custom-class="dialogclass"
-    width="68 0px"
+    width="680px"
     @close="handleClose"
   >
     <div class="BI-share-wrap">

src/views/BI_manage/components/TableBox.vue

@@ -1,63 +1,115 @@
 <template>
-  <div class="table-box" v-if="compData">
+  <div class="table-box" v-if="compData" ref="compRef" v-loading="loading">
     <div class="top-title-box">
-      <div class="title">{{compData.ExcelName}}</div>
+      <div class="title">{{ compData.ExcelName }}</div>
       <div class="opt-box">
-        <img class="icon" src="~@/assets/img/icons/refresh_blue_new.png" alt="">
+        <img
+          class="icon"
+          src="~@/assets/img/icons/refresh_blue_new.png"
+          alt=""
+        />
         <slot name="drag"></slot>
-        <img class="icon" src="~@/assets/img/icons/delete-red.png" alt="">
+        <slot name="delete"></slot>
       </div>
     </div>
-    <img class="bg" :src="compData.ExcelImage" alt="">
+    <img class="bg" :src="compData.ExcelImage" alt="" />
   </div>
 </template>
 
 <script>
 export default {
-  props:{
-    compData:null
-  }
+  props: {
+    compData: null
+  },
+  data() {
+    return {
+      loading: true,
+      observer:null,
+      isVisible: false, // 是否可见
+    }
+  },
+  mounted() {
+    console.log('表格组件挂载', this.compData.ExcelInfoId);
+    this.createObserver();
+  },
+  beforeUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  methods: {
+    // 获取表格数据
+    handleGetTableData(){
+      setTimeout(() => {
+        console.log('表格组件加载结束', this.compData.ExcelInfoId);
+        this.loading=false
+      }, 2000);
+    },
+
+    // 利用判断是否进入可视区域 来加载数据 
+    // 如果加载过了就不用再加载了
+    createObserver() {
+      const options = {
+        root: null, // 使用浏览器可视区域为根
+        threshold: 0.1, // 当至少10%的内容进入可视区时触发回调
+      };
+
+      this.observer = new IntersectionObserver(this.handleIntersect, options);
+      this.observer.observe(this.$refs.compRef); // 监听组件
+    },
+    handleIntersect(entries) {
+      if(this.isVisible) return 
+      entries.forEach(entry => {
+        // 判断是否在可视范围内
+        if (entry.isIntersecting) {
+          this.isVisible = true;
+          console.log('Component is visible');
+          // 在这里你可以执行其他操作，比如懒加载数据或图片等
+          this.handleGetTableData()
+        }
+      });
+    }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.table-box{
+.table-box {
   width: 100%;
   height: 100%;
   padding: 20px;
   box-sizing: border-box;
-  .top-title-box{
+  .top-title-box {
     display: flex;
     margin-bottom: 10px;
-    .title{
+    .title {
       font-size: 20px;
       font-weight: bold;
       flex: 1;
-      &::before{
-        content:'';
+      &::before {
+        content: "";
         display: inline-block;
         width: 4px;
         height: 20px;
-        background-color: #0052D9;
+        background-color: #0052d9;
         position: relative;
         top: 2px;
         margin-right: 5px;
       }
     }
-    .opt-box{
+    .opt-box {
       flex-shrink: 0;
       margin-left: 10px;
-      .icon{
+      .icon {
         width: 24px;
         height: 24px;
         margin-left: 5px;
       }
     }
   }
-  .bg{
+  .bg {
     width: 100%;
     height: 200px;
   }
-
 }
 </style>

src/views/BI_manage/editBoard.vue

@@ -1,21 +1,35 @@
 <template>
   <div class="edit-BI-board-page">
     <div class="top-box">
-      <el-input placeholder="请输入看板名称" v-model="name" style="width:300px;margin-right:20px"></el-input>
-      <el-button type="primary" plain @click="showSelectTable=true">添加表格</el-button>
-      <el-button type="primary" plain @click="showSelectChart=true">添加图表</el-button>
+      <el-input
+        placeholder="请输入看板名称"
+        v-model="name"
+        style="width: 300px; margin-right: 20px"
+      ></el-input>
+      <el-button type="primary" plain @click="showSelectTable = true"
+        >添加表格</el-button
+      >
+      <el-button type="primary" plain @click="showSelectChart = true"
+        >添加图表</el-button
+      >
       <div class="right-btns">
         <el-button type="primary" plain @click="$router.back()">取消</el-button>
-        <el-button type="primary">保存</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
       </div>
     </div>
     <!-- 看板内容模块 -->
-    <BIBoardContent :dataList="boardData" @sortChange="handleSortChange" />
+    <BIBoardContent v-model="boardData" />
 
     <!-- 选择图表 -->
-    <SelectChart v-model="showSelectChart" @addChart="handleAddChart"/>
+    <SelectChart
+      v-model="showSelectChart"
+      @addChart="handleAddComp('chart', $event)"
+    />
     <!-- 选择表格 -->
-    <SelectTable v-model="showSelectTable" @addTable="handleAddTable"/>
+    <SelectTable
+      v-model="showSelectTable"
+      @addTable="handleAddComp('table', $event)"
+    />
   </div>
 </template>
 
@@ -23,60 +37,74 @@
 import BIBoardContent from './components/BoardContent.vue'
 import SelectChart from './components/SelectChart.vue'
 import SelectTable from './components/SelectTable.vue'
+const MAX_COUNT = 50
+// 生成唯一ID 
+function createUniqueIdGenerator() {
+  let id = 0;
+  return function generateUniqueId() {
+    id += 1;
+    return `selfId_${id}`;
+  };
+}
+
 export default {
-  components:{
+  components: {
     BIBoardContent,
     SelectChart,
     SelectTable
   },
   data() {
     return {
-      name:'',
-      boardData:[],
+      name: '',
+      boardData: [],
 
-      showSelectChart:false,
-      showSelectTable:false
+      showSelectChart: false,
+      showSelectTable: false
     }
   },
   methods: {
-    handleSortChange(arr){
-      // 因为分页加载的 可能arr比 boardData短
-      if(arr.length<this.boardData.length){
-        const temArr=this.boardData.slice(this.arr.length)
-        this.boardData=[...arr,...temArr]
-      }else{
-        this.boardData=arr
+    handleSave() {
+      if (!this.name) {
+        this.$message.warning('请填写看板名称')
+        return
       }
-      
-    },
-    handleAddChart(e){
-  
+      if (this.boardData.length === 0) {
+        this.$message.warning('请至少选择一个图表或表格！')
+        return
+      }
+
     },
-    handleAddTable(e){
-      const arr=e||[]
+
+    handleAddComp(type, data) {
+      const arr = data || []
+      if (this.boardData.length + arr.length > MAX_COUNT) {
+        this.$message.warning('添加已达上限（上限50）！')
+        return
+      }
       arr.forEach(item => {
-        const obj={
-          type:2,
+        const obj = {
+          type: type === 'chart' ? 1 : 2,
           ...item
         }
         this.boardData.push(obj)
       });
-      
-      this.showSelectTable=false
-    }
+
+      this.showSelectChart = false
+      this.showSelectTable = false
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.edit-BI-board-page{
+.edit-BI-board-page {
   $border-color: #c8cdd9;
   background-color: #fff;
   border: 1px solid $border-color;
-  .top-box{
+  .top-box {
     padding: 14px 20px;
     border-bottom: 1px solid $border-color;
-    .right-btns{
+    .right-btns {
       float: right;
     }
   }

src/views/BI_manage/index.vue

@@ -28,11 +28,15 @@
       <div class="right-btn-box" v-if="navType === 1">
         <el-button type="primary" @click="$router.push('/editBIBoard')">添加看板</el-button>
       </div>
+      <!-- 设置公共看板分类 -->
+      <div class="right-btn-box" v-if="navType === 3">
+        <el-button type="primary" @click="showCommonClassify=true">设置公共看板分类</el-button>
+      </div>
     </div>
     <div class="opt-box">
       <el-cascader clearable></el-cascader>
       <div class="right-opt-box">
-        <el-button type="text" @click="showSetCommon = true"
+        <el-button v-if="navType===1" type="text" @click="showSetCommon = true"
           >设置公共</el-button
         >
         <el-button type="text" @click="showSetShare = true">设置共享</el-button>
@@ -41,111 +45,32 @@
       </div>
     </div>
     <!-- 看板内容模块 -->
-    <BIBoardContent :dataList="boardData" />
+    <BIBoardContent v-model="boardData" />
 
     <!-- 设置共享 -->
     <set-share v-model="showSetShare" />
     <!-- 设置公共 -->
     <SetCommon v-model="showSetCommon" />
+    <!-- 公共看板分类 -->
+    <CommonClassify v-model="showCommonClassify"/>
   </div>
 </template>
 
 <script>
 import BIBoardContent from './components/BoardContent.vue'
+import CommonClassify from './components/CommonClassify.vue'
 import SetCommon from './components/SetCommon.vue'
 import SetShare from './components/SetShare.vue'
 
 export default {
-  components: { BIBoardContent, SetShare, SetCommon },
+  components: { BIBoardContent, SetShare, SetCommon,CommonClassify },
   data() {
     return {
       navType: 1,// 
 
       showSetShare: false,
       showSetCommon: false,
-
-      boardData: [
-        {
-          type: 1,
-          UniqueCode: 1
-        },
-        {
-          type: 2,
-          UniqueCode: 2
-        },
-        {
-          type: 2,
-          UniqueCode: 3
-        },
-        {
-          type: 1,
-          UniqueCode: 4
-        },
-        {
-          type: 1,
-          UniqueCode: 5
-        },
-        {
-          type: 2,
-          UniqueCode: 6
-        },
-        {
-          type: 1,
-          UniqueCode: 7
-        },
-        {
-          type: 2,
-          UniqueCode: 8
-        },
-        {
-          type: 2,
-          UniqueCode: 9
-        },
-        {
-          type: 1,
-          UniqueCode: 10
-        },
-        {
-          type: 2,
-          UniqueCode: 11
-        },
-        {
-          type: 1,
-          UniqueCode: 12
-        },
-        {
-          type: 2,
-          UniqueCode: 13
-        },
-        {
-          type: 1,
-          UniqueCode: 14
-        },
-        {
-          type: 2,
-          UniqueCode: 15
-        },
-        {
-          type: 1,
-          UniqueCode: 16
-        },
-        {
-          type: 1,
-          UniqueCode: 17
-        },
-        {
-          type: 2,
-          UniqueCode: 18
-        },
-        {
-          type: 1,
-          UniqueCode: 19
-        },
-        {
-          type: 2,
-          UniqueCode: 20
-        }
-      ]
+      showCommonClassify:false,
     }
   },
   methods: {