后台新增持仓分析

src/api/modules/positionAnalysis.js

@@ -0,0 +1,21 @@
+// 持仓分析模块
+
+import http from "@/api/http.js"
+
+/**
+ * 持仓分析详情
+ * @param DataTime 查询日期，日期为空时，默认返回最新日期
+ * @param ClassifyName 品种名称
+ * @param ClassifyType 合约名称
+ * @param Exchange 交易所名称
+ */
+export const apiPositionAnalysisInfo=params=>{
+    return http.get('/trade_analysis/top',params)
+}
+
+/**
+ * 持仓分析列表
+ */
+export const apiPositionAnalysisList=()=>{
+    return http.get('/trade_analysis/classify',{})
+}

src/routes/modules/chartRoutes.js

@@ -187,5 +187,25 @@ export default [
 				component:()=>import('@/views/chartRelevance_manage/statisticFeatureChartEditor.vue')
 			}
 		]
+	},
+
+	/* 持仓分析 */
+	{
+		path:'/',
+		component: home,
+		name: '持仓分析',
+		hidden:  false,
+		children: [
+			{
+				path: 'positionAnalysisList',
+				name: '持仓列表',
+				component:()=>import('@/views/positionAnalysis_manage/list.vue')
+			},
+			{
+				path: 'positionAnalysisDetail',
+				name: '持仓详情',
+				component:()=>import('@/views/positionAnalysis_manage/detail.vue'),
+			}
+		]
 	}
 ]

src/views/Home.vue

@@ -181,6 +181,9 @@
                           : ""
                       }}客户列表
                     </template>
+                    <template v-if="$route.path==='/positionAnalysisDetail'">
+                      {{breadSelfName||'持仓详情'}}
+                    </template>
                     <template v-else>
                       {{ item.name }}
                     </template>
