ETA1.0.9 init

src/views/positionAnalysis_manage/components/indexContent.vue

@@ -4,13 +4,13 @@
             <span style="margin-right:20px">{{num}}品种</span>
             <span>{{time}}</span>
         </div>
-        <div style="margin:30px 0">
+        <!-- <div style="margin:30px 0">
             <el-switch
                 v-model="isHistory"
                 size="large"
                 active-text="历史合约"
             />
-        </div>
+        </div> -->
         <div class="list-wrap">
             <div class="item" v-for="item in clist" :key="item.ClassifyName">
                 <div class="label">{{item.ClassifyName}}</div>
@@ -34,12 +34,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,7 +75,7 @@ export default {
   },
   data() {
     return {
-      isHistory: false,
+     /*  isHistory: false, */
 
     }
   },

src/views/positionAnalysis_manage/detail.vue

@@ -1,39 +1,79 @@
 <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-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>
+            <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>
-      <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">
+        <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>
     </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
     }
   },
   computed: {
@@ -94,10 +134,21 @@ 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=res.Data[0]&&res.Data[0].Exchange
+      })
     }
   },
 
   mounted() {
+    this.getList()
   }
 }
 
@@ -121,12 +172,51 @@ 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;
+                }
+            }
+            
+        }
+    }
 </style>
 
 <style lang="scss" scoped>
 @import '~@/styles/theme-vars.scss';
 .position-analysis-detail-page{
   min-height: calc(100vh - 410px);
+  display: flex;
+  .list{
+      width:379px;
+      margin-left:20px;
+      position: relative;
+      background: #fff;
+      border: 1px solid #ececec;
+      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;
+          }
+      }
+  }
+  .detail{
+      flex:1;
+  }
   .detail-top {
     padding: 20px;
     margin-bottom: 20px;