diff --git a/src/components/addCollect/AddCollect.vue b/src/components/addCollect/AddCollect.vue
new file mode 100644
index 0000000..fa64e57
--- /dev/null
+++ b/src/components/addCollect/AddCollect.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="addCollect">
+    <div class="contanier">
+      <div class="top">
+        <span>添加收藏</span>
+        <img :src="imgUrl" alt @click="$store.state.addCollectState=false" />
+      </div>
+      <div class="center">
+        <input type="text" placeholder="请输入名称" v-model="nameCollect" />
+      </div>
+      <div class="bottom">
+        <div>保存</div>
+        <div @click="$store.state.addCollectState=false">取消</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'addCollect',
+  data () {
+    return {
+      imgUrl: require('../../../static/nav/deleteImg.png'),
+      nameCollect: ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.addCollect {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .contanier {
+    width: 37.5rem;
+    height: 24.6875rem;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    & > .top {
+      margin-top: 1rem;
+      width: 32.8125rem;
+      height: 3.875rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 0.125rem solid #bdbdbd;
+      font-size: 1.375rem;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0rem;
+      color: #333333;
+      & > img {
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+      & > img:hover {
+        cursor: pointer;
+      }
+    }
+    & > .center {
+      width: 32.8125rem;
+      & > input {
+        width: 100%;
+        height: 3.4375rem;
+        border-radius: 0.3125rem;
+      }
+    }
+    & > .bottom {
+      width: 32.8125rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      & > div:nth-child(1) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div:nth-child(2) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        border: solid 0.125rem #dbdbdb;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #666666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div {
+        margin: 3rem 1.2rem;
+      }
+      & > div:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/chartsCont/ChartsCont.vue b/src/components/chartsCont/ChartsCont.vue
index ad3c124..86ecdcc 100644
--- a/src/components/chartsCont/ChartsCont.vue
+++ b/src/components/chartsCont/ChartsCont.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chartsCont">
+  <div class="chartsCont" v-if="transBefore.tableExplain!==''">
     <Echarts
       v-if="indStatic!==0"
       :echartsDatarts="echartsDatarts"
@@ -265,39 +265,48 @@ export default {
       nowDataTJ: { text: '无', stateType: 'line' },
       // 转置前总数据
       transBefore: {
-        // 数据表说明
-        tableExplain: '注：    按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
-        // 时间（2019年10月30日）
-        timeArr: ['2019年10月23日', '2019年10月24日', '2019年10月25日', '2019年10月26日', '2019年10月27日', '2019年10月28日', '2019年10月29日', '2019年10月30日'],
-        // 指标名称
-        termsName: ['价格指数', '工业', '能源', '固定资产投资', '服务业生产指数', '城镇调查失业率', '房地产', '国内贸易'],
-        // 指标解释
-        termsExplain: ['价格指数指标解释', '工业指标解释', '能源指标解释', '固定资产投资指标解释', '服务业生产指数指标解释', '城镇调查失业率指标解释', '房地产指标解释', '国内贸易指标解释'],
-        // 地区名
-        areaName: ['北京市', '临沂市', '上海市', '河北省', '兰陵县', '天津市', '兰山区', '荣盛锦绣外滩'],
-        // (行：指标名称，列：指标、时间)===>第一列为指标 { 指标名称数据 }
-        transBeforeTermsData: [
-          ['10210.23', '10152.23', '12556.23', '23689.23', '25698.01', '54565.26', '48915.32', '15862.32'],
-          ['10520.23', '10212.23', '12526.23', '23689.23', '25658.01', '54665.26', '57915.32', '71762.32'],
-          ['10530.23', '10242.23', '12565.23', '23389.23', '25698.01', '46365.26', '59145.32', '16233.32'],
-          ['10320.23', '10252.23', '15650.23', '23089.23', '25498.01', '53065.26', '55845.32', '45633.32'],
-          ['13230.23', '10622.23', '89785.23', '23889.23', '25498.01', '78965.26', '46845.32', '36733.32'],
-          ['14520.23', '45622.23', '89455.23', '45739.23', '49898.01', '53965.26', '49845.32', '16733.32'],
-          ['14540.23', '44562.23', '89945.23', '45576.23', '56898.01', '46965.26', '59845.32', '54563.32'],
-          ['14210.23', '44562.23', '48994.23', '43476.23', '25698.01', '79696.26', '44565.32', '65563.32']
-        ],
-        // (行：地区名，列：地区、时间)===>第一列为地区{ 地区名称数据 }
-        transBeforeAreaData: [
-          ['23210.23', '10562.23', '12456.23', '23696.23', '69598.01', '54543.26', '57157.32', '15352.32'],
-          ['10350.23', '10612.23', '12786.23', '26589.23', '56698.01', '56934.26', '56915.32', '45962.32'],
-          ['10450.23', '10542.23', '12665.23', '29639.23', '21259.01', '54495.26', '25945.32', '55483.32'],
-          ['13692.23', '10262.23', '12625.23', '22628.23', '25298.01', '52625.26', '52245.32', '26233.32'],
-          ['13690.23', '26222.23', '89762.23', '23889.23', '25428.01', '56265.26', '57445.32', '56233.32'],
-          ['13690.23', '45622.23', '89225.23', '45629.23', '25298.01', '32965.26', '57845.32', '14533.32'],
-          ['13650.23', '46222.23', '32445.23', '45576.23', '21528.01', '45265.26', '56245.32', '14263.32'],
-          ['14230.23', '42622.23', '48262.23', '43426.23', '21268.01', '78626.26', '56265.32', '16263.32']
-        ]
+        tableExplain: '',
+        timeArr: [],
+        termsName: [],
+        termsExplain: [],
+        areaName: [],
+        transBeforeTermsData: [],
+        transBeforeAreaData: []
       },
+      // transBefore: {
+      //   // 数据表说明
+      //   tableExplain: '注：    按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
+      //   // 时间（2019年10月30日）
+      //   timeArr: ['2019年10月23日', '2019年10月24日', '2019年10月25日', '2019年10月26日', '2019年10月27日', '2019年10月28日', '2019年10月29日', '2019年10月30日'],
+      //   // 指标名称
+      //   termsName: ['价格指数', '工业', '能源', '固定资产投资', '服务业生产指数', '城镇调查失业率', '房地产', '国内贸易'],
+      //   // 指标解释
+      //   termsExplain: ['价格指数指标解释', '工业指标解释', '能源指标解释', '固定资产投资指标解释', '服务业生产指数指标解释', '城镇调查失业率指标解释', '房地产指标解释', '国内贸易指标解释'],
+      //   // 地区名
+      //   areaName: ['北京市', '临沂市', '上海市', '河北省', '兰陵县', '天津市', '兰山区', '荣盛锦绣外滩'],
+      //   // (行：指标名称，列：指标、时间)===>第一列为指标 { 指标名称数据 }
+      //   transBeforeTermsData: [
+      //     ['10210.23', '10152.23', '12556.23', '23689.23', '25698.01', '54565.26', '48915.32', '15862.32'],
+      //     ['10520.23', '10212.23', '12526.23', '23689.23', '25658.01', '54665.26', '57915.32', '71762.32'],
+      //     ['10530.23', '10242.23', '12565.23', '23389.23', '25698.01', '46365.26', '59145.32', '16233.32'],
+      //     ['10320.23', '10252.23', '15650.23', '23089.23', '25498.01', '53065.26', '55845.32', '45633.32'],
+      //     ['13230.23', '10622.23', '89785.23', '23889.23', '25498.01', '78965.26', '46845.32', '36733.32'],
+      //     ['14520.23', '45622.23', '89455.23', '45739.23', '49898.01', '53965.26', '49845.32', '16733.32'],
+      //     ['14540.23', '44562.23', '89945.23', '45576.23', '56898.01', '46965.26', '59845.32', '54563.32'],
+      //     ['14210.23', '44562.23', '48994.23', '43476.23', '25698.01', '79696.26', '44565.32', '65563.32']
+      //   ],
+      //   // (行：地区名，列：地区、时间)===>第一列为地区{ 地区名称数据 }
+      //   transBeforeAreaData: [
+      //     ['23210.23', '10562.23', '12456.23', '23696.23', '69598.01', '54543.26', '57157.32', '15352.32'],
+      //     ['10350.23', '10612.23', '12786.23', '26589.23', '56698.01', '56934.26', '56915.32', '45962.32'],
+      //     ['10450.23', '10542.23', '12665.23', '29639.23', '21259.01', '54495.26', '25945.32', '55483.32'],
+      //     ['13692.23', '10262.23', '12625.23', '22628.23', '25298.01', '52625.26', '52245.32', '26233.32'],
+      //     ['13690.23', '26222.23', '89762.23', '23889.23', '25428.01', '56265.26', '57445.32', '56233.32'],
+      //     ['13690.23', '45622.23', '89225.23', '45629.23', '25298.01', '32965.26', '57845.32', '14533.32'],
+      //     ['13650.23', '46222.23', '32445.23', '45576.23', '21528.01', '45265.26', '56245.32', '14263.32'],
+      //     ['14230.23', '42622.23', '48262.23', '43426.23', '21268.01', '78626.26', '56265.32', '16263.32']
+      //   ]
+      // },
       // 调用存储的对象
       objCompBefore: null,
       // echarts渲染的数据======>非饼图
@@ -315,7 +324,12 @@ export default {
       pieStatic: false,
       // 获取数据所用参数
       // 晒选状态   1筛选指标 2筛选地区
-      selectState: 1
+      selectState: 1,
+      // 下来帅选的数据
+      downLaSelect: {
+        area: '',
+        label: ''
+      }
     }
   },
   watch: {
@@ -329,6 +343,11 @@ export default {
     //   immediate: true,
     //   deep: true
     // }
+    transBefore (newval, oldval) {
+      if (newval) {
+        this.showTable()
+      }
+    },
     indStatic (newValue, oldValue) {
       console.log(newValue, 'newValue1212')
       this.chartsShow()
@@ -348,7 +367,10 @@ export default {
         this.dataTJComput()
         // 重新渲染表
         this.$nextTick(() => {
-          this.$refs.table.doLayout()
+          console.log(this.$refs.table, 'this.$refs.table')
+          if (this.$refs.table !== undefined) {
+            this.$refs.table.doLayout()
+          }
         })
       },
       immediate: true,
@@ -414,6 +436,8 @@ export default {
     indexExplain (labIndexName) {
       if (this.transBefore.termsName.indexOf(labIndexName) !== -1) {
         console.log('指标解释：', this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)])
+        this.$store.state.labelExplainData = this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)]
+        this.$store.state.labelExplainState = true
       }
     },
     // 统计数据对行，对列处理
@@ -615,21 +639,32 @@ export default {
     // 获取后台数据表中的数据
     getDatas () {
       console.log(this.defaultDataRight, '获取数据')
+      // 初始化计算数据
       this.$axios({
         method: 'GET',
         url: 'data/data/detail',
         params: {
-          type: this.$route.query.type === 'area' ? 1 : 2, // 1非地区   2地区
+          type: this.$route.query.type === 'area' ? 2 : 1, // 1非地区   2地区
           table_name: this.defaultDataRight.table_name, // 表名
           id: this.defaultDataRight.id, // 分类id
-          area: '', // 选中的地区
-          quota: this.defaultDataRight.name, // 选中的指标
+          area: this.downLaSelect.area, // 选中的地区
+          quota: this.downLaSelect.label, // 选中的指标
           cate: this.selectState// 1帅选指标  2筛选地区
         }
       }).then(res => {
         console.log(res, '获取数据展示数据')
         // 请求接口完成   请求成功
         if (res.data.code === 200) {
+          // if (res.data.data.areaName.length !== 0) {
+          //   this.transBefore = {}
+          //   this.transBefore.tableExplain = res.data.data.tableExplain
+          //   this.transBefore.timeArr = res.data.data.timeArr
+          //   this.transBefore.termsName = res.data.data.termsName
+          //   this.transBefore.termsExplain = res.data.data.termsExplain
+          //   this.transBefore.areaName = res.data.data.areaName
+          //   this.transBefore.transBeforeTermsData = res.data.data.transBeforeTermsData
+          //   this.transBefore.transBeforeAreaData = res.data.data.transBeforeAreaData
+          // }
         }
       }).catch((fail) => {
         console.log(fail, 2369)
@@ -670,12 +705,14 @@ export default {
       }
     }
   },
+  created () {
+    this.getDatas()
+  },
   mounted () {
     // console.log(new ComputedData())
-    this.showTable()
+    // this.showTable()
     // 转置状态
     this.transState = this.chartsStatusMegger.transState
-    this.getDatas()
   }
 }
 </script>
diff --git a/src/components/chartsCut/ChartsCut.vue b/src/components/chartsCut/ChartsCut.vue
index 6870237..0421032 100644
--- a/src/components/chartsCut/ChartsCut.vue
+++ b/src/components/chartsCut/ChartsCut.vue
@@ -140,13 +140,15 @@ export default {
     },
     // 被选中时触发
     choiceCallerArea (resu) {
-      console.log(resu)
+      console.log(resu, '5+656565')
       console.log(this.cityDefaultName)
     },
     // 被选中时触发
     choiceCallerTime (resu) {
-      console.log(resu)
+      console.log(resu, '66666')
       console.log(this.cityDefaultName)
+      // 将值传给父组件
+      this.$emit('comTime', resu[2].name)
       this.showInputStu = !this.showInputStu
     },
     changesInputStu () {
diff --git a/src/components/dimension/Dimension.vue b/src/components/dimension/Dimension.vue
new file mode 100644
index 0000000..808180e
--- /dev/null
+++ b/src/components/dimension/Dimension.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="dimension">
+    <div class="container">
+      <div class="top">
+        <span>维度转换</span>
+        <img :src="imgUrl" alt @click="$store.state.dimensionState = false" />
+      </div>
+      <div class="main">
+        <div class="row">
+          <div></div>
+          <div class="row_main">
+            <div :class="{active:rowVal==='指标'}" @click="changeTabel('指标','row')">指标</div>
+            <div :class="{active:rowVal==='地区'}" @click="changeTabel('地区','row')">地区</div>
+            <div :class="{active:rowVal==='时间'}" @click="changeTabel('时间','row')">时间</div>
+          </div>
+        </div>
+        <div class="col">
+          <div class="row_main">
+            <div :class="{active:colVal==='指标'}" @click="changeTabel('指标','col')">指标</div>
+            <div :class="{active:colVal==='地区'}" @click="changeTabel('地区','col')">地区</div>
+            <div :class="{active:colVal==='时间'}" @click="changeTabel('时间','col')">时间</div>
+          </div>
+          <div class="tabel">
+            <div>
+              <div>{{rowVal}}</div>
+              <div>{{colVal}}</div>
+              <div>{{colVal}}</div>
+              <div>{{colVal}}</div>
+            </div>
+            <div>
+              <div>{{rowVal}}</div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+            <div>
+              <div>{{rowVal}}</div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+            <div>
+              <div>{{rowVal}}</div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div>确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'dimension',
+  data () {
+    return {
+      imgUrl: require('../../../static/nav/deleteImg.png'),
+      rowVal: '指标',
+      colVal: '时间'
+    }
+  },
+  methods: {
+    changeTabel (stateSD, strd) {
+      if (strd === 'row') {
+        this.rowVal = stateSD
+      } else if (strd === 'col') {
+        this.colVal = stateSD
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dimension {
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .container {
+    width: 64.375rem;
+    height: 33rem;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    & > .top {
+      margin-top: 1rem;
+      width: 59.375rem;
+      height: 3.875rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 0.125rem solid #bdbdbd;
+      font-size: 1.375rem;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0rem;
+      color: #333333;
+      & > img {
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+      & > img:hover {
+        cursor: pointer;
+      }
+    }
+    & > .main {
+      margin-top: 2.6rem;
+      width: 59.375rem;
+      & > .row {
+        width: 59.375rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        & > div:nth-child(1) {
+          width: 5.25rem;
+          height: 3.125rem;
+        }
+        & > .row_main {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          & > div {
+            width: 5.25rem;
+            height: 3.125rem;
+            background-color: #a8daf1;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+          }
+          & > div:nth-child(1) {
+            border-radius: 0.1875rem 0 0 0.1875rem;
+          }
+          & > div:nth-child(3) {
+            border-radius: 0 0.1875rem 0.1875rem 0;
+          }
+          & > .active {
+            background-color: #52b6e3;
+          }
+        }
+        & > div:hover {
+          cursor: pointer;
+        }
+      }
+      & > .col {
+        width: 59.375rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-start;
+        & > .row_main {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: center;
+          & > div {
+            width: 5.25rem;
+            height: 3.125rem;
+            background-color: #a8daf1;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+          }
+          & > div:nth-child(1) {
+            border-radius: 0.1875rem 0 0 0.1875rem;
+          }
+          & > div:nth-child(3) {
+            border-radius: 0 0.1875rem 0.1875rem 0;
+          }
+          & > .active {
+            background-color: #52b6e3;
+          }
+          & > div:hover {
+            cursor: pointer;
+          }
+        }
+        & > .tabel {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-start;
+          & > div {
+            height: 2.5rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            & > div {
+              height: 2.5rem;
+              width: 13.265rem;
+              display: flex;
+              flex-direction: row;
+              justify-content: center;
+              align-items: center;
+              border: 1px solid black;
+            }
+          }
+        }
+      }
+    }
+    & > .bottom {
+      width: 59.375rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      & > div:nth-child(1) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div:nth-child(2) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        border: solid 0.125rem #dbdbdb;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #666666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div {
+        margin: 3rem 1.2rem;
+      }
+      & > div:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/editCom/EditCom.vue b/src/components/editCom/EditCom.vue
new file mode 100644
index 0000000..a9235de
--- /dev/null
+++ b/src/components/editCom/EditCom.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="editCom">
+    <div class="container">
+      <div class="top">
+        <span>编辑</span>
+        <img :src="imgUrl" alt @click="$store.state.editWindowState=false" />
+      </div>
+      <div class="titles">
+        <div>
+          <input type="radio" value="hang" v-model="radioSelect" />行
+          <input type="radio" value="lie" v-model="radioSelect" />列
+        </div>
+        <div>
+          <span>全选</span>
+          <span>|</span>
+          <span>反选</span>
+        </div>
+      </div>
+      <div class="contanin">
+        <div v-for="(item,index) in datalist" :key="index">
+          <input type="checkbox" v-model="item.state" />
+          {{item.text}}
+        </div>
+      </div>
+      <!-- 确定取消 -->
+      <div class="bottom">
+        <div>确定</div>
+        <div @click="$store.state.editWindowState=false">取消</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'editCom',
+  data () {
+    return {
+      imgUrl: require('../../../static/nav/deleteImg.png'),
+      radioSelect: 'hang',
+      datalist: [
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false },
+        { text: '接收到符合', state: false }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.editCom {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .container {
+    width: 43.3125rem;
+    height: 44.125rem;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    & > .top {
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 38.375rem;
+      height: 3.875rem;
+      border-bottom: 0.125rem solid #bdbdbd;
+      & > span {
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > img {
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+      & > img:hover{
+        cursor: pointer;
+      }
+    }
+    & > .titles {
+      margin: 1rem 0;
+      width: 38.375rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      & > div:nth-child(1) {
+        & > input {
+          margin: 0 0.5rem;
+        }
+        & > input:hover {
+          cursor: pointer;
+        }
+      }
+      & > div:nth-child(2) {
+        & > span {
+          margin: 0 0.5rem;
+        }
+        & > span:hover {
+          cursor: pointer;
+        }
+      }
+    }
+    & > .contanin {
+      padding: 0.5rem;
+      width: 37.375rem;
+      height: 27rem;
+      border: 0.0625rem solid #bdbdbd;
+      overflow: auto;
+      & > div {
+        width: 100%;
+        height: 2rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+      }
+    }
+    & > .bottom {
+      width: 38.375rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      & > div:nth-child(1) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div:nth-child(2) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        border: solid 0.125rem #dbdbdb;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #666666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div {
+        margin: 3rem 1.2rem;
+      }
+      & > div:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/insertLabel/InsertLabel.vue b/src/components/insertLabel/InsertLabel.vue
new file mode 100644
index 0000000..e589f99
--- /dev/null
+++ b/src/components/insertLabel/InsertLabel.vue
@@ -0,0 +1,309 @@
+<template>
+  <div class="insertLabel">
+    <div class="container">
+      <div class="top">
+        <span>新增指标</span>
+        <img :src="imgUrl" alt @click="closeX" />
+      </div>
+      <!-- 行列转换 -->
+      <div class="rowCol">
+        <input type="radio" name="rowCols" value="hang" v-model="radioValue" />行
+        <input type="radio" name="rowCols" value="lie" v-model="radioValue" />列
+      </div>
+      <!-- 运算框 -->
+      <div class="computkuang">
+        <div class="left">
+          <input type="text" placeholder="请输入新增指标名称" v-model="insertName" />
+          <div class="label">
+            <div
+              v-for="(item,index) in labelData"
+              :key="index"
+              :class="{bgcolor:item.state}"
+              @click="bgclick(index)"
+            >{{item.text}}</div>
+          </div>
+        </div>
+        <div class="center">
+          <div>=</div>
+          <div>></div>
+        </div>
+        <div class="right">
+          <textarea v-model="fontComput"></textarea>
+          <div class="computer">
+            <div v-for="(item,index) in computers" :key="index">{{item.text}}</div>
+          </div>
+        </div>
+      </div>
+      <!-- 提示 -->
+      <div class="explains">说明：指标只能从上表中显示</div>
+      <!-- 确认取消 -->
+      <div class="bnottom">
+        <div>确认</div>
+        <div @click="closeX">取消</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'insertLabel',
+  data () {
+    return {
+      imgUrl: require('../../../static/nav/deleteImg.png'),
+      radioValue: 'hang',
+      fontComput: '',
+      insertName: '',
+      labelData: [
+        { text: '健康的说法更健康', state: false },
+        { text: '健康的说jksdfhjjk', state: false },
+        { text: '健聚划算df覅㐇', state: false },
+        { text: '健聚dfgs划算覅㐇', state: false },
+        { text: '健聚jdskfasdfhn 划算覅㐇', state: false },
+        { text: '健聚sdg划asd算覅㐇', state: false },
+        { text: '健聚dsfg划f算覅㐇', state: false },
+        { text: '健聚划sdasdffasf算覅㐇', state: false },
+        { text: '健聚划sdasdff算覅㐇', state: false },
+        { text: '健聚划sdf算覅s㐇', state: false },
+        { text: '健聚划sdafsdf算ssd覅㐇', state: false },
+        { text: '健聚划sasdfdf算覅㐇', state: false },
+        { text: '健聚划ssadfdf算覅㐇', state: false },
+        { text: '健聚划sdf算覅㐇', state: false },
+        { text: '健聚划ssdafgfdf算s覅㐇', state: false },
+        { text: '健聚划sdaasfdf算s覅㐇', state: false },
+        { text: '健聚划sdasfdfa算覅㐇', state: false }
+      ],
+      computers: [
+        { text: '*', state: false },
+        { text: '-', state: false },
+        { text: '7', state: false },
+        { text: '8', state: false },
+        { text: '9', state: false },
+        { text: '/', state: false },
+        { text: '+', state: false },
+        { text: '4', state: false },
+        { text: '5', state: false },
+        { text: '6', state: false },
+        { text: '(', state: false },
+        { text: ')', state: false },
+        { text: '1', state: false },
+        { text: '2', state: false },
+        { text: '3', state: false },
+        { text: '.', state: false },
+        { text: '0', state: false }
+      ]
+    }
+  },
+  methods: {
+    bgclick (ind) {
+      this.labelData.forEach((item, index) => {
+        index === ind ? item.state = true : item.state = false
+      })
+    },
+    closeX () {
+      this.$store.state.insertWindowState = false
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.insertLabel {
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .container {
+    width: 51.25rem;
+    height: 51.25rem;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    & > .top {
+      margin-top: 1.875rem;
+      width: 46.25rem;
+      height: 3.875rem;
+      border-bottom: 0.125rem solid #bdbdbd;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      & > span {
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > img {
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+      & > img:hover{
+        cursor: pointer;
+      }
+    }
+    & > .rowCol {
+      margin: 1.25rem 0;
+      width: 46.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      & > input {
+        margin: 0 0.4rem;
+      }
+    }
+    & > .computkuang {
+      width: 46.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      & > .left {
+        width: 16rem;
+        & > input {
+          width: 16rem;
+          font-size: 0.8rem;
+          letter-spacing: 0.0625rem;
+        }
+        & > .label {
+          margin: 0.75rem 0;
+          width: 16.16rem;
+          height: 30rem;
+          border: 0.0625rem solid #bdbbdb;
+          overflow: auto;
+          & > div {
+            width: 100%;
+            height: 2.125rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            font-size: 0.8rem;
+            letter-spacing: 0.0625rem;
+          }
+          & > div:hover {
+            cursor: pointer;
+          }
+          & > .bgcolor {
+            background-color: #25aff3;
+            color: #fff;
+          }
+        }
+      }
+      & > .center {
+        margin: 0 1rem;
+        width: 5rem;
+        height: 30rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        & > div {
+          width: 2rem;
+          height: 2rem;
+          font-size: 1.5rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+        & > div:nth-child(2) {
+          background-color: #25aff3;
+          color: #fff;
+        }
+        & > div:nth-child(2):hover {
+          cursor: pointer;
+        }
+      }
+      & > .right {
+        width: 25rem;
+        height: 32.875rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        & > textarea {
+          width: 24rem;
+          height: 16rem;
+        }
+        & > .computer {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          border: 1px solid #bdbdbd;
+          & > div {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            margin: 0.75rem 0.82rem;
+            width: 3rem;
+            height: 1.8rem;
+            border: 0.0625rem solid #bdbdbd;
+            background: url("../../../static/data/bt_counter.jpg") repeat-x;
+          }
+          & > div:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    & > .explains {
+      width: 46.25rem;
+      font-size: 1rem;
+    }
+    & > .bnottom {
+      width: 46.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      & > div:nth-child(1) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+      }
+      & > div:nth-child(2) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        border-radius: 0.3125rem;
+        border: solid 0.125rem #dbdbdb;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+      }
+      & > div {
+        margin:1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+       & > div:hover{
+         cursor: pointer;
+       }
+    }
+  }
+}
+</style>
diff --git a/src/components/labelExplain/LabelExplain.vue b/src/components/labelExplain/LabelExplain.vue
new file mode 100644
index 0000000..1a70a37
--- /dev/null
+++ b/src/components/labelExplain/LabelExplain.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="editCom">
+    <div class="container">
+      <div class="top">
+        <span>指标解释</span>
+        <img :src="imgUrl" alt @click="$store.state.labelExplainState=false" />
+      </div>
+      <div class="contanin">{{$store.state.labelExplainData}}</div>
+      <!-- 确定取消 -->
+      <div class="bottom">
+        <div>复制到粘贴板</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'editCom',
+  data () {
+    return {
+      imgUrl: require('../../../static/nav/deleteImg.png')
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.editCom {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .container {
+    width: 43.3125rem;
+    height: 44.125rem;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    & > .top {
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 38.375rem;
+      height: 3.875rem;
+      border-bottom: 0.125rem solid #bdbdbd;
+      & > span {
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > img {
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+      & > img:hover {
+        cursor: pointer;
+      }
+    }
+    & > .titles {
+      margin: 1rem 0;
+      width: 38.375rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      & > div:nth-child(1) {
+        & > input {
+          margin: 0 0.5rem;
+        }
+        & > input:hover {
+          cursor: pointer;
+        }
+      }
+      & > div:nth-child(2) {
+        & > span {
+          margin: 0 0.5rem;
+        }
+        & > span:hover {
+          cursor: pointer;
+        }
+      }
+    }
+    & > .contanin {
+      margin-top: 1rem;
+      padding: 0.5rem;
+      width: 37.375rem;
+      height: 27rem;
+      font-size: 1.125rem;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 2rem;
+      letter-spacing: 0rem;
+      color: #666666;
+      overflow: auto;
+    }
+    & > .bottom {
+      width: 38.375rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      & > div:nth-child(1) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div:nth-child(2) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        border: solid 0.125rem #dbdbdb;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #666666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div {
+        margin: 3rem 1.2rem;
+      }
+      & > div:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/mapData/MapData.vue b/src/components/mapData/MapData.vue
index 513143c..f7d1c11 100644
--- a/src/components/mapData/MapData.vue
+++ b/src/components/mapData/MapData.vue
@@ -2,7 +2,7 @@
   <div class="mapData">
     <div class="mapDataLeft">
       <!-- 左侧导航 -->
-      <el-row class="tac" style="overflow: auto;height:44.875rem;" v-if="defaultSelectLies">
+      <el-row class="tac" style="overflow: auto;height:54.875rem;" v-if="defaultSelectLies">
         <el-col :span="24">
           <el-menu
             :default-openeds="defaultSelectLies"
@@ -48,11 +48,37 @@
       </el-row>
     </div>
     <div class="mapDataRight">
+      <div class="maptopSty">
+        <!-- 年 -->
+        <div class="yearD">
+          <cityPicker
+            :level="jishuTime"
+            :selectpattern="selectpatternTime"
+            :city-data="cityDataTime"
+            :default-city="cityDefaultNameTime"
+            @choice-caller="choiceCallerTime"
+            @visible-change="changesInputStu"
+          ></cityPicker>
+        </div>
+        <!-- 月 --> <!-- 季 -->
+        <div class="monthD">
+           <cityPicker
+            :level="jishuTime"
+            :selectpattern="selectMonth"
+            :city-data="monthDatas"
+            :default-city="monthData"
+            @choice-caller="monthDataState"
+            @visible-change="monthDataChange"
+          ></cityPicker>
+        </div>
+      </div>
       <div ref="mapRefs"></div>
     </div>
   </div>
 </template>
 <script>
+// 引入下拉组件
+import cityPicker from '@/components/cityPicker/CityPicker.vue'
 // 引入数据计算js用于机选渲染的数据
 import ComputedData from '../../assets/js/computeddata'
 import china from 'echarts/map/json/china.json'
@@ -62,8 +88,13 @@ echarts.registerMap('china', china)
 require('echarts/theme/shine')
 export default {
   name: 'mapData',
+  components: {
+    cityPicker: cityPicker
+  },
   data () {
     return {
+      // 控制下拉框显示隐藏
+      isHideProp: true,
       // 左侧当前默认
       defaultSelectLies: null,
       // 右侧默认显示数据
@@ -159,7 +190,41 @@ export default {
           }
         ]
       },
-      myEchartsObj: null// 图表渲染对象
+      myEchartsObj: null, // 图表渲染对象
+      // 栏目级数
+      jishuTime: 1,
+      // 默认显示栏目
+      cityDefaultNameTime: '2019年',
+      // 筛选数据
+      selectpatternTime: [
+        {
+          field: 'userProvinceId',
+          placeholder: '2019年'
+        }
+      ],
+      // 栏目数据   结构不可变
+      cityDataTime: [
+        { 'id': '110000', 'name': '1985年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
+        { 'id': '110000', 'name': '1986年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
+        { 'id': '110000', 'name': '1987年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
+        { 'id': '110000', 'name': '2019年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
+      ],
+      // 默认选中月
+      monthData: '1月',
+      // 筛选数据月
+      selectMonth: [
+        {
+          field: 'userProvinceId',
+          placeholder: '1月'
+        }
+      ],
+      // 月 结构不可变
+      monthDatas: [
+        { 'id': '110000', 'name': '1月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
+        { 'id': '110000', 'name': '2月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
+        { 'id': '110000', 'name': '3月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
+        { 'id': '110000', 'name': '4月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
+      ]
     }
   },
   methods: {
@@ -246,6 +311,21 @@ export default {
       // 绘制图表
       this.myEchartsObj.setOption(this.option, true)
       this.myEchartsObj.resize()
+    },
+    // 被选中时触发
+    choiceCallerTime (resu) {
+      console.log(resu)
+      console.log(this.cityDefaultName)
+    },
+    changesInputStu () {
+      console.log(12569)
+    },
+    monthDataState (resu) {
+      console.log(resu)
+      console.log(this.cityDefaultName)
+    },
+    monthDataChange () {
+      console.log(12569)
     }
   },
   mounted () {
@@ -278,9 +358,23 @@ export default {
     background-color: #ffffff;
     box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
     border: 1px solid red;
-    &>div{
-      width:100%;
-      min-height: 44.5rem;
+    & > div:nth-child(2) {
+      width: 100%;
+      min-height: 50.875rem;
+    }
+    & > .maptopSty {
+      width: 100%;
+      height:4rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      & > .yearD {
+        margin:0 2rem;
+      }
+      & > .monthD {
+        margin:0 2rem;
+      }
     }
   }
 }
diff --git a/src/components/nav/Nav.vue b/src/components/nav/Nav.vue
index 5c97e8d..ef3c5d0 100644
--- a/src/components/nav/Nav.vue
+++ b/src/components/nav/Nav.vue
@@ -56,7 +56,7 @@
           </div>
           <div>
             <img :src="imageUrl.userpwds" alt />
-            <input type="text" placeholder="请输入密码" v-model="userpwd" />
+            <input type="password" placeholder="请输入密码" v-model="userpwd" />
           </div>
           <div>
             <input type="text" placeholder="请输入验证码" v-model="useryzm" />
@@ -184,7 +184,12 @@ export default {
               localStorage.setItem('token', 'Bearer ' + res.data.data.token)
               // 登录状态
               localStorage.setItem('userLogin', true)
-              this.$router.go(0)
+              console.log(this.$route, '000111')
+              if (this.$route.path === '/') {
+                this.$router.go(0)
+              } else {
+                this.$router.push({ path: '/' })
+              }
             }
           }).catch((fail) => {
             console.log(fail)
@@ -278,7 +283,7 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 10;
+  z-index: 1000;
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.28);
diff --git a/src/components/screenCom/ScreenCom.vue b/src/components/screenCom/ScreenCom.vue
new file mode 100644
index 0000000..ae1d379
--- /dev/null
+++ b/src/components/screenCom/ScreenCom.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="screenCom">
+    <div class="container">
+      <div class="top">
+        <span>筛选</span>
+        <img :src="imgUrl" alt @click="$store.state.selcettWindowState = false" />
+      </div>
+      <!-- 行列转换 -->
+      <div class="rowCol">
+        <input type="radio" value="hang" v-model="selectAudio" />行
+        <input type="radio" value="lie" v-model="selectAudio" />列
+      </div>
+      <!-- 主要筛选框 -->
+      <div class="mainKuang">
+        <div class="left">
+          <div
+            v-for="(item,index) in dataList"
+            :key="index"
+            :class="{active:item.state}"
+            @click="changeBgcolor(index)"
+          >{{item.text}}</div>
+        </div>
+        <div class="center1">
+          <div>
+            <div>
+              <input type="radio" value="大于(>)" v-model="selectChange" />
+              {{datarts.list1}}
+            </div>
+            <div>
+              <input type="radio" value="小于(<)" v-model="selectChange" />
+              {{datarts.list2}}
+            </div>
+            <div>
+              <input type="radio" value="大于等于(>=)" v-model="selectChange" />
+              {{datarts.list3}}
+            </div>
+            <div>
+              <input type="radio" value="小于等于(<=)" v-model="selectChange" />
+              {{datarts.list4}}
+            </div>
+          </div>
+          <div>
+            数量：
+            <input type="text" v-model="nums" placeholder="请输入数量" />
+          </div>
+        </div>
+        <div class="center2">
+          <div>{{datarts.list5}}</div>
+          <div>{{datarts.list6}}</div>
+        </div>
+        <div class="right">
+          <textarea v-model="textareas"></textarea>
+        </div>
+      </div>
+      <!-- 确定取消 -->
+      <div class="bottom">
+        <div>确定</div>
+        <div @click="$store.state.selcettWindowState = false">取消</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'screenCom',
+  data () {
+    return {
+      imgUrl: require('../../../static/nav/deleteImg.png'),
+      selectAudio: 'hang',
+      dataList: [
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        },
+        {
+          text: 'h就开始',
+          state: false
+        }
+      ],
+      datarts: {
+        list1: '大于(>)',
+        list2: '小于(<)',
+        list3: '大于等于(>=)',
+        list4: '小于(<=)',
+        list5: '>',
+        list6: '<'
+      },
+      selectChange: '大于(>)',
+      textareas: ''
+    }
+  },
+  methods: {
+    changeBgcolor (ind) {
+      this.dataList.forEach((item, index) => {
+        index === ind ? item.state = true : item.state = false
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.screenCom {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .container {
+    width: 69.125rem;
+    height: 44.75rem;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    & > .top {
+      margin-top: 1.375rem;
+      width: 64.125rem;
+      height: 3.875rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 0.125rem solid #bdbdbd;
+      & > span {
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > img {
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+    }
+    & > .rowCol {
+      width: 64.125rem;
+      height: 4.125rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      & > input {
+        margin: 0 0.75rem;
+      }
+    }
+    & > .mainKuang {
+      width: 64.125rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      & > .left {
+        width: 18.0625rem;
+        height: 22.875rem;
+        border: 0.0625rem solid #bdbdbd;
+        overflow: auto;
+        & > div {
+          width: 100%;
+          height: 2.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: flex-start;
+        }
+        & > div:hover {
+          cursor: pointer;
+        }
+        & > .active {
+          background-color: deepskyblue;
+          color: #fff;
+        }
+      }
+      & > .center1 {
+        width: 17.25rem;
+        height: 22.875rem;
+        & > div:nth-child(1) {
+          width: 17.25rem;
+          height: 19.875rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-start;
+          border: 0.0625rem solid #bdbdbd;
+          & > div {
+            margin: 0.5rem 0;
+          }
+        }
+        & > div:nth-child(2) {
+          width: 100%;
+          height: 3rem;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      & > .center2 {
+        width: 3rem;
+        height: 22.875rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        & > div {
+          width: 2.5rem;
+          height: 2.125rem;
+          background-color: #52b6e3;
+          border-radius: 0.3125rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          color: #fff;
+          font-size: 1.2rem;
+        }
+      }
+      & > .right {
+        & > textarea {
+          width: 20.625rem;
+          height: 22.875rem;
+        }
+      }
+    }
+    & > .bottom {
+      width: 64.125rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      & > div:nth-child(1) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > div:nth-child(2) {
+        width: 15.625rem;
+        height: 3.1875rem;
+        border: solid 0.125rem #dbdbdb;
+        border-radius: 0.3125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #666666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      &>div{
+        margin:3rem 1.2rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/store.js b/src/store.js
index 3c7424e..3dbb385 100644
--- a/src/store.js
+++ b/src/store.js
@@ -5,7 +5,20 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
+    // 定义一个窗口状态（新增指标）
+    insertWindowState: false,
+    // 定义一个筛选窗口状态
+    selcettWindowState: false,
+    // 定义一个编辑窗口状态
+    editWindowState: false,
+    // 定义一个添加收藏的窗口状态
+    addCollectState: false,
+    // 指标解释状态
+    labelExplainState: false,
+    // 指标解释数据
+    labelExplainData: '这是指标解释使劲儿发红包健康撒大部分更健康',
+    // 维度转换状态
+    dimensionState: false
   },
   mutations: {
 
diff --git a/src/views/cs.vue b/src/views/cs.vue
index 3ead2ff..bdae1ab 100644
--- a/src/views/cs.vue
+++ b/src/views/cs.vue
@@ -1,36 +1,100 @@
 <template>
-  <div>
-    <input type="text" v-model="iphones" />
-    <button @click="sendInfor">发送</button>
+  <div class="native">
+    <div class="nav1">
+      <div
+        v-for="(item1,index1) in nativeData1"
+        :key="index1"
+        :class="{bgcolor:item1.state}"
+        @click="changeData('native1',index1)"
+      >{{item1.text}}</div>
+    </div>
+    <div class="nav2">
+      <div
+        v-for="(item2,index2) in nativeData2"
+        :key="index2"
+        :class="{bgcolor:item2.state}"
+        @click="changeData('native2',index2)"
+      >{{item2.text}}</div>
+    </div>
+    <div class="nav3">
+      <div
+        v-for="(item3,index3) in nativeData3"
+        :key="index3"
+        :class="{bgcolor:item3.state}"
+        @click="changeData('native3',index3)"
+      >{{item3.text}}</div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'cs',
   data () {
     return {
-      iphones: ''
+      nativeData1: [
+        { text: '导航1-1', state: true },
+        { text: '导航1-2', state: false },
+        { text: '导航1-3', state: false }
+      ],
+      nativeData2: [
+        { text: '导航2-1', state: true },
+        { text: '导航2-2', state: false },
+        { text: '导航2-3', state: false }
+      ],
+      nativeData3: [
+        { text: '导航3-1', state: true },
+        { text: '导航3-2', state: false },
+        { text: '导航3-3', state: false }
+      ]
     }
   },
   computed: {
   },
   methods: {
-    sendInfor () {
-      this.$axios({
-        method: 'POST',
-        url: 'Main/Verification',
-        data: {
-          Verification: this.iphones
-        },
-        then: (res) => {
-          console.log(res)
-        },
-        catch: (e) => {
-        }
-      })
+    changeData (lab, states) {
+      switch (lab) {
+        case 'native1':
+          this.nativeData1.forEach((item, index) => {
+            index === states ? item.state = true : item.state = false
+          })
+          console.log(this.selectNow)
+          break
+        case 'native2':
+          this.nativeData2.forEach((item, index) => {
+            index === states ? item.state = true : item.state = false
+          })
+          break
+        case 'native3':
+          this.nativeData3.forEach((item, index) => {
+            index === states ? item.state = true : item.state = false
+          })
+          break
+      }
     }
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
+.native {
+  width: 100%;
+  & > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    & > div {
+      width: 120px;
+      height: 60px;
+      border: 1px solid #bdbdbd;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+    & > .bgcolor {
+      background-color: #0dbc79;
+    }
+  }
+}
 </style>
diff --git a/src/views/datasweb/Datasweb.vue b/src/views/datasweb/Datasweb.vue
index c4a1565..e1413ec 100644
--- a/src/views/datasweb/Datasweb.vue
+++ b/src/views/datasweb/Datasweb.vue
@@ -183,6 +183,7 @@
                 :indStatic="indStatic"
                 :chartsStatusMegger="chartsStatusMegger"
                 :defaultDataRight="defaultDataRight"
+                @comTime="comTime"
               ></ChartsCont>
             </div>
             <div class="container">
@@ -219,6 +220,18 @@
     </section>
     <!-- 页脚信息 -->
     <FooterInfors></FooterInfors>
+    <!-- 指标解释 -->
+    <LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
+    <!-- 新增指标 -->
+    <InsertLabel v-if="$store.state.insertWindowState"></InsertLabel>
+    <!-- 筛选 -->
+    <ScreenCom v-if="$store.state.selcettWindowState"></ScreenCom>
+    <!-- 编辑 -->
+    <EditCom v-if="$store.state.editWindowState"></EditCom>
+    <!-- 添加收藏 -->
+    <AddCollect v-if="$store.state.addCollectState"></AddCollect>
+    <!-- 维度转换 -->
+    <Dimension v-if="$store.state.dimensionState"></Dimension>
   </div>
 </template>
 
@@ -239,6 +252,18 @@ import ChartsCont from '@/components/chartsCont/ChartsCont.vue'
 import AdvancedQuery from '@/components/advancedQuery/AdvancedQuery.vue'
 // 引入数据地图组件
 import MapData from '@/components/mapData/MapData.vue'
+// 新增指标组件
+import InsertLabel from '@/components/insertLabel/InsertLabel.vue'
+// 筛选
+import ScreenCom from '@/components/screenCom/ScreenCom.vue'
+// 编辑
+import EditCom from '@/components/editCom/EditCom.vue'
+// 添加收藏
+import AddCollect from '@/components/addCollect/AddCollect.vue'
+// 指标解释
+import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
+// 维度转换
+import Dimension from '@/components/dimension/Dimension.vue'
 
 export default {
   name: 'index',
@@ -250,7 +275,13 @@ export default {
     ChartsCut: ChartsCut,
     ChartsCont: ChartsCont,
     AdvancedQuery: AdvancedQuery,
-    MapData: MapData
+    MapData: MapData,
+    InsertLabel: InsertLabel,
+    ScreenCom: ScreenCom,
+    EditCom: EditCom,
+    AddCollect: AddCollect,
+    LabelExplain: LabelExplain,
+    Dimension: Dimension
   },
   data () {
     return {
@@ -357,7 +388,12 @@ export default {
       },
       leftCateData: null,
       // 简单查询、高级查询、数据地图切换状态(simpleness（简单）、advanced（高级） 、map（地图）)
-      cutStateSeach: 'simpleness'
+      cutStateSeach: 'simpleness',
+      // 下来帅选的数据
+      downLaSelect: {
+        area: '',
+        label: ''
+      }
     }
   },
   methods: {
@@ -458,6 +494,7 @@ export default {
           this.cutStateSeach = 'map'
           break
         case 3:
+          this.$store.state.addCollectState = true
           break
         case 4:
           break
@@ -491,14 +528,17 @@ export default {
     clickCate (hierarchy, ind, textType) {
       switch (textType) {
         case '新增指标':
+          this.$store.state.insertWindowState = true
           break
         case '筛选':
+          this.$store.state.selcettWindowState = true
           break
         case '恢复':
           break
         case '清除空行空列':
           break
         case '编辑':
+          this.$store.state.editWindowState = true
           break
         case '转置':
           console.log(100000)
@@ -506,6 +546,7 @@ export default {
           console.log(this.chartsStatusMegger.transState)
           break
         case '维度转换':
+          this.$store.state.dimensionState = true
           break
         case '保存默认':
           break
@@ -690,6 +731,9 @@ export default {
       })
       this.defaultDataRight = dataDome
       console.log(this.defaultDataRight, '1250')
+    },
+    comTime (res) {
+      this.downLaSelect.time = res
     }
   },
   computed: {
diff --git a/src/views/personalCenter/index.json b/src/views/personalCenter/index.json
new file mode 100644
index 0000000..5356be5
--- /dev/null
+++ b/src/views/personalCenter/index.json
@@ -0,0 +1,4 @@
+{
+  "khjj": "jsdbhjh",
+  "hgas": "hghdfg57457"
+}
\ No newline at end of file
diff --git a/static/data/bt_counter.jpg b/static/data/bt_counter.jpg
new file mode 100644
index 0000000..33e2c98
Binary files /dev/null and b/static/data/bt_counter.jpg differ