ETA1.6.1 ICPC数据-暂存+1

src/views/dataEntry_manage/css/coalCommon.scss

@@ -0,0 +1,96 @@
+// 煤炭江湖页面的同款样式
+
+.coal-similarity-container {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  .slide-btn-icon{
+        &.slide-left{
+            left:225px;
+        }
+        &.slide-right{
+            left: 0;
+        }
+    }
+  .minHeight {
+    height: calc(100vh - 120px);
+    background-color: #fff;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+  div::-webkit-scrollbar {
+    width: 5px !important;
+  }
+  .left-cont {
+    min-width: 240px;
+    width:240px;
+    margin-right: 20px;
+    padding: 30px 0;
+    overflow: hidden;
+    .left-top {
+      padding: 0 20px;
+    }
+    .classify-list {
+      padding: 0 20px;
+      margin-top: 20px;
+      height: calc(100vh - 280px);
+      overflow-y: auto;
+      .classify-item {
+        font-size: 14px;
+        color: #666;
+        margin-bottom: 20px;
+        &:hover {
+          cursor: pointer;
+          color: #409eff;
+        }
+        &.act {
+          color: #409eff;
+        }
+      }
+    }
+  }
+  .right-cont {
+    flex:1;
+    padding: 30px;
+    overflow-x: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .right-box {
+      max-width: 100%;
+      flex-grow: 1;
+      min-height: 600px;
+      // border-right: 1px solid #dcdfe6;
+      box-sizing: border-box;
+      overflow: auto;
+      .data-header {
+        width: 100%;
+        position: sticky;
+        top: 0;
+        z-index: 2;
+      }
+      .data-cont {
+        height: calc(100vh - 444px);
+      }
+      .nodata {
+        width: 100%;
+        font-size: 16px;
+        color: #999;
+        padding-top: 100px;
+      }
+    }
+    .frequency-list {
+      margin-top: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      gap:20px;
+      .el-button{
+            margin-left: 0 !important;
+        }
+      .frequency-btn {
+        width: 112px;
+      }
+    }
+  }
+}

src/views/dataEntry_manage/thirdBase/icpcConsumption.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lzTarget-container">
+  <div class="icpc-container coal-similarity-container">
     <span
         class="slide-btn-icon"
         :class="{'slide-left':isLeftWrapShow,'slide-right':!isLeftWrapShow}"
@@ -10,7 +10,7 @@
     <div class="left-cont minHeight" v-show="isLeftWrapShow">
       <div class="left-top">
         <el-button
-          style="width: 100%;margin-bottom: 10px;"
+          style="width: 100%;"
           type="primary"
           plain
           size="medium"
@@ -57,23 +57,25 @@
       element-loading-text="获取数据中..."
     >
       <div class="right-box" v-if="rightShow">
-        <div class="data-header">
-          <lz-table
-            :tableOption="tableOption"
-            tableType="header"
-            ref="table"
-            source="lz"
-          />
-        </div>
-        <div class="data-cont" v-if="dateArr.length">
-          <lz-table
-            :tableOption="tableOption"
-            tableType="data"
-            :dateArr="dateArr"
-            source="lz"
-          />
-        </div>
-        <div v-else class="nodata"></div>
+        <template v-if="dateArr.length">
+          <div class="data-header">
+            <lz-table
+              :tableOption="tableOption"
+              tableType="header"
+              ref="table"
+              source="lz"
+            />
+          </div>
+          <div class="data-cont">
+            <lz-table
+              :tableOption="tableOption"
+              tableType="data"
+              :dateArr="dateArr"
+              source="lz"
+            />
+          </div>
+        </template>
+        <tableNoData v-else text="暂无数据" class="nodata"></tableNoData>
       </div>
     </div>
   </div>