@@ -310,18 +313,9 @@ export default {
     },
   },
   computed: {
-    done() {
-      //今日待办是否处理完
-      if (!this.todayList) {
-        return false;
-      }
-      // 之前是通过判断列表中是否都有说明,现需要判断列表中都要添加或编辑
-      return this.todayList.every((item) => item.isEdited);
-    },
-    // Role() {
-    //   let role = localStorage.getItem("Role") || "";
-    //   return role;
-    // },
+    breadSelfName() {
+      return this.$store.state.breadSelfName;
+    },  
     isShowRole() {
       let role = localStorage.getItem("RoleIdentity") || "";
       return (

src/views/positionAnalysis_manage/components/chartBox.vue

@@ -0,0 +1,402 @@
+<template>
+  <div :class="['chart-render-box', isPcShow ? 'chart-render-box-pc' : '']">
+    <div class="label-box">
+      <div>
+        <span
+          class="color-box"
+          :style="{ background: colorMap.get(keyVal)[0] }"
+        ></span>
+        <span>{{ data.labelName }}</span>
+      </div>
+      <div>
+        <span
+          class="color-box"
+          :style="{ background: colorMap.get(keyVal)[1] }"
+        ></span>
+        <span>增</span>
+      </div>
+      <div>
+        <span
+          class="color-box"
+          :style="{ background: colorMap.get(keyVal)[2] }"
+        ></span>
+        <span>减</span>
+      </div>
+    </div>
+    <div class="chart-content">
+      <!-- <img class="mark-img" src="../../../../../assets/hzyb/chart/mark.png" alt=""> -->
+      <div class="chart-box" :id="'chart-box-' + keyVal"></div>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <el-dialog
+      :visible.sync="showDetailDia"
+      title="详情"
+      :width="500"
+      draggable
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="position-analysis-detail-page-dialog"
+    >
+      <div class="detail-pop-wrap">
+        <h2 class="title">{{ showDetailData.DealShortName }}</h2>
+        <div class="table-box">
+          <div class="item">
+            <div>持{{ showDetailData.TypeName }}</div>
+            <div>{{ showDetailData.DealValue }}</div>
+          </div>
+          <div class="item">
+            <div>增减</div>
+            <div>{{ showDetailData.DealChange }}</div>
+          </div>
+          <div class="item">
+            <div>占比</div>
+            <div>{{ (showDetailData.Rate * 100).toFixed(2) }}%</div>
+          </div>
+          <div class="item">
+            <div>前{{ showDetailData.Rank }}名持净多单</div>
+            <div>{{ showDetailData.BeforeAllValue }}</div>
+          </div>
+          <div class="item">
+            <div>增减</div>
+            <div>{{ showDetailData.BeforeAllChange }}</div>
+          </div>
+          <div class="item">
+            <div>占比</div>
+            <div>{{ (showDetailData.BeforeAllRate * 100).toFixed(2) }}%</div>
+          </div>
+        </div>
+        <div class="close-btn" @click="showDetailDia = false">知道了</div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Highcharts from "highcharts";
+import HighchartsMore from "highcharts/highcharts-more";
+import HighchartszhCN from "@/utils/highcahrts-zh_CN";
+
+HighchartszhCN(Highcharts);
+HighchartsMore(Highcharts);
+export default {
+  props: {
+    keyVal: String,
+    data: Object,
+  },
+  computed: {
+    //图表默认配置项
+    chartDefaultOpts() {
+      let that = this;
+      const chartDefaultOpts = {
+        chart: {
+          type: "column",
+          inverted: true, //xy轴换位置
+          marginRight: 85,
+        },
+        title: {
+          text: "",
+        },
+        //版权信息
+        credits: { enabled: false },
+        plotOptions: {
+          column: {
+            pointPadding: 0,
+            stacking: "normal",
+            dataLabels: {
+              enabled: true,
+              align: "right",
+              color: "#333",
+              inside: false,
+              crop: false,
+              overflow: true,
+              x: 80,
+              formatter: function (e) {
+                return this.point.options.isLabel;
+              },
+            },
+            events: {
+              click: function (event) {
+                const name = event.point.category;
+                that.showDetail(name);
+              },
+            },
+          },
+        },
+        legend: {
+          enabled: false, //关闭图例
+        },
+        tooltip: {
+          enabled: false,
+        },
+      };
+      return chartDefaultOpts;
+    },
+  },
+  watch: {
+    data(nval) {
+      nval.List && this.chartRender();
+    },
+  },
+  data() {
+    return {
+      //配色表
+      colorMap: new Map([
+        ["BuyList", ["#FFD600", "#F32F2F", "#52D424"]],
+        ["SoldList", ["#C6DDFF", "#363EFF", "#52D424"]],
+        ["CleanBuyList", ["#FFD600", "#F32F2F", "#52D424"]],
+        ["CleanSoldList", ["#C6DDFF", "#363EFF", "#52D424"]],
+      ]),
+
+      isPcShow: true,
+
+      //点击柱子显示弹窗
+      showDetailDia: false,
+      showDetailData: {},
+    };
+  },
+
+  methods: {
+    //绘图
+    chartRender() {
+      let options = {};
+      let categories = [];
+      let series = [
+        {
+          name: "总数",
+          data: [],
+        },
+        {
+          name: "增长",
+          data: [],
+        },
+        {
+          name: "减少",
+          data: [],
+        },
+      ];
+      let totalArr = [],
+        increaseArr = [],
+        reduceArr = [];
+      this.data.List.forEach((item, index) => {
+        categories.push(item.DealShortName);
+        // 处理series
+        if (item.DealChange < 0) {
+          //减少
+          totalArr.push({ y: item.DealValue });
+          increaseArr.push({ y: 0 });
+          reduceArr.push({
+            y: -item.DealChange,
+            isLabel: `${item.DealValue}/${item.DealChange}`,
+          });
+        } else {
+          totalArr.push({ y: item.DealValue - item.DealChange });
+          reduceArr.push({ y: 0 });
+          increaseArr.push({
+            y: item.DealChange,
+            isLabel: `${item.DealValue}/+${item.DealChange}`,
+          });
+        }
+      });
+      series[0].data = totalArr;
+      series[1].data = increaseArr;
+      series[2].data = reduceArr;
+      let xAxis = {
+        categories: categories,
+        tickWidth: 1,
+        tickPosition: "outside",
+      };
+      let yAxis = {
+        opposite: true,
+        gridLineWidth: 1,
+        gridLineColor: "#E4E4E4",
+        gridLineDashStyle: "longdash",
+        endOnTick: false,
+        showLastLabel: true,
+        lineWidth: 1,
+        tickWidth: 1,
+        tickPosition: "outside",
+        title: {
+          text: "",
+        },
+        reversedStacks: false,
+      };
+
+      options.colors = this.colorMap.get(this.keyVal);
+      options.xAxis = xAxis;
+      options.yAxis = yAxis;
+      options.series = series;
+      options = { ...this.chartDefaultOpts, ...options };
+      // console.log('渲染',options);
+      Highcharts.chart(`chart-box-${this.keyVal}`, options);
+    },
+
+    showDetail(name) {
+      let data = {};
+      this.data.List.forEach((item) => {
+        if (item.DealShortName === name) {
+          data = item;
+        }
+      });
+      // 判断是否是在pc中 如果是则通知pc显示弹窗
+      // console.log(window.innerWidth);
+
+      this.showDetailDia = true;
+      this.showDetailData = {
+        ...data,
+        type_name: this.data.name,
+      };
+    },
+  },
+  mounted() {
+    this.data.List && this.chartRender();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/theme-vars.scss";
+* {
+  box-sizing: border-box;
+}
+.chart-render-box {
+  width: 100%;
+  overflow: hidden;
+  .label-box {
+    display: flex;
+    justify-content: center;
+    div {
+      margin-right: 30px;
+    }
+    .color-box {
+      display: inline-block;
+      width: 22px;
+      height: 22px;
+      margin-right: 10px;
+      border-radius: 4px;
+    }
+  }
+  .chart-content {
+    width: 100%;
+    height: 70vh;
+    position: relative;
+    .mark-img {
+      position: absolute;
+      width: 58%;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      z-index: 2;
+    }
+    .chart-box {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.mobile-detail-pop-wrap {
+  width: 90vw;
+  .title {
+    text-align: center;
+    font-size: 32px;
+    padding: 30px;
+  }
+  .table-box {
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      width: 33.33%;
+      text-align: center;
+      padding: 30px 20px;
+      border-right: 1px solid #e5e5e5;
+      border-bottom: 1px solid #e5e5e5;
+      div:first-child {
+        color: #999999;
+        font-size: 24px;
+      }
+      div:last-child {
+        font-size: 32px;
+        font-weight: 600;
+      }
+    }
+  }
+  .close-btn {
+    text-align: center;
+    line-height: 96px;
+    color: #e3b377;
+  }
+}
+
+.detail-pop-wrap {
+  .title {
+    text-align: center;
+    font-size: 16px;
+    padding-bottom: 10px;
+    margin-top: 0;
+  }
+  .table-box {
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      width: 33.33%;
+      text-align: center;
+      padding: 30px 20px;
+      border-right: 1px solid #e5e5e5;
+      border-bottom: 1px solid #e5e5e5;
+      div:first-child {
+        color: #999999;
+        font-size: 14px;
+      }
+      div:last-child {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+    .item:nth-child(3n) {
+      border-right: none;
+    }
+    .item:nth-child(n + 4) {
+      border-bottom: none;
+    }
+  }
+  .close-btn {
+    text-align: center;
+    line-height: 40px;
+    color: #fff;
+    width: 300px;
+    height: 40px;
+    background: $theme-color;
+    border-radius: 41px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    cursor: pointer;
+  }
+}
+// @media (min-width: 600px){
+.chart-render-box-pc {
+  .label-box {
+    display: flex;
+    justify-content: center;
+    font-size: 14px;
+    div {
+      margin-right: 20px;
+    }
+    .color-box {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      margin-right: 8px;
+      border-radius: 4px;
+      position: relative;
+      top: 2px;
+    }
+  }
+  .chart-content {
+    height: 800px;
+  }
+}
+// }
+</style>

src/views/positionAnalysis_manage/components/chartDetail.vue

@@ -0,0 +1,347 @@
+<template>
+  <div
+    :class="[
+      'chart-position-analysis-page',
+      isPcShow ? 'chart-position-analysis-page-pc' : '',
+    ]"
+    v-loading="pageLoading"
+    element-loading-text="加载中"
+  >
+    <div class="chart-wrap-box">
+      <div class="wrap-top">
+        <div>
+          <el-radio-group
+            v-model="tabKey"
+            @change="chartItemInfo = chartListState[tabKey]"
+            v-show="chartListState.BuyList.List"
+          >
+            <el-radio-button
+              :label="tab.key"
+              v-for="tab in tabKeys"
+              :key="tab.key"
+              >{{ tab.label }}</el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <div>
+          <el-date-picker
+            v-model="selectDate"
+            type="date"
+            placeholder="请选择日期"
+            value-format="yyyy-MM-dd"
+            :picker-options="pickerOption"
+            @change="getInfo"
+            style="margin-right: 10px"
+          />
+          <el-button type="primary" @click="handleDateChange('before')"
+            >查看前一天</el-button
+          >
+          <el-button type="primary" @click="handleDateChange('next')"
+            >查看后一天</el-button
+          >
+        </div>
+      </div>
+      <div
+        class="chart-wrap"
+        v-if="chartItemInfo && chartListState.BuyList.List"
+      >
+        <div class="top-info-box">
+          <span>{{ chartItemInfo.name }}</span>
+          <span
+            ><span style="color: #999; margin-right: 2px">总计 </span
+            >{{ chartItemInfo.TotalDealValue }}</span
+          >
+          <span
+            ><span style="color: #999; margin-right: 2px">较昨日 </span
+            >{{ chartItemInfo.TotalDealChange }}</span
+          >
+        </div>
+        <chart-box :keyVal="tabKey" :data="chartItemInfo" />
+      </div>
+    </div>
+
+    <div class="empty-wrap" v-if="!chartListState.BuyList.List">
+      <tableNoData text="该日期无数据" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  apiPositionAnalysisInfo,
+  apiPositionAnalysisList,
+} from "@/api/modules/positionAnalysis";
+import chartBox from "./chartBox.vue";
+export default {
+  components: { chartBox },
+  computed: {
+    pickerOption() {
+      let that = this;
+      let obj = {
+        // 周六日禁用
+        disabledDate(t) {
+          if ([5, 6].includes(that.$moment(t).weekday())) {
+            return true;
+          } else {
+            return false;
+          }
+        },
+      };
+      return obj;
+    },
+  },
+  watch: {
+    "$route.query": {
+      handler(nval) {
+        this.selectDate = "";
+        this.getInfo();
+      },
+    },
+  },
+  data() {
+    return {
+      isPcShow: true,
+
+      isRefresh: false,
+
+      minDate: new Date("2000/01/01"),
+      currentDate: "", //
+      selectDate: "",
+
+      allClassifyTypeList: [],
+
+      pageLoading: false,
+      chartListState: {
+        BuyList: {
+          name: "多单",
+          labelName: "持多单量",
+        },
+        SoldList: {
+          name: "空单",
+          labelName: "持空单量",
+        },
+        CleanBuyList: {
+          name: "净多单",
+          labelName: "净多单量",
+        },
+        CleanSoldList: {
+          name: "净空单",
+          labelName: "净空单量",
+        },
+      },
+
+      tabKeys: [
+        { label: "多单", key: "BuyList" },
+        { label: "空单", key: "SoldList" },
+        { label: "净多单", key: "CleanBuyList" },
+        { label: "净空单", key: "CleanSoldList" },
+      ],
+      tabKey: "BuyList",
+      chartItemInfo: null,
+    };
+  },
+
+  methods: {
+    getAllClassifyType() {
+      apiPositionAnalysisList().then((res) => {
+        if (res.Ret !== 200) return;
+        const arr = res.Data || [];
+        // 将数据展开
+        arr.forEach((item) => {
+          item.Items &&
+            item.Items.forEach((itemC1) => {
+              itemC1.Items &&
+                itemC1.Items.forEach((itemC2) => {
+                  this.allClassifyTypeList.push({
+                    exchange: item.Exchange,
+                    classify_name: itemC1.ClassifyName,
+                    classify_type: itemC2.ClassifyType,
+                  });
+                });
+            });
+        });
+      });
+    },
+
+    handleClassifyTypeChange(type) {
+      if (!this.allClassifyTypeList.length) return;
+
+      const currentExchange = this.$route.query.exchange;
+      const currentClassifyName = this.$route.query.classify_name;
+      const currentClassifyType = this.$route.query.classify_type;
+      // 找index
+      let indexNum = 0;
+      this.allClassifyTypeList.forEach((item, index) => {
+        if (
+          item.exchange === currentExchange &&
+          item.classify_name === currentClassifyName &&
+          item.classify_type === currentClassifyType
+        )
+          indexNum = index;
+      });
+      // console.log(indexNum);
+      let obj = {};
+      if (type === "before") {
+        obj =
+          this.allClassifyTypeList[
+            indexNum === 0 ? this.allClassifyTypeList.length - 1 : indexNum - 1
+          ];
+      } else {
+        obj =
+          this.allClassifyTypeList[
+            indexNum === this.allClassifyTypeList.length - 1 ? 0 : indexNum + 1
+          ];
+      }
+      // console.log(obj);
+
+      this.$router.replace({
+        query: {
+          ...this.$route.query,
+          exchange: obj.exchange,
+          classify_name: obj.classify_name,
+          classify_type: obj.classify_type,
+        },
+      });
+      // window.location.reload();
+    },
+
+    //切换 前一天\后一天 如果遇到周六日则跳过
+    handleDateChange(type) {
+      let num = 1;
+      if (type === "before") {
+        if (this.$moment(this.selectDate).weekday() === 1) {
+          //向前一天时 当前为周一则 跳到 上周五
+          num = 3;
+        }
+        this.selectDate = this.$moment(this.selectDate)
+          .add(-num, "days")
+          .format("YYYY-MM-DD");
+      } else {
+        if (this.$moment(this.selectDate).weekday() === 5) {
+          //向前一天时 当前为周五则 跳到 下周一
+          num = 3;
+        }
+        this.selectDate = this.$moment(this.selectDate)
+          .add(num, "days")
+          .format("YYYY-MM-DD");
+      }
+
+      this.getInfo();
+    },
+
+    async getInfo() {
+      this.pageLoading = true;
+      const res = await apiPositionAnalysisInfo({
+        DataTime: this.selectDate || "",
+        ClassifyName: this.$route.query.classify_name,
+        ClassifyType: this.$route.query.classify_type,
+        Exchange: this.$route.query.exchange,
+      });
+      this.pageLoading = false;
+      if (res.Ret === 200) {
+        const obj = res.Data || {};
+        for (let key in this.chartListState) {
+          this.chartListState[key] = {
+            ...this.chartListState[key],
+            ...obj[key],
+          };
+        }
+        this.chartItemInfo = this.chartListState[this.tabKey];
+        if (res.Data.DataTime) {
+          this.selectDate = this.$moment(res.Data.DataTime).format(
+            "YYYY-MM-DD"
+          );
+        }
+
+        this.$store.commit(
+          "SET_TITLE",
+          `${this.$route.query.classify_type} ${this.$moment(
+            this.selectDate
+          ).format("YYYYMMDD")}持仓`
+        );
+      } else {
+        // 清空数据
+        for (let key in this.chartListState) {
+          this.chartListState[key].List = null;
+        }
+      }
+    },
+
+    getHandles(data) {
+      // 监听选择的日期改变
+      if (data.opt == "date") {
+        this.selectDate = data.val;
+        this.getInfo();
+      } else if (data.opt === "beforeDate") {
+        this.handleDateChange("before");
+      } else if (data.opt === "nextDate") {
+        this.handleDateChange("next");
+      } else if (data.opt === "beforeClassifyType") {
+        this.handleClassifyTypeChange("before");
+      } else if (data.opt === "nextClassifyType") {
+        this.handleClassifyTypeChange("next");
+      }
+    },
+  },
+
+  mounted() {
+    this.getAllClassifyType();
+    this.getInfo();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-position-analysis-page {
+  padding-bottom: calc(160px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(160px + env(safe-area-inset-bottom));
+}
+.chart-wrap {
+  width: 100%;
+  margin-bottom: 60px;
+  .top-info-box {
+    padding: 0 34px 30px 34px;
+    text-align: center;
+    span {
+      display: inline-block;
+      margin-right: 50px;
+    }
+  }
+}
+.wrap-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.empty-wrap {
+  text-align: center;
+  padding: 150px 0;
+}
+
+// @media (min-width: 600px){
+.chart-position-analysis-page-pc {
+  padding: 0;
+  .top-sticky-wrap {
+    display: none;
+  }
+  .bot-fixed-wrap {
+    display: none;
+  }
+  .empty-wrap {
+    font-size: 16px;
+  }
+  .chart-wrap {
+    margin-bottom: 60px;
+    .top-info-box {
+      padding: 0 20px 20px;
+      text-align: center;
+      font-size: 20px;
+      span {
+        display: inline-block;
+        margin-right: 30px;
+      }
+    }
+  }
+}
+// }
+</style>

src/views/positionAnalysis_manage/components/indexContent.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="index-content-wrap">
+        <div class="top-box">
+            <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 
+                        class="opt" 
+                        v-for="_item in item.Items" 
+                        :key="_item.ClassifyType"
+                        @click="goDetail(_item,item)"
+                    >{{_item.ClassifyType}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    num:Number,
+    time:String,
+    exchange:String,
+    now:String,
+    list:null
+  },
+  computed: {
+    clist() {
+      if(this.isHistory){
+          console.log('看历史');
+          return this.list
+      }
+
+      const now=this.$moment(this.now).format('YYMM')//当前时间
+      const arr=this.list?JSON.parse(JSON.stringify(this.list)):[]
+      let resArr=[]
+      if(this.exchange!='郑商所'){
+          resArr=arr.map(item=>{
+              item.Items=item.Items.filter(_item=>{
+                  const t=_item.ClassifyType.substr(-4)
+                  
+                  //15号之后过滤非当月合约
+				  return Number(this.now.substr(-2)) <= 15 ? Number(t)>=now : Number(t)>now;
+              })
+              return item
+          })
+      }else{
+          resArr=arr.map(item=>{
+              item.Items=item.Items.filter(_item=>{
+                  // 如果合约编号没有含日期 肯定是少于4位的 因为至少为一个字母加三位数的日期
+                  if(_item.ClassifyType.length<4) return true
+                  const t=2+_item.ClassifyType.substr(-3)
+                  
+                  return Number(this.now.substr(-2)) <= 15 ? Number(t)>=now : Number(t)>now;
+              })
+              return item
+          })
+      }
+
+      return resArr
+    }
+  },
+  data() {
+    return {
+      isHistory: false,
+
+    }
+  },
+
+  methods: {
+    goDetail(_item,item){
+      this.$router.push({
+          path:"/positionAnalysisDetail",
+          query:{
+              classify_name:item.ClassifyName,
+              classify_type:_item.ClassifyType,
+              exchange:this.exchange
+          }
+      })      
+    }
+  },
+
+  mounted() {
+
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/theme-vars.scss';
+.index-content-wrap{
+    .top-box{
+        background: #e6eefb;
+        padding: 15px 30px;
+        span{
+            display: inline-block;
+        }
+    }
+    .list-wrap{
+        padding: 30px 0;
+        .item{
+            margin-bottom: 40px;
+            display: flex;
+
+            .label{
+                color: #666;
+                width: 100px;
+                padding-top: 10px;
+                font-size: 14px;
+            }
+            .opt{
+                padding: 6px 10px;
+                min-width: 100px;
+                text-align: center;
+                display: inline-block;
+                margin-right: 20px;
+                margin-bottom: 20px;
+                background: #e6eefb;
+                border: 1px solid $theme-color;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>

src/views/positionAnalysis_manage/detail.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="hasrightaside-box position-analysis-detail-page">
+    <div class="detail-top">
+      <span></span>
+      <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"/>
+    </div>
+   
+  </div>
+</template>
+
+<script>
+import chartDetail from './components/chartDetail.vue'
+export default {
+  components: { chartDetail },
+  data() {
+    return {
+    }
+  },
+
+  methods: {
+    // 操作选项
+    handleOpt(type){
+        let obj={}
+        if(type==='date'){
+            obj={
+                opt:type,
+                val:this.selectDate
+            }
+        }else if(type==='beforeDate'){
+            obj={
+                opt:type
+            }
+        }else if(type==='nextDate'){
+            obj={
+                opt:type
+            }
+        }else if(type==='beforeClassifyType'){
+            obj={
+                opt:type
+            }
+        }else if(type==='nextClassifyType'){
+            obj={
+                opt:type
+            }
+        }
+        this.$refs.chartDetailRef&&this.$refs.chartDetailRef.getHandles(obj);
+    },
+
+    refreshData() {
+      if(this.$refs.chartDetailRef) {
+        this.$refs.chartDetailRef.selectDate=''
+        this.$refs.chartDetailRef.getInfo()  
+      }
+    }
+  },
+
+  mounted() {
+  }
+}
+
+</script>
+
+<style lang="scss">
+    .el-date-editor--date{
+        width: 180px !important;
+        .el-input__wrapper{
+            background: #F6F6F6;
+            border: 1px solid #EBEBEB;
+            border-radius: 20px;
+            height: 40px;
+            box-shadow: none;
+        }
+    }
+    .position-analysis-detail-page-dialog{
+        .el-dialog__header{
+            border-bottom: 1px solid #E9E9E9;
+            margin-right: 0;
+        }
+
+    }
+</style>
+
+<style lang="scss" scoped>
+@import '~@/styles/theme-vars.scss';
+.position-analysis-detail-page{
+  min-height: calc(100vh - 410px);
+  .detail-top {
+    padding: 20px;
+    margin-bottom: 20px;
+    background: #fff;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0,0,0,.05);
+    display: flex;
+    justify-content: space-between;
+  }
+  .detail-content {
+    padding: 20px;
+    background: #fff;
+    border-right: 2px solid #F2F2F2;
+  }
+}
+</style>

src/views/positionAnalysis_manage/list.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="position-analysis-index-page" v-loading="loading" element-loading-text="Loading...">
+        <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"
+                />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script>
+import {apiPositionAnalysisList} from '@/api/modules/positionAnalysis'
+import indexContent from './components/indexContent.vue'
+export default {
+  components: { indexContent },
+  data() {
+    return {
+      activeType: '',
+      list: [],
+      loading: false,
+
+    }
+  },
+
+  methods: {
+    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()
+  }
+}
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.position-analysis-index-page{
+    min-height: 60vh;
+    padding: 20px;
+    background: #fff;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+    .tabs-wrap{
+        .el-tabs__nav-wrap::after{
+            display: none;
+        }
+        .el-tabs__item{
+            font-size: 16px;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.position-analysis-index-page {
+  .el-tabs__nav-wrap::after { background-color: transparent; }
+}  
+</style>

src/vuex/index.js

@@ -20,6 +20,8 @@ const state = {
     "rai_researcher", //权益研究员
     "ficc_researcher", //ficc研究员
   ],
+
+  breadSelfName: '',//面包屑自定义当前页面name
 };
 
 export default {

src/vuex/mutations.js

@@ -8,6 +8,10 @@ const mutations = {
   SET_DATA_AUTH(state, bool) {
     state.dataAuth = bool;
   },
+  
+  SET_TITLE(state,str) {
+    state.breadSelfName = str;
+  }
 };
 
 export default mutations;