kimi
2020-02-12 2ef590774e2d655cdc43ee2c6fa4c674ac4d882d
src/views/Overview.vue
@@ -9,24 +9,26 @@
      </div>
      <div style="float: left; margin-left: 1%; width: 69%; height: 80vh; ">
         <div class="z_shadow" style="float: left; margin: 10px; margin-top: 0px; width: 46%; height: 43%; border: 1px solid #e4eef9;">
      <div style="float: left; margin-left: 1%; width: 69%; height: 75vh; ">
         <div class="z_shadow" style="float: left; margin: 10px; margin-top: 0px; width: 46%; height: 58%; border: 1px solid #e4eef9;">
            <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
         </div>
         <div class="z_shadow" style="float: left; margin: 10px; margin-top: 0px; width: 46%; height: 43%; border: 1px solid #e4eef9;overflow: auto;padding: 5px;">
            <el-timeline :reverse="reverse">
         <div class="z_shadow" style="float: left; margin: 10px;  margin-top: 0px; width: 46%; height: 58%; border: 1px solid #e4eef9;overflow: auto;padding: 5px;">
            <el-timeline :reverse="reverse"  style="margin-top: 30px;">
               <el-timeline-item v-for="(deal, index) in deals" :key="index" :timestamp="deal.createTime">
                  {{deal.desp}}
               </el-timeline-item>
            </el-timeline>
         </div>
         <div class="z_shadow" style="float: left; margin: 10px; width: 46%; height: 43%; border: 1px solid #e4eef9;">
         <div class="z_shadow" style="float: left; margin: 10px; width: 46%; height: 33%; border: 1px solid #e4eef9;">
            <el-row :gutter="20">
              <el-col :span="6"  v-for="(user, index) in userList" :key="index">111</el-col>
              <el-col :span="6"  v-for="(oneUser, index) in userList" :key="index"><div class="grid-content bg-purple">
              <i class="el-icon-user-solid"></i>
              <span>{{oneUser.name}}</span></div></el-col>
            </el-row>
         </div>
         <div class="z_shadow" style="float: left; margin: 10px; padding: 10px; box-sizing: border-box; width: 46%; height: 43%; border: 1px solid #e4eef9;">
         <div class="z_shadow" style="float: left; margin: 10px; padding: 10px; box-sizing: border-box; width: 46%; height: 33%; border: 1px solid #e4eef9;">
            <h3 style="margin: 0px;">文档库</h3>
            <div class="files_div">
               <div style="width: 0px; height: 0px;">
@@ -44,11 +46,16 @@
            </div>
         </div>
      </div>
      <div class="z_shadow" style="float: right; margin-right: 1%; width: 28%; height: 70vh; border: 1px solid #e4eef9;"></div>
      <div class="z_shadow" style="float: right; margin-right: 1%; padding: 10px; box-sizing: border-box; width: 28%; height: 75vh; border: 1px solid #e4eef9; overflow: auto;">
         <h3 style="margin: 0px;">项目概览({{usedCnt}}/{{totalCnt}})</h3>
         <div v-for="(type_itm, k_) in task_itm" :key="k_">
            <h3>{{k_+1}}、{{type_itm.name}} ({{type_itm.usedCnt}}/{{type_itm.totalCnt}})<span style="font-size: 12px; color: #409EFF;">{{type_itm.state}} </span></h3>
            <div>
               <span>{{type_itm.desp}}</span>
            </div>
         </div>
      </div>
   </div>
</template>
@@ -63,6 +70,11 @@
            dialog_1: false,
            fileLevel: 0,
            fileList: [],
            usedCnt: 0,
            totalCnt: 0,
            task_itm: [
            ],
            myChart: undefined,
            userList: [],
            grandPa:"",
@@ -185,6 +197,8 @@
                  let result = data_.data.data;
                  me.initChart(result.option);
                  me.userList = result.users;
                  me.usedCnt = result.usedCnt;
                  me.totalCnt = result.totalCnt;
                  result.paths = result.paths.map(el => {
                     el.path = decodeURI(el.path);
                     return el;
@@ -192,16 +206,30 @@
                  result.record = result.record.map(el => {
                     var imoment = this.$moment(el.createTime);
                     // 格式化成,年月日
                     let iformat = imoment.format('YYYY-MM-DD');
                     let iformat = imoment.format('YYYY-MM-DD HH:mm:ss');
                     el.createTime = iformat;
                     if(!el.desp) {
                        el.desp = "暂无描述";
                     }
                     return el;
                  });
                  result.scheme = result.scheme.map(el => {
                     if(el.finish) {
                        el.state="已结束";
                     }else if(el.delay) {
                        el.state="已延期";
                     }else if(el.edit) {
                        el.state="待启动";
                     }else {
                        el.state="进行中";
                     }
                     return el;
                  });
                  me.fileList = result.paths;
                  me.scheme = result.scheme;
                  me.task_itm = result.scheme;
                  me.deals = result.record;
               }
            }).catch(error => {
               console.log(error);
@@ -209,12 +237,13 @@
         },
         initChart(datas) {
            this.myChart.setOption({
               backgroundColor: '#FFF',
               grid: {
                  top: '12%',
                  bottom: '19%',
                  left: '8%',
                  bottom: '18%',
                  left: '12%',
                  right: '8%'
               },
               tooltip: {
@@ -244,9 +273,10 @@
                     show: false,
                     alignWithLabel: true
                  },
                  data: [
                     '12-3', '12-4', '12-5', '12-6', '12-7', '12-8', '12-9', '12-10', '12-11'
                  ]
                  data: datas.xAxis,
                  // [
                  //    '12-3', '12-4', '12-5', '12-6', '12-7', '12-8', '12-9', '12-10', '12-11'
                  // ]
               },
               yAxis: {
                  axisLine: {
@@ -269,6 +299,21 @@
                     }
                  }
               },
               dataZoom: [{
                         "show": true,
                         "height": 16,
                         "xAxisIndex": [0],
                         bottom:'3%',
                          "start": 0,
                          "end": 30,
                         handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                         handleSize: '110%',
                         handleStyle:{
                           color:"#d3dee5",
                         },
                         textStyle:{ color:"#fff"},
                         borderColor:"#90979c"
                       }],
               series: [{
                     name: "实际",
                     type: 'line',
@@ -322,9 +367,10 @@
                           }
                        }
                     },
                     data: [
                        20, 18, 17, 10, 7, 4,
                     ]
                     data: datas.yAxis2,
                     // [
                     //    20, 18, 17, 10, 7, 4,
                     // ]
                  },
                  {
                     name: "参考",
@@ -366,10 +412,11 @@
                        }
                     },
                     data: [
                        20, 17.5, 15, 12.5, 10,
                        7.5, 5, 2.5, 0
                     ]
                     data: datas.yAxis1,
                     // [
                     //    20, 17.5, 15, 12.5, 10,
                     //    7.5, 5, 2.5, 0
                     // ]
                  }
               ]
            });
@@ -388,6 +435,8 @@
   .files_div {
      height: 90%;
      margin-top: 10px;
      margin-left: 10px;
      overflow: auto;
   }