@@ -90,6 +92,7 @@ export default {
       isLeftWrapShow:true,
       dataloading: false,
       rightShow: false,
+      exportBase: process.env.VUE_APP_API_ROOT + "/datamanage/export/lzList", //数据导出接口
       select_classify: "",
       classifyList: [],
       frequencyType: new Map([
@@ -112,6 +115,30 @@ export default {
       select_breed: "", // 选中的分类名称
     };
   },
+  computed: {
+    exportLzapi() {
+      // 数据导出接口
+      let urlStr = this.exportBase;
+      // token
+      urlStr += `?${localStorage.getItem("auth") || ""}`;
+      // 指标名称参数
+      urlStr += `&QuotaName=${this.select_quota}`;
+      // 指标id
+      urlStr += `&LzCode=${this.leftSearchTradeCode}`;
+      // 分类名称
+      urlStr += `&BreedName=${this.select_breed}`;
+      // 频度
+      urlStr += `&Frequency=${this.select_frequency}`;
+      // 单位
+      urlStr += `&UnitName=${this.select_Unit}`;
+      // 修改时间
+      urlStr += `&ModifyTime=${this.select_ModifyTime}`;
+      return this.escapeStr(urlStr);
+    },
+  },
+  created() {
+    this.getClassify();
+  },
   methods: {
     /* 获取分类 */
     getClassify() {
@@ -144,28 +171,31 @@ export default {
     changeClassify(item) {
       this.select_classify = item.BreedId;
       this.select_breed = item.BreedName;
-      this.leftSearchVal = "";
-      (this.leftSearchTradeCode = ""),
-      (this.select_quota = ""),
-      (this.select_Unit = ""),
-      (this.select_ModifyTime = "");
+      this.leftSearchVal = ""
+      this.leftSearchTradeCode = ""
+      this.select_quota = ""
+      this.select_Unit = ""
+      this.select_ModifyTime = ""
       this.getDataList()
     },
 
     initWidth() {
       $(".right-box")[0].style.width =
-        this.$refs.table.$el.clientWidth + 2 + "px";
+      this.$refs.table ? this.$refs.table.$el.clientWidth + 2 + "px":'0';
       $(".right-box")[0].scrollTop = 0;
       $(".right-box")[0].scrollLeft = 0;
     },
     /* 导出 */
     exportClick() {
       this.btnload = true;
-
       // TODO: 导出接口对接
+      const link = document.createElement("a");
+      link.href = this.exportLzapi;
+      link.download = "";
+      link.click();
       setTimeout(() => {
         this.btnload = false;
-      }, 5000);
+      }, 2000);
     },
 
     //左侧搜索
@@ -239,90 +269,8 @@ export default {
         }
     },
   },
-  created() {
-    this.getClassify();
-  },
-  mounted() {},
 };
 </script>
 <style lang="scss" scoped>
-.lzTarget-container {
-  display: flex;
-  position: relative;
-  .slide-btn-icon{
-        &.slide-left{
-            left:225px;
-        }
-        &.slide-right{
-            left: 0;
-        }
-    }
-  * {
-    box-sizing: border-box;
-  }
-  .minHeight {
-    height: calc(100vh - 120px);
-    background-color: #fff;
-    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-    border-radius: 4px;
-  }
-  div::-webkit-scrollbar {
-    width: 5px !important;
-  }
-  .left-cont {
-    min-width: 240px;
-    width:240px;
-    margin-right: 20px;
-    padding: 30px 0;
-    overflow: hidden;
-    .left-top {
-      padding: 0 20px;
-    }
-    .classify-list {
-      padding: 0 20px;
-      margin-top: 20px;
-      height: calc(100vh - 280px);
-      overflow-y: auto;
-      .classify-item {
-        font-size: 14px;
-        color: #666;
-        margin-bottom: 20px;
-        &:hover {
-          cursor: pointer;
-          color: #409eff;
-        }
-        &.act {
-          color: #409eff;
-        }
-      }
-    }
-  }
-  .right-cont {
-    flex:1;
-    padding: 30px;
-    overflow-x: auto;
-    .right-box {
-      max-width: 100%;
-      height: 100%;
-      border-left: 1px solid #dcdfe6;
-      border-right: 1px solid #dcdfe6;
-      overflow: auto;
-      .data-header {
-        width: 100%;
-        position: sticky;
-        top: 0;
-        z-index: 2;
-      }
-      .data-cont {
-        height: calc(100vh - 444px);
-      }
-      .nodata {
-        height: calc(100vh - 460px);
-        border: 1px solid #dcdfe6;
-        font-size: 16px;
-        color: #999;
-      }
-    }
-  }
-}
+@import "../css/coalCommon.scss";
 </style>