Merge branch 'ETA1.0.9'

src/views/positionAnalysis_manage/components/chartDetail.vue

@@ -23,12 +23,26 @@
             >
           </el-radio-group>
         </div>
+        <div>
+            <el-date-picker
+                v-model="selectDate"
+                type="date"
+                placeholder="请选择日期"
+                value-format="yyyy-MM-dd"
+                :picker-options="pickerOption"
+                @change="$emit('handleOpt','date')"
+                style="margin-right: 10px"
+            />
+            <el-button type="primary" plain @click="$emit('handleOpt','beforeDate')">查看前一天</el-button>
+            <el-button type="primary" plain @click="$emit('handleOpt','nextDate')" :disabled="disabledNextBtn">查看后一天</el-button>
+        </div>
       </div>
       <div
         class="chart-wrap"
         v-if="chartItemInfo&&chartItemInfo.List && chartListState.BuyList.List"
       >
         <div class="top-info-box">
+          <span>{{$route.query.classify_type}}</span>
           <span>{{ chartItemInfo.name }}</span>
           <span
             ><span style="color: #999; margin-right: 2px">总计 </span
@@ -66,6 +80,11 @@ export default {
       },
     },
   },
+  props:{
+    disabledNextBtn:Boolean,
+    selectDate:String,
+    pickerOption:Object
+  },
   data() {
     return {
       isPcShow: true,

src/views/positionAnalysis_manage/components/indexContent.vue

@@ -4,19 +4,12 @@
             <span style="margin-right:20px">{{num}}品种</span>
             <span>{{time}}</span>
         </div>
-        <div style="margin:30px 0">
-            <el-switch
-                v-model="isHistory"
-                size="large"
-                active-text="历史合约"
-            />
-        </div>
         <div class="list-wrap">
             <div class="item" v-for="item in clist" :key="item.ClassifyName">
                 <div class="label">{{item.ClassifyName}}</div>
-                <div style="flex:1">
+                <div style="margin-top:20px;">
                     <div 
-                        class="opt" 
+                        class="opt" :class="{'active':$route.query.classify_type===_item.ClassifyType}"
                         v-for="_item in item.Items" 
                         :key="_item.ClassifyType"
                         @click="goDetail(_item,item)"
@@ -34,12 +27,13 @@ export default {
     time:String,
     exchange:String,
     now:String,
-    list:null
+    list:null,
+    isHistory:Boolean
   },
   computed: {
     clist() {
       if(this.isHistory){
-          console.log('看历史');
+          /* console.log('看历史'); */
           return this.list
       }
 
@@ -74,8 +68,6 @@ export default {
   },
   data() {
     return {
-      isHistory: false,
-
     }
   },
 
@@ -86,7 +78,8 @@ export default {
           query:{
               classify_name:item.ClassifyName,
               classify_type:_item.ClassifyType,
-              exchange:this.exchange
+              exchange:this.exchange,
+              isHistory:this.isHistory
           }
       })      
     }
@@ -102,6 +95,8 @@ export default {
 <style lang="scss" scoped>
 @import '~@/styles/theme-vars.scss';
 .index-content-wrap{
+    display: flex;
+    flex-direction: column;
     .top-box{
         background: #e6eefb;
         padding: 15px 30px;
@@ -110,10 +105,13 @@ export default {
         }
     }
     .list-wrap{
-        padding: 30px 0;
+        padding: 30px;
+        height: 958px;
+        box-sizing: border-box;
+        overflow-y: auto;
         .item{
-            margin-bottom: 40px;
-            display: flex;
+            margin-bottom: 30px;
+            /* display: flex; */
 
             .label{
                 color: #666;
@@ -132,6 +130,10 @@ export default {
                 border: 1px solid $theme-color;
                 border-radius: 4px;
                 cursor: pointer;
+                &:hover,&.active{
+                    background-color: #0052D9;
+                    color: #FFFFFF;
+                }
             }
         }
     }

src/views/positionAnalysis_manage/detail.vue

@@ -1,39 +1,76 @@
 <template>
   <div class="hasrightaside-box position-analysis-detail-page">
-    <div class="detail-top">
-      <div>
-          <el-date-picker
-            v-model="selectDate"
-            type="date"
-            placeholder="请选择日期"
-            value-format="yyyy-MM-dd"
-            :picker-options="pickerOption"
-            @change="handleOpt('date')"
-            style="margin-right: 10px"
-          />
-          <el-button type="primary" plain @click="handleOpt('beforeDate')">查看前一天</el-button>
-          <el-button type="primary" plain @click="handleOpt('nextDate')" :disabled="disabledNextBtn">查看后一天</el-button>
+    <div class="detail">
+        <div class="detail-top">
+            <div>
+                <!-- <el-button type="primary" @click="refreshData" plain>一键刷新</el-button> -->
+                <el-button type="primary" @click="handleOpt('beforeClassifyType')">上一个合约</el-button>
+                <el-button type="primary" @click="handleOpt('nextClassifyType')">下一个合约</el-button>
+            </div>
+        </div>
+        <div class="content-box detail-content">
+            <chartDetail ref="chartDetailRef" 
+                :disabledNextBtn="disabledNextBtn"
+                :selectDate="selectDate"
+                :pickerOption="pickerOption"
+                @setInfo="e => { selectDate=e.date;}"
+                @handleOpt="handleOpt"
+            />
         </div>
-      <div>
-        <!-- <el-button type="primary" @click="refreshData" plain>一键刷新</el-button> -->
-        <el-button type="primary" @click="handleOpt('beforeClassifyType')">上一个合约</el-button>
-        <el-button type="primary" @click="handleOpt('nextClassifyType')">下一个合约</el-button>
-      </div>
     </div>
-    <div class="content-box detail-content">
-        <chartDetail ref="chartDetailRef" @setInfo="e => { selectDate=e.date; }"/>
+    <div class="list" :class="{'expand-list':isSlide}">
+        <div class="header">
+            <span>持仓列表</span>
+            <div>历史合约
+                <el-switch
+                    v-model="isHistory"
+                    size="large"
+                />
+            </div>
+        </div>
+        <el-tabs 
+            class="tabs-wrap"
+            v-model="activeType"
+        >
+            <el-tab-pane 
+                v-for="item in list"
+                :key="item.Exchange"
+                :label="item.Exchange" 
+                :name="item.Exchange"
+            >
+                <indexContent 
+                  :list="item.Items" 
+                  :num="item.Num" 
+                  :time="item.DataTime" 
+                  :exchange="item.Exchange"
+                  :now="item.CurrDate"
+                  :isHistory="isHistory"
+                />
+            </el-tab-pane>
+        </el-tabs>
+        <span class="slide-icon" @click="isSlide = !isSlide">
+            <i :class="{'el-icon-d-arrow-left':!isSlide,'el-icon-d-arrow-right':isSlide}"></i>
+        </span>
     </div>
-   
   </div>
 </template>
 
 <script>
 import chartDetail from './components/chartDetail.vue'
+import indexContent from './components/indexContent.vue'
+import {apiPositionAnalysisList} from '@/api/modules/positionAnalysis'
 export default {
-  components: { chartDetail },
+  components: { chartDetail , indexContent },
   data() {
     return {
-      selectDate: ''
+      selectDate: '',
+
+      /* list */
+      activeType: '',
+      list: [],
+      loading: false,
+      isHistory:false,
+      isSlide:false,
     }
   },
   computed: {
@@ -94,10 +131,22 @@ export default {
         this.$refs.chartDetailRef.selectDate=''
         this.$refs.chartDetailRef.getInfo()  
       }
+    },
+
+    getList(){
+      this.loading=true
+      apiPositionAnalysisList().then(res=>{
+          this.loading=false
+          if(res.Ret!==200) return
+          this.list=res.Data||[]
+          this.activeType= this.$route.query.exchange||res.Data[0]&&res.Data[0].Exchange
+          this.isHistory = Boolean(this.$route.query.isHistory)
+      })
     }
   },
 
   mounted() {
+    this.getList()
   }
 }
 
@@ -121,12 +170,79 @@ export default {
         }
 
     }
+    .position-analysis-detail-page{
+        .list{
+            .tabs-wrap{
+                .el-tabs__nav{
+                    display: flex;
+                    width: 100%;
+                }
+                .el-tabs__item{
+                    text-align: center;
+                    flex: 1;
+                    padding:0;
+                }
+                .el-tabs__header{
+                    margin-bottom: 0;
+                }
+            }
+            
+        }
+    }
 </style>
 
 <style lang="scss" scoped>
 @import '~@/styles/theme-vars.scss';
 .position-analysis-detail-page{
   min-height: calc(100vh - 410px);
+  display: flex;
+  position: relative;
+  .list{
+      width:379px;
+      margin-left:20px;
+      position: relative;
+      background: #fff;
+      border: 1px solid #F2F2F2;
+      border-radius: 4px;
+      /* box-shadow: 0 3px 6px rgba(0,0,0,.05); */
+      .header{
+          padding:30px;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+          span{
+              font-size: 16px;
+              font-weight: 500;
+          }
+      }
+      .tabs-wrap{
+          flex: 1;
+          border-top: 1px solid #DCDFE6;
+      }
+      .slide-icon{
+        position:absolute;
+        left: -10px;
+        padding: 20px 0;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+        cursor: pointer;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 99;
+        background-color: #fff;
+      }
+  }
+  .expand-list{
+      position:absolute;
+      right:0;
+      width:50%;
+  }
+  .detail{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      max-width: calc(100% - 379px - 20px);
+  }
   .detail-top {
     padding: 20px;
     margin-bottom: 20px;
@@ -138,6 +254,7 @@ export default {
     justify-content: space-between;
   }
   .detail-content {
+      flex: 1;
     padding: 20px;
     background: #fff;
     border-right: 2px solid #F2F2F2;

src/views/positionAnalysis_manage/list.vue

@@ -16,9 +16,17 @@
                   :time="item.DataTime" 
                   :exchange="item.Exchange"
                   :now="item.CurrDate"
+                  :isHistory="isHistory"
                 />
             </el-tab-pane>
         </el-tabs>
+        <div class="switch-wrap">
+            <el-switch
+                v-model="isHistory"
+                size="large"
+                active-text="历史合约"
+            />
+        </div>
     </div>
 </template>
 
@@ -32,6 +40,7 @@ export default {
       activeType: '',
       list: [],
       loading: false,
+      isHistory:false
 
     }
   },
@@ -59,6 +68,7 @@ export default {
 
 <style lang="scss" scoped>
 .position-analysis-index-page{
+    position: relative;
     min-height: 60vh;
     padding: 20px;
     background: #fff;
@@ -73,6 +83,11 @@ export default {
             font-size: 16px;
         }
     }
+    .switch-wrap{
+        position:absolute;
+        right:20px;
+        top:20px;
+    }
 }
 </style>
 <style lang="scss">