自有数据页面

src/routes/modules/dataRoutes.js

@@ -245,6 +245,12 @@ export default [
         name: "煤炭江湖",
         hidden: false
       },
+      {
+        path: 'selfData',
+        component: () => import("@/views/dataEntry_manage/thirdBase/selfDataBase.vue"),
+        name: "自有数据",
+        hidden: false
+      }
     ],
   },
 ];

src/views/dataEntry_manage/thirdBase/components/addToBaseDia.vue

@@ -0,0 +1,160 @@
+<template>
+  <!-- 添加到指标库弹窗 -->
+  <el-dialog
+    :title="$t('YsDataPage.add_base_btn')"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+    @close="cancelHandle"
+    width="1000px"
+    top="5vh"
+    v-dialogDrag
+    center
+  >
+    <div class="add-dialog-wrap">
+       <el-table 
+          :data="tableData" 
+          border 
+          height="500px"
+        >
+          <el-table-column label="指标ID" align="center" prop="EdbCode"/>
+          <el-table-column label="指标名称" align="center">
+              <template slot-scope="scope">
+                  <el-input v-model="scope.row.name" placeholder="请填写指标名称" style="width:100%"/>
+              </template>
+          </el-table-column>
+          <el-table-column label="单位" align="center" width="200px">
+              <template slot-scope="scope">
+                  <selectUnit v-model="scope.row.unit"/>
+              </template>
+          </el-table-column>
+          <el-table-column label="频度" align="center" width="200px">
+            <template slot-scope="scope">
+              <el-select
+                v-model="scope.row.frequency"
+                placeholder="请选择频率"
+                @change="handleFrequencyChange(scope)"
+              >
+                <el-option
+                  v-for="item in frequencyArr"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" width="300px">
+              <template slot="header" slot-scope="scope">
+                  <span style="margin-right:40px;display:inline-block">目录</span>
+                  <el-radio-group 
+                    v-model="classifyType"
+                    @change="handleClassifyTypeChange"
+                  >
+                      <el-radio :label="0">分目录</el-radio>
+                      <el-radio :label="1">同目录</el-radio>
+                  </el-radio-group>
+              </template>
+              <template slot-scope="{row,$index}">
+                  <el-cascader
+                    v-model="row.classify"
+                    :options="classifyOpt"
+                    :props="levelProps"
+                    placeholder="请选择指标目录"
+                    :disabled="(classifyType===1&&$index>0)"
+                    @change="handleClassifyChange(row,$index)"
+                  />
+              </template>
+          </el-table-column>
+      </el-table>
+    </div>
+    <div style="text-align: center; margin: 30px 0">
+      <el-button @click="cancelHandle">{{
+        $t("Dialog.cancel_btn")
+      }}</el-button>
+      <el-button
+        type="primary"
+        @click="handleSave"
+        :loading="btnLoading"
+        >{{ $t("Dialog.confirm_save_btn") }}</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { dataBaseInterface } from '@/api/api.js';
+export default {
+  props: {
+    isShow: {
+      type: Boolean
+    },
+    type: {
+      type: String
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      tableData:[],
+
+      classifyType:0,
+      classifyOpt: [],
+
+      levelProps: {
+				label: 'ClassifyName',
+				value: 'ClassifyId',
+				children: 'Children',
+				checkStrictly: true,
+        emitPath:false
+			},
+    };
+  },
+  watch: {
+    isShow(nval) {
+      if(!nval) return
+
+      this.getClassifyOpt()
+      
+      if(type==='single') {
+
+      }
+    }
+  },
+  methods: {
+
+    filterNodes(arr) {
+			arr.length &&
+				arr.forEach((item) => {
+					item.Children.length && this.filterNodes(item.Children);
+					if (!item.Children.length) {
+						delete item.Children;
+					}
+				});
+		},
+    // 获取指标分类
+    async getClassifyOpt(){
+      const res=await dataBaseInterface.menuListV3()
+      if (res.Ret !== 200) return
+      this.filterNodes(res.Data.AllNodes||[]);
+			this.classifyOpt = res.Data.AllNodes || [];
+    },
+
+    cancelHandle() {
+      this.$emit('update:isShow',false)
+    },
+
+    handleClassifyTypeChange() {
+
+    },
+
+    handleSave() {
+
+    }
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/views/dataEntry_manage/thirdBase/components/lookEdbDataDia.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-dialog
+    :visible.sync="isShow"
+		:close-on-click-modal="false"
+		:modal-append-to-body='false'
+    title="查看数据"
+		@close="cancelHandle"
+		custom-class="look-edb-data-dialog"
+		center
+		width="1200px"
+		v-dialogDrag
+  >
+
+    <div class="main">
+      <el-table
+        :data="tableData"
+        style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);"
+        border
+      >
+        <el-table-column
+          v-for="item in tableColums"
+          :key="item.label"
+          :label="item.label"
+          :width="item.widthsty"
+          :min-width="item.minwidthsty"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row[item.key] }}</span>
+          </template>
+        </el-table-column>
+        <div slot="empty">
+            <tableNoData text="暂无数据" size="mini"/>
+        </div>
+      </el-table>
+
+      <ul 
+        class="value-ul" 
+        ref="valueUl" 
+        @scroll="scrollHandle" 
+        v-show="dataList.length"
+      >
+        <li
+          class="value-item"
+          v-for="item in dataList"
+          :key="item.EdbDataId"
+        >
+          <span class="value-label">
+            <span style="position: relative;">
+              <i class="new-tag" v-if="tableData[0].LatestDate===item.DataTime"></i>
+              {{item.DataTime}}
+            </span>
+          </span>
+          <span :class="'value-label'" style="min-width:200px;text-align:center;">
+            <span :class="['value-style',{'predict-act': tableData[0].DataInsertConfig.Date===item.DataTime}]">{{item.Value}}</span>
+          </span>
+        </li>
+        <li class="nodata value-item" v-if="!dataList.length">{{$t('Table.prompt_slogan')}}</li>
+      </ul>
+    </div>
+
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    isShow: {
+      type: Boolean
+    }
+  },
+  computed: {
+    tableColums() {
+      return [
+         {
+            label: this.$t('Edb.Detail.e_id'),
+            key: 'EdbCode',
+            widthsty: '120px',
+          },
+         {
+            label: this.$t('Edb.Detail.e_name'),
+            key: 'EdbName',
+            minwidthsty: '150px',
+          },
+           {
+            label: '指标开始时间',
+            key: 'StartDate',
+            sortable:true,
+            minwidthsty: '100px',
+          },
+          {
+            label: '指标最新时间',
+            key: 'LatestDate',
+            sortable:true,
+            minwidthsty: '90px',
+          },
+      ]
+    }
+  },
+  data() {
+    return {
+      dataList: []
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+    cancelHandle() {
+      this.$emit('update:isShow',false)
+    },
+
+    scrollHandle() {
+      
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+.look-edb-data-dialog{
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	.main {
+    padding: 20px 0;
+  }
+	.value-ul{
+    overflow-y: auto;
+	}
+}
+</style>

src/views/dataEntry_manage/thirdBase/selfDataBase.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="selfData-page">
+    <div class="header">
+      <div class="left">
+        <el-select
+          v-model="filterObj.source"
+          @change="filterChange"
+          placeholder="请选择渠道"
+          clearable
+        >
+          <el-option v-for="item in sourceOptions" :key="item" :label="$t('SystemManage.OperateAuth.set_assets_tab')" :value="1"/>
+        </el-select>
+
+        <el-select
+          v-model="filterObj.frequency"
+          @change="filterChange"
+          :placeholder="$t('Edb.InputHolderAll.input_fre')"
+          clearable
+        >
+          <el-option v-for="item in frequencyOptions" :key="item" :label="$t('SystemManage.OperateAuth.set_assets_tab')" :value="1"/>
+        </el-select>
+
+        <el-input 
+          v-model="filterObj.keyWord" 
+          :placeholder="$t('Edb.InputHolderAll.input_name_orid')"
+          style="width: 250px;"
+          @change="filterChange"
+          clearable
+          >
+          <i slot="prefix" class="el-input__icon el-icon-search"/>
+        </el-input>
+
+        <el-checkbox 
+            v-model="filterObj.checkAll"
+            :indeterminate="filterObj.checkSome"
+            :disabled="tableData.length===0"
+            style="margin-left:20px" 
+            @change="listCheckAllChange"
+          ><!-- 列表全选 -->{{$t('SystemManage.OperateAuth.all_select')}}</el-checkbox>
+      </div>
+
+      <el-button type="primary" @click="addToBaseHandle"><!-- 添加到指标库 -->{{$t('YsDataPage.add_base_btn')}}</el-button>
+    </div>
+
+    <div class="main">
+      <el-table
+        :data="tableData"
+        ref="table"
+        element-loading-text="加载中..."
+        v-loading="tableLoading"
+        border
+        style="margin:20px 0"
+        @selection-change="selectionChange"
+        @select="selectHandle" 
+        @select-all="selectAllPageHandle"
+        @sort-change="handleSortChange"
+      >
+          <el-table-column
+            type="selection"
+            width="55"
+          />
+          <el-table-column
+            v-for="item in tableColums"
+            :key="item.label"
+            :label="item.label"
+            :prop="item.key"
+            :width="item.widthsty"
+            :min-width="item.minwidthsty"
+            :sortable="item.sortable?true:false"
+            align="center"
+          >
+            <template slot-scope="{row}">
+              <template v-if="item.key==='handle'">
+                <span 
+                  class="editsty"
+                  @click="lookDataHandle"
+                >
+                  <!-- 查看数据 -->{{$t('Edb.detail_lookdata_btn')}}
+                </span>
+
+                <span 
+                  class="editsty" 
+                  @click="addToBaseHandle('single')"
+                >
+                  <!-- 添加到指标库 -->{{$t('YsDataPage.add_base_btn')}}
+                </span>
+              </template>
+
+              <span v-else>{{ row[item.key] }}</span>
+            </template>
+          </el-table-column>
+          
+          <div slot="empty" style="padding: 100px 0">
+            <tableNoData :text="$t('Table.prompt_slogan')" size="mini"/>
+          </div>
+      </el-table>
+
+      <div style="height:35px;margin: 20px 0;">
+        <m-page
+          :page_no="page_no"
+          :pageSize="pageSize"
+          :total="total"
+          @handleCurrentChange="pageChange"
+        />
+      </div>
+    </div>
+
+    <!-- 查看数据弹窗 -->
+    <lookEdbDataDia
+      :isShow.sync="isLookDataDia"
+    />
+
+    <!-- 加入指标库弹窗 -->
+    <addToBaseDia
+      :isShow.sync="isAddToBaseDia"
+      :list="addToBaseList"
+    />
+  </div>
+</template>
+<script>
+import mPage from '@/components/mPage.vue';
+import lookEdbDataDia from './components/lookEdbDataDia.vue';
+import addToBaseDia from './components/addToBaseDia.vue';
+export default {
+  components: { mPage,lookEdbDataDia,addToBaseDia },
+  computed: {
+     tableColums() {
+        return [
+          {
+            label: this.$t('Edb.Detail.e_id'),
+            key: 'EdbCode',
+            widthsty: '120px',
+          },
+         {
+            label: this.$t('Edb.Detail.e_name'),
+            key: 'EdbName',
+            minwidthsty: '150px',
+          },
+          {
+            label: this.$t('Edb.Detail.e_fre'),
+            key: 'Frequency',
+            minwidthsty: '60px',
+          },
+          {
+            label: this.$t('Edb.Detail.e_unit'),
+            key: 'Unit',
+            minwidthsty: '50px',
+          },
+          {
+            label: '渠道',
+            key: 'Source',
+            minwidthsty: '50px',
+          },
+          {
+            label: '指标开始时间',
+            key: 'StartDate',
+            sortable:true,
+            minwidthsty: '100px',
+          },
+          {
+            label: '指标最新时间',
+            key: 'LatestDate',
+            sortable:true,
+            minwidthsty: '90px',
+          },
+          {
+            label: '入库时间',
+            sortable:true,
+            key: 'CreateTime'
+          },
+          {
+            label: this.$t('Table.column_operations'),
+            key: 'handle'
+          },
+
+        ]
+    },
+  },
+  data() {
+    return {
+      tableLoading: false,
+      total: 0,
+      
+      tableData: [
+        { EdbCode: 'w102256',EdbName:'1dqwd',Frequency:'日度',Unit:'无',Source:'',StartDate:'',LatestDate:'',CreateTime:'' },
+        { EdbCode: 'w102256',EdbName:'1dqwd',Frequency:'日度',Unit:'无',Source:'',StartDate:'',LatestDate:'',CreateTime:'' },
+        { EdbCode: 'w102256',EdbName:'1dqwd',Frequency:'日度',Unit:'无',Source:'',StartDate:'',LatestDate:'',CreateTime:'' },
+        { EdbCode: 'w102256',EdbName:'1dqwd',Frequency:'日度',Unit:'无',Source:'',StartDate:'',LatestDate:'',CreateTime:'' },
+      ],
+
+      sourceOptions: [],
+      frequencyOptions: [],
+
+      isSelectAll: false, //真正意义上的全选或不全选
+      checkedList: [], //不全选勾选中的 或 全选取消勾的
+      selectionReactCancel:false,//手动设置选中中
+
+      filterObj: {
+        page_no: 1,
+        pageSize: 10,
+        source: '',
+        frequency: '',
+        keyWord: '',
+        sortParam:'',
+        sortType:'',
+        checkAll: true, //控制全选显示状态
+        checkSome: false
+      },
+
+      /* 查看数据弹窗 */
+      isLookDataDia: false,
+
+      /* 加入指标库弹窗 */
+      isAddToBaseDia: false,
+      addToType: 'multiple',
+      addToBaseList: []
+
+    }
+  },
+  mounted(){
+  },
+  methods:{
+
+    getTableData() {
+      this.tableLoading = true;
+      // let params = {
+      //   Source: this.default_tab,
+      //   UserId: this.searchForm.user || 0,
+      //   CurrentIndex: this.page_no,
+      //   PageSize: this.pageSize,
+      //   Keyword: this.searchForm.key_word,
+      //   Classify,
+      //   SubSource: this.default_tab === 6 ? Number(this.default_sub_tab) : 0
+      // }
+			// operateAuthInterface.list(params).then(res => {
+      //   this.tableLoading = false;
+      //   if( res.Ret!==200 )return
+
+      //   const { Data } = res;
+
+      //   this.tableData = Data.List || [];
+      //   this.total = Data.Paging.Totals;
+        
+      //   if(type==='pageChange'){
+      //     //页码变化 选中项不做清空
+      //     this.checkedSomeSelection()
+      //   }else {
+      //     this.listCheckAllChange(true)
+
+      //   }
+			// });
+    },
+
+    /* 设置当页数据勾选状态 */
+    checkedSomeSelection() {
+      this.selectionReactCancel=true
+
+      if(!this.isSelectAll){
+          this.checkedList.map(_ =>{
+              let row = this.tableData.find(item => item.DataId==_.DataId)
+              if(row){ //设置部分选中
+                  setTimeout(()=>{
+                      this.$refs.table.toggleRowSelection(row,true)
+                  },20)
+              }
+          })
+      }else{
+          this.$refs.table &&this.$refs.table.toggleAllSelection()
+          this.checkedList.map(_ =>{
+              let row = this.tableData.find(item => item.DataId==_.DataId)
+              if(row){ //设置部分不勾选
+                  setTimeout(()=>{
+                      this.$refs.table.toggleRowSelection(row,false)
+                  },20)
+              }
+          })
+      }
+      setTimeout(()=>{
+          this.selectionReactCancel=false
+      },30)
+    },
+
+    //列表全选或全不选
+    listCheckAllChange(value){
+      this.checkedList = []
+      this.isSelectAll = value
+    
+      value 
+        ? (this.$refs.table && this.$refs.table.toggleAllSelection()) 
+        : (this.$refs.table && this.$refs.table.clearSelection())
+    },
+
+    selectionChange() {
+      if(this.selectionReactCancel) return
+
+        //设置全选框状态 选中 半选 不选
+        setTimeout(()=>{
+            let filterChecked = Array.from(new Set(this.checkedList))
+            //全选
+            if(
+              (filterChecked.length===this.total&&this.total>0 && (!this.isSelectAll))
+                || (filterChecked.length === 0 && this.isSelectAll)
+            ){
+                this.filterObj.checkAll = true
+                this.filterObj.checkSome = false
+            //不选
+            }else if(
+              (filterChecked.length === 0 && (!this.isSelectAll))
+              || (filterChecked.length === this.total && this.isSelectAll)
+            ){
+                this.filterObj.checkAll = false
+                this.filterObj.checkSome = false
+            //半选
+            }else{
+                this.filterObj.checkAll = false
+                this.filterObj.checkSome=true
+            }
+        },1)
+    },
+
+    //单选
+    selectHandle(selection,row){ //当前选中的项是进选中还是取消选中中
+        if(this.selectionReactCancel) return 
+
+        //当前项是选中还是取消选
+        let haveChecked = selection.some(_ => _.DataId === row.DataId);
+
+        //全选取消选和不全选选中才有意义
+        if((haveChecked&&!this.isSelectAll) || (!haveChecked&&this.isSelectAll)) {
+          this.checkedList.push(row)
+        }else {
+          this.checkedList=this.checkedList.filter(_ => _.DataId!==row.DataId)
+        }
+    },
+
+    //整列选
+    selectAllPageHandle(selection){
+        if(this.selectionReactCancel) return 
+        
+        //当前页是选中还是取消
+        let haveChecked = selection && selection.length>0;
+
+        //全选取消选和不全选选中才有意义
+        if((haveChecked&&!this.isSelectAll) || (!haveChecked&&this.isSelectAll)) {
+          this.checkedList = [...this.checkedList,...this.tableData]
+        }else {
+
+          let pageIds = this.tableData.map(_ => _.DataId);
+          this.checkedList = this.checkedList.filter(_ => !pageIds.includes(_.DataId))
+        }
+    },
+
+    handleSortChange({prop,order}) {
+      const propMap={
+          'StartDate':1,
+          'EndDate':2,
+          'ModifyTime':3
+      }
+      this.filterObj.sortParam = order?propMap[prop]||'':''
+      this.filterObj.sortType = order?order==='ascending'?1:2:''
+
+      this.filterChange()
+    },
+
+    // 页码改变
+    pageChange(page) {
+      this.filterObj.page_no = page;
+      this.getTableData('pageChange')
+    },
+
+    filterChange() {
+      this.filterObj.page_no = 1
+      this.getTableData('optionChange')
+    },
+
+    /* 查看数据 */
+    lookDataHandle() {
+      this.isLookDataDia =  true
+    },
+
+    /* 添加到指标库 */
+    addToBaseHandle(type='multiple') {
+      if(type==='multiple' && !this.checkedList.length && !this.isSelectAll) return this.$message.warning('请选择指标')
+      
+      this.addToType = type;
+      this.isAddToBaseDia = true
+    }
+
+  },
+}
+</script>
+<style scoped lang='scss'>
+.selfData-page {
+    min-height: calc(100vh - 120px);
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    border: 1px solid #c8cdd9;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, .05);
+    padding: 20px;
+    box-sizing: border-box;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+}
+</style>