task 44941 BUG修改

src/components/pannel/index.html

@@ -4,6 +4,7 @@
       <div class="left_sign"></div>
       <div class="right_sign"></div>
     </div>
+    <div class="light"></div>
     <div class="header row align_item_center">
       <div v-if="title" class="title_bk row align_item_center">
         <i class="icon"></i>
@@ -13,10 +14,9 @@
       <div class="more">
         <slot name="header"></slot>
         <div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div>
-        <div v-show="flexIbleTable" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="openTable"></div>
+        <div v-show="flexIbleTable" class="flexIble_list hover_pointer" @click="openTable"></div>
       </div>
     </div>
-    <div class="light"></div>
   </div>
   <div class="body">
     <div>

src/components/pannel/index.scss

@@ -58,6 +58,8 @@
 
       .more {
         margin-right: 20px;
+        position: absolute;
+        right: 0;
       }
     }
 
@@ -114,6 +116,14 @@
   }
 }
 
+.flexIble_list {
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+  background: url('./list.png');
+  background-size: 100% 100%;
+}
+
 .flexIble {
   z-index: 4;
   width: 16px;
@@ -149,4 +159,4 @@
     transform: translateX(0px);
     /* 样式 */
   }
-}
+}

src/components/scroll-table-details/data.js

@@ -0,0 +1,65 @@
+export default [
+  {
+    area: '长春',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '松原',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '通化',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '四平',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '吉林',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '辽源',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '通化',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '白山',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '延边',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  }
+];

src/components/scroll-table-details/index.html

@@ -0,0 +1,19 @@
+<div :style="[style]">
+  <div class="table_show">
+      <div class="table_header table_one clearfix">
+        <div v-for="header in headers" :key="header" class="item test_center">{{header}}</div>
+        <div v-if="details" class="item test_center">操作</div>
+      </div>
+      <div class="table_bodyer" :style="[bodyStyle]" @click="handleClick($event)">
+        <scroll :data="data" class="seamless-warp" :class-option="swiperOption">
+          <div v-for="(line, index) in data" class="table_one clearfix item_height">
+            <div class="item test_center ellipsis_1" >{{line.voucherSummary}}</div>
+            <div class="item test_center ellipsis_1" >{{line.bookDate}}</div>
+            <div class="item test_center ellipsis_1" >{{line.jieAmount}}</div>
+            <div class="item test_center ellipsis_1" >{{line.daiAmount}}</div>
+            <div v-show="details" class="item test_center ellipsis_1" style="cursor: pointer;" :data-item="JSON.stringify(line)">查看详情</div>
+          </div>
+        </scroll>
+      </div>
+  </div>
+</div>

src/components/scroll-table-details/index.js

@@ -0,0 +1,95 @@
+import scroll from 'vue-seamless-scroll'
+export default {
+  components: {
+    scroll
+  },
+  data () {
+    return {
+    };
+  },
+  props: {
+    details: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: [String, Number],
+      default: '100%'
+    },
+    height: {
+      type: [String, Number],
+      default: '100'
+    },
+    bodyHeight: {
+      type: [Number],
+      default: 200
+    },
+    headers: {
+      type: Array,
+      default: function () {
+        return ['表头1', '表头2', '表头3']
+      }
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头11', '表头22', '表头33']
+        ]
+      }
+    }
+  },
+  computed: {
+    dataLength: function () {
+      return this.dataList.length;
+    },
+    bodyStyle: function () {
+      return {
+        height: this.bodyHeight + 'px',
+      };
+    },
+    style: function () {
+      return {
+        height: this.height,
+        width: this.width
+      };
+    },
+    // 如果数据不足5条则不滚动
+    swiperOption: function () {
+      return {
+        step: 0.4,
+        limitMoveNum: 5,
+        hoverStop: true,
+        direction: 1,
+        openWatch: true,
+        singleHeight: 0,
+        waitTime: 1000
+      }
+    }
+  },
+  created () {
+  },
+  methods: {
+    lineClick (line) {
+      console.log(11111111111)
+      this.$emit('lineClick', line)
+    },
+    handleClick(e) {
+      // 获取最近携带 data-item 属性的元素
+      const target = e.target.closest('[data-item]');
+      if (!target) return;
+
+      // 解析存储的数据
+      const item = JSON.parse(target.dataset.item);
+      console.log("点击项数据：", item);
+      this.$emit('lineClick', item)
+    }
+  }
+};

src/components/scroll-table-details/index.scss

@@ -0,0 +1,133 @@
+.table_show {
+  box-sizing: border-box;
+  padding: 0 10px;
+  margin-top: 10px;
+
+  .table_header {
+    width: 100%;
+    background: rgba(44, 117, 223, 0.5);
+    border-radius: 4px;
+    height: 40px;
+    font-size: 12px;
+    font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: rgba(185, 211, 235, 1);
+  }
+
+  .table_bodyer {
+    margin-top: 20px;
+    overflow: hidden;
+    height: 200px;
+    line-height: 40px;
+
+    .table_one {
+      height: 40px;
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+
+  .table_one {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+.swiper-container {
+  height: 100%;
+}
+
+.table_bodyer {
+  height: 100%;
+
+}
+
+.margin {
+  margin-right: 5px;
+}
+
+.item_height {
+  color: rgba(214, 234, 252, 1);
+  font-size: 10px;
+  line-height: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-bottom: 1px solid #183053;
+
+  &:nth-child(odd) {
+    background-color: rgba(49, 129, 246, 0.1);
+  }
+
+  &:hover {
+    color: rgba(49, 129, 246, 1);
+  }
+}
+
+.item {
+  font-size: 14px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1!important;
+}
+
+.item1 {
+  flex: 1.8;
+}
+
+.item:nth-child(1) {
+  text-align: left;
+  flex: 1.8;
+  padding-left: 5px;
+}
+
+.item:nth-child(2) {
+  flex: 1.3;
+}
+
+.item:nth-child(3) {
+  flex: 1.8;
+}
+
+.item:nth-child(4) {
+  flex: 1.4;
+}
+
+.item:nth-child(5) {
+  flex: 1.3;
+}
+
+.item:nth-child(6) {
+  flex: 1.3;
+}
+
+.item:nth-child(7) {
+  flex: 2;
+}
+
+.text_overflow {
+  text-overflow: ellipsis;
+}
+
+.test_center {
+  text-align: center;
+}
+
+.pop {
+  padding: 4px;
+  position: fixed;
+  z-index: 20;
+  color: white;
+  background: rgba($color: #000000, $alpha: 0.3);
+  border-radius: 6px;
+}
+
+.margin_top {
+  margin-top: 5px;
+}

src/components/scroll-table-details/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/components/scroll-table/index.html

@@ -13,4 +13,4 @@
         </scroll>
       </div>
   </div>
-</div>
+</div>

src/views/capital/api/index.js

@@ -130,6 +130,48 @@ export function analysisOfLargeFundExpenditureWarning (deptId, year) {
   })
 }
 
+// 资金一张图-预警分析-左上点击-资金支出大额预警列表(分页)
+export function financeWarningZjzcdeyjList (deptId, year) {
+  let query = {
+    deptId,
+    year,
+    voucherAmountMin: 10000
+  }
+  return request({
+    url: 'api/home/xixia/financeWarning/zjzcdeyjList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 资金一张图-预警分析-左中点击-资金往来敏感词预警列表(分页)
+export function financeWarningZjwlmgcyjList (deptId, year) {
+  let query = {
+    deptId,
+    year,
+    voucherAmountMin: 10000
+  }
+  return request({
+    url: 'api/home/xixia/financeWarning/zjwlmgcyjList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 资金一张图-预警分析-左下点击-资金往来不规范预警列表(分页)
+export function financeWarningZjwlbgfyjList (deptId, year) {
+  let query = {
+    deptId,
+    year,
+    voucherAmountMin: 10000
+  }
+  return request({
+    url: 'api/home/xixia/financeWarning/zjwlbgfyjList',
+    method: 'get',
+    params: query
+  })
+}
+
 // 资金一张图-预警分析-左下-资金往来不规范预警分析
 export function warninganalysisofnonstandardfund (deptId, year) {
   let query = {
@@ -198,4 +240,4 @@ export function RankingSensitiveWordWarningFundTransactions (deptId, year, type)
     method: 'get',
     params: query
   })
-}
+}

src/views/capital/comps/buttom/2/asset-details/index.html

@@ -0,0 +1,42 @@
+  <!--资产信息详情-弹窗-->
+  <div class="gl_pop_cash pop_statistical_desc">
+    <div class="head_main">
+      <div class="title"><i></i>凭证详情</div>
+      <div class="close" @click="close"></div>
+    </div>
+    <div class="echarts_main scrollbar">
+      <div>
+        <p>项目名称</p>
+        <p>{{data.cashflowName}}</p>
+      </div>
+      <div>
+        <p>科目编码</p>
+        <p>{{data.subjectId}}</p>
+      </div>
+      <div>
+        <p>科目名称</p>
+        <p>{{data.subjectNameAll}}</p>
+      </div>
+      <div>
+        <p>借方金额</p>
+        <p>{{data.jieAmount}}</p>
+      </div>
+      <div>
+        <p>贷方金额</p>
+        <p>{{data.daiAmount}}</p>
+      </div>
+      <div>
+        <p>数量</p>
+        <p>{{data.quantityNum}}</p>
+      </div>
+      <div>
+        <p>单位</p>
+        <p>{{data.quantityUnit}}</p>
+      </div>
+      <div>
+        <p>凭证摘要</p>
+        <p>{{data.voucherSummary}}</p>
+      </div>
+    </div>
+
+  </div>

src/views/capital/comps/buttom/2/asset-details/index.js

@@ -0,0 +1,23 @@
+export default {
+  props: {
+    data: {}
+  },
+  data () {
+    return {
+      isLoad: false,
+      permanentDetail: {}
+    };
+  },
+  computed: {
+  },
+  created () {
+
+  },
+  mounted () {
+  },
+  methods: {
+    close () {
+      this.$emit('close')
+    }
+  }
+};

src/views/capital/comps/buttom/2/asset-details/index.scss

@@ -0,0 +1,182 @@
+.gl_pop_cash {
+  background: rgba(10, 25, 47, 0.8);
+  position: absolute;
+   border: 2px solid #3181f6;
+  box-shadow: 0 0 5px #3181f6;
+  border-radius: 0 0 100px 0;
+  // border-left: 0.15vw solid #357dfa;
+  z-index: 11;
+
+  .head_main {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+    padding: 0 20px;
+    background: linear-gradient(to right, rgba(49, 129, 246, .8), rgba(49, 129, 246, 0));
+    .title {
+      color: #ffad00;
+      font-size: 20px !important;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      text-shadow: 0 0 15px #3181f6;
+      i{
+        display: block;
+        width: 20px;
+        height: 20px;
+        background: url("tt_icon.png") no-repeat center;
+        background-size: 100% 100%;
+        margin-right: 10px;
+      }
+    }
+
+    .close {
+      background: url('./close.png') no-repeat;
+      background-size: 100% 100%;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .xs_main {
+      height: 30px;
+      position: absolute;
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .block {
+        width: 20px;
+        display: flex;
+
+        .point {
+          width: .55vh;
+          height: .55vh;
+          margin-right: 0.36vw;
+
+          &.p1 {
+            background: rgba(53, 125, 250, 1)
+          }
+
+          &.p2 {
+            background: rgba(53, 125, 250, .7)
+          }
+
+          &.p3 {
+            background: rgba(53, 125, 250, .4)
+          }
+        }
+
+      }
+
+      .xs_x {
+        height: 1px;
+        flex: 1;
+        background: #214284;
+      }
+    }
+  }
+
+  .echarts_main {
+    overflow-y: auto;
+
+    div {
+      font-size: 10px;
+      // height: 40px;
+      line-height: 20px;
+
+      p {
+        // white-space: nowrap;
+      }
+    }
+
+    .headers {
+      height: 30px;
+      font-size: 14px;
+      color: #0befca;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 0.53vw;
+      background: rgba(11, 239, 202, .2);
+      margin-bottom: 0.9vh
+    }
+
+    .desc_main {
+      overflow-y: scroll;
+      padding-right: 0.33vw;
+
+      .analysisTable_list {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .flex_item {
+          cursor: pointer;
+          list-style: none;
+          margin: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          color: #fff;
+          font-size: 12px;
+          position: relative;
+          height: 30px;
+
+          &:nth-child(2n) {
+            background: rgba(53, 125, 250, .1);
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.pop_statistical_desc {
+  width: 600px;
+  margin: 0;
+  left: 480px;
+  top: 180px;
+  padding-bottom: 1.04vw !important;
+
+  .head_main {
+
+    .title {
+      color: #fff;
+    }
+  }
+
+  .echarts_main {
+    margin-top: 16px;
+
+    div {
+      display: flex;
+      align-items: center;
+
+      &:nth-child(even) {
+        //background: rgba(32, 89, 188, 0.2);
+      }
+
+      p {
+        font-size: 16px;
+        &:nth-child(1) {
+          width: 8vw;
+          padding-right: 1vw;
+          text-align: right;
+          flex-shrink: 0;
+          color: #b0cfec;
+        }
+        margin: 0;
+        color: #ffffff;
+        line-height: 3.92vh;
+      }
+    }
+  }
+}

src/views/capital/comps/buttom/2/asset-details/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/capital/comps/buttom/2/index.html

@@ -1,3 +1,4 @@
-<Pannel :title="bottomTit + '预警清单'" height="305" width="960" v-if="showBottom">
-  <ScrollTable :headers="headers" :data="data" details></ScrollTable>
+<Pannel :title="bottomTit + '预警清单'" height="305" width="960" v-show="showBottom">
+  <ScrollTable :headers="headers" :data="data" :dataDetail="dataDetail" details @lineClick="lineClick1"></ScrollTable>
+
 </Pannel>

src/views/capital/comps/buttom/2/index.js

@@ -1,9 +1,13 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
+import {financeWarningZjzcdeyjList, financeWarningZjwlmgcyjList, financeWarningZjwlbgfyjList} from "../../../api";
+import {mapGetters} from "vuex";
+import AssetDetails from './asset-details/index.vue';
 export default {
   components: {
     ScrollTable,
-    Pannel
+    Pannel,
+    AssetDetails
   },
   props: {
     showBottom: {
@@ -15,21 +19,86 @@ export default {
       default: ''
     }
   },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
   data () {
     return {
       headers: ['摘要', '日期', '借方金额', '贷方金额'],
-      data: [
-        ['摘要内容摘要内容摘要内容摘要内容摘要内容摘', '2025-12', '234', '3434']
-      ]
+      data: [],
+      dataDetail: [],
     };
   },
+  watch: {
+    year: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    },
+    deptId: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    },
+    bottomTit: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
   created () {
   },
   mounted () {
+
   },
   methods: {
     tabChange () {
 
+    },
+    lineClick1 (val) {
+      console.log(val)
+      this.$emit('clickDetail', val)
+    },
+    getData () {
+      if (this.year, this.deptId) {
+        this.data = [];
+        switch (this.bottomTit) {
+
+          case "大额":
+            financeWarningZjzcdeyjList(this.deptId, this.year).then(res => {
+              let data = res.rows;
+              // .map(item => {
+              //   return [item.voucherSummary, item.bookDate, item.jieAmount, item.daiAmount]
+              // })
+              this.data = data;
+            })
+            break;
+
+          case "敏感":
+            financeWarningZjwlmgcyjList(this.deptId, this.year).then(res => {
+              let data = res.rows;
+              // .map(item => {
+              //   return [item.voucherSummary, item.bookDate, item.jieAmount, item.daiAmount]
+              // })
+              this.data = data;
+            })
+            break;
+
+          case "不规范":
+            financeWarningZjwlbgfyjList(this.deptId, this.year).then(res => {
+              let data = res.rows;
+              // .map(item => {
+              //   return [item.voucherSummary, item.bookDate, item.jieAmount, item.daiAmount]
+              // })
+              this.data = data;
+            })
+            break;
+        }
+
+      }
     }
   }
 };

src/views/capital/index.html

@@ -13,6 +13,7 @@
     <component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component>
   </div>
   <div class="buttom_side row space_between zIndextop">
-    <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index" :showBottom="showBottom" :bottomTit="bottomTit"></component>
+    <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index" :showBottom="showBottom" :bottomTit="bottomTit" @clickDetail="clickDetail"></component>
   </div>
+  <AssetDetails @close="showPermanentDetail = false" v-if="showPermanentDetail" :data="dataDetailById"></AssetDetails>
 </div>

src/views/capital/index.js

@@ -21,6 +21,7 @@ import { comps } from './data.js'
 
 
 import GisMap from '@/components/gis-map/index.vue';
+import AssetDetails from './comps/buttom/2/asset-details/index.vue';
 export default {
   components: {
     GisMap,
@@ -39,7 +40,8 @@ export default {
     Right22,
     Right32,
     Bottom2,
-    Bottom1
+    Bottom1,
+    AssetDetails
   },
   data () {
     return {
@@ -57,6 +59,8 @@ export default {
       tab: '1',
       comps,
       showBottom: false,
+      dataDetailById: {},
+      showPermanentDetail: false,
       bottomTit: ''
     };
   },
@@ -73,14 +77,16 @@ export default {
     tabChange (info) {
       this.tab = info.id;
     },
+    clickDetail (val) {
+      this.dataDetailById = val;
+      this.showPermanentDetail = true;
+    },
     openTable(val){
       if (val == this.bottomTit){
         this.showBottom = !this.showBottom;
       }else{
         this.showBottom = true
       }
-
-
       this.bottomTit = val
     }
   }