2020-11-13

bob

2020-11-25 84326b11401f217cd483d13bc72cec4ffd5da7ce

 src/views/Overview.vue

@@ -1,131 +1,418 @@
<template>
   <div class="class_overview">
   <div class="class_overview"  >
      <div style="float: left; width: 100%; height: 50px;">
         <span>请选择项目：</span>
         <el-select v-model="value" placeholder="请选择" size="small">
            <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
         <el-select   @change="selectChange_" filterable v-model="value" placeholder="请选择" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
         </el-select>
			
         <el-button type="primary" style="float: right;" @click="addProject">新建项目</el-button>
			


      </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>
         <div class="z_shadow" style="float: left; margin: 10px; margin-top: 0px; width: 46%; height: 43%; border: 1px solid #e4eef9;"></div>
         <div class="z_shadow" style="float: left; margin: 10px; width: 46%; height: 43%; border: 1px solid #e4eef9;"></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 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: 58%; border: 1px solid #e4eef9;overflow: auto;padding: 5px;">
            <el-timeline   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: 33%; border: 1px solid #e4eef9;">
            <el-row :gutter="20">
              <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: 33%; border: 1px solid #e4eef9;">
            <h3 style="margin: 0px;">文档库</h3>
            <div class="files_div">
               <div style="width: 0px; height: 0px;">
                 <iframe ref="frame_export" style="width: 0px; height: 0px;"></iframe>
                  <iframe ref="frame_export" style="width: 0px; height: 0px;"></iframe>
               </div>
               <div v-if="fileLevel > 0">
                  <el-button  type="text" size="mini" @click="upFile_click">上一级</el-button>
                  <el-button type="text" size="mini" @click="upFile_click">上一级</el-button>
               </div>
               <div v-for="(file, k) in fileList" :key="k" @click="file_click(file)" class="file_div">
                  <i v-if="file.type==='isfiles'" class="el-icon-folder"></i>
                  <i v-else-if="file.type==='isfile'" class="el-icon-tickets"></i>
                  <span>{{file.name}}</span>
               </div>
					

            </div>
         </div>
      </div>
      <div class="z_shadow" style="float: right; margin-right: 1%; width: 28%; height: 70vh; border: 1px solid #e4eef9;"></div>
		
		
      <el-dialog @close="Cancel" width="70%" top="50px" :visible.sync="dialog_1" append-to-body>
        <newProject @closeNewProject="closeNewProject"></newProject>
      </el-dialog>
      <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>

<script>
   import newProject from '../components/popup/newProject.vue'
	
   export default {
      components: {
        newProject
      },

      data() {
         return {
            options: [
               {
                  value: '选项1',
                  label: '项目1'
               }, {
                  value: '选项2',
                  label: '项目2'
               }, {
                  value: '选项3',
                  label: '项目3'
               }, {
                  value: '选项4',
                  label: '项目4'
               }, {
                  value: '选项5',
                  label: '项目5'
               }
            ],
            options: [],
            deals: [],
            value: '',
            dialog_1: false,
            fileLevel: 0,
            fileList: [],
            usedCnt: 0,
            totalCnt: 0,
            task_itm: [
				 	
            ],
            myChart: undefined,
            userList: [],
            grandPa:"",
         }
      },
      mounted() {
         let fileList1 = [
               {name: "文件名称1", type: "isfile", path: ""},
               {name: "文件名称2", type: "isfile", path: ""},
               {name: "文件夹名称", type: "isfiles", path: ""},
            ];
         this.initSelect();
         this.myChart = this.$echarts.init(document.getElementById('myChart'))
         let fileList1 = [];
         this.fileList = fileList1;
         //this.initChart();
      },
		

      methods: {
         initSelect() {
            var me = this;
            this.$axios.get("/api/scheme/all")
               .then(data_ => {
                  if (data_.data.success) {
                     me.options = [];
                     var datas = data_.data.data;
                     datas.forEach(function(one) {
                        if (!me.value) {
                           me.value = one.id;
                        }
								
                        var item = {
                           value: one.id,
                           label: one.name
                        }
                        me.options.push(item);
                     });
                  }
                  me.selectChange_();
               }).catch(error => {
               })
         },
         file_click(file) {
            if (file.type == 'isfiles') {
               let fileList2 = [
                  {name: "子文件名称1", type: "isfile", path: ""},
                  {name: "子文件名称2", type: "isfile", path: ""},
                  {name: "子文件夹名称", type: "isfiles", path: ""},
               ];
               this.fileList = fileList2;
               this.fileLevel ++;
            }
            else {
            if (!file.file) {
					
               let url = "/api/file/child" ;
               this.$axios.get(url,{
                  params:{
                     path:encodeURI(file.path)
                  }
               })
                  .then(data_ => {
								
                     if (data_.data.success) {
								
                        var datas = data_.data.data;
                        this.fileList = datas;
                        if(datas.length > 0) {
                           this.grandPa = datas[0].grandPa;
                        }
								
                        this.fileLevel++;
                     }
							
                  }).catch(error => {
                  })

            } else {
               //下载
               this.$refs.frame_export.src = "";
               if (file.path) {
                  let url = "/api/api/file/downloadPath?path=" + encodeURI(file.path);
                  this.$refs.frame_export.src = url;
               }

            }
         },
         upFile_click() {
            this.fileLevel --;
				
            let fileList2 = [
               {name: "文件名称1", type: "isfile", path: ""},
               {name: "文件名称2", type: "isfile", path: ""},
               {name: "文件夹名称", type: "isfiles", path: ""},
            ];
            this.fileList = fileList2;
         },
         addProject() {
            this.dialog_1 = true;
            if(!this.grandPa) {
               this.$message({message:'请刷新界面后重试', type: 'warning'});
               return;
            }
            let url = "/api/file/child" ;
            this.$axios.get(url,{
               params:{
                  path:encodeURI(this.grandPa)
               }
            })
               .then(data_ => {
                  if (data_.data.success) {
							
                     var datas = data_.data.data;
                     this.fileList = datas;
                     this.fileLevel--;
                  }
               }).catch(error => {
               })
            
         },

         Cancel() {
				

         },
         closeNewProject() {
            this.dialog_1 = false
         selectChange_(val) {
            let me = this;
            const loading = this.$loading({
                      lock: true,
                      text: '正在加载数据',
                    });
            let url = "/api/scheme/getSchemeInfo/" + this.value;
            this.$axios.get(url, {

            }).then(data_ => {
               if (data_.data.success) {
                  window.console.log(data_);
                  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;
                  });
                  result.record = result.record.map(el => {
                     var imoment = this.$moment(el.createTime);
                     // 格式化成，年月日
                     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.task_itm = result.scheme;
                  me.deals = result.record;
                  loading.close();
               }
            }).catch(error => {
               loading.close();
            })

         },
      }
		
         initChart(datas) {
            this.myChart.setOption({
               backgroundColor: '#FFF',
               grid: {
                  top: '12%',
                  bottom: '18%',
                  left: '12%',
                  right: '8%'
               },
               tooltip: {
                  trigger: 'axis',
                  label: {
                     show: false
                  }
               },
               legend: {
                  data: ["参考", "实际"],
               },
               xAxis: {
                  boundaryGap: false, //默认，坐标轴留白策略
                  axisLine: {
                     show: false
                  },
                  splitLine: {
                     show: false
                  },
                  axisLabel: {
                     interval: 0, //隔几个显示
                     rotate: 30,
                     showMinLabel: true,
                     color: "#393C40"
                  },
                  axisTick: {
                     show: false,
                     alignWithLabel: true
                  },
                  data: datas.xAxis,
                  // [
                  //    '12-3', '12-4', '12-5', '12-6', '12-7', '12-8', '12-9', '12-10', '12-11'
                  // ]
               },
               yAxis: {
                  axisLine: {
                     show: false
                  },
                  splitLine: {
                     show: true,
                     lineStyle: {
                        type: 'dashed',
                        color: 'rgba(33,148,246,0.2)'
                     }
                  },
                  axisTick: {
                     show: false
                  },
                  splitArea: {
                     show: true,
                     areaStyle: {
                        color: 'rgb(245,250,254)'
                     }
                  }
               },
               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',
                     symbol: 'circle',
                     symbolSize: 7,
                     lineStyle: {
                        color: '#0c64eb',
                        shadowBlur: 12,
                        shadowColor: '#0c64eb',
                        shadowOffsetX: 1,
                        shadowOffsetY: 1
                     },
                     itemStyle: {
                        color: '#0c64eb',
                        borderWidth: 1,
                        borderColor: '#FFF'
                     },
                     label: {
                        show: false,
                        distance: 1,
                        emphasis: {
                           show: true,
                           offset: [25, -2],
                           //borderWidth:1,
                           // borderColor:'rgb(33,148,246)',
                           //formatter:'{bg|{b}\n数据量:{c}}',

                           color: '#FFF',
                           padding: [8, 20, 8, 6],
                           //width:60,
                           height: 36,
                           formatter: function(params) {
                              var name = params.name;
                              var value = params.data;
                              var str = name + '\n实际：' + value;
                              return str;
                           },
                           rich: {
                              bg: {

                                 width: 78,
                                 //height:42,
                                 color: '#FFF',
                                 padding: [20, 0, 20, 10]
                              },
                              br: {
                                 width: '100%',
                                 height: '100%'
                              }

                           }
                        }
                     },
                     data: datas.yAxis2,
                     // [
                     //    20, 18, 17, 10, 7, 4,
                     // ]
                  },
                  {
                     name: "参考",
                     type: 'line',
                     symbol: 'circle',
                     symbolSize: 7,
                     lineStyle: {
                        color: '#a6a8b6',
                        shadowBlur: 12,
                        shadowColor: '#a6a8b6',
                        shadowOffsetX: 1,
                        shadowOffsetY: 1
                     },
                     itemStyle: {
                        color: '#a6a8b6',
                        borderWidth: 1,
                        borderColor: '#FFF'
                     },
                     label: {
                        show: false,
                        distance: 1,
                        emphasis: {
                           show: true,
                           offset: [25, -2],
                           //borderWidth:1,
                           // borderColor:'rgb(33,148,246)',
                           //formatter:'{bg|{b}\n数据量:{c}}',

                           color: '#FFF',
                           padding: [8, 20, 8, 6],
                           //width:60,
                           height: 36,
                           formatter: function(params) {
                              var name = params.name;
                              var value = params.data;
                              var str = name + '\n参考：' + value;
                              return str;
                           },

                        }
                     },
                     data: datas.yAxis1,
                     // [
                     //    20, 17.5, 15, 12.5, 10,
                     //    7.5, 5, 2.5, 0
                     // ]
                  }
               ]
            });
         },

      },

   }
</script>

@@ -134,16 +421,20 @@
      text-align: left;
      background-color: #dee0e2;
   }
	
   .files_div{

   .files_div {
      height: 90%;
      margin-top: 10px;
      margin-left: 10px;
      overflow: auto;
   }

   .file_div {
      width: 30%;
      height: 20px;
      float: left;
   }

   .file_div :hover {
      cursor: pointer;
      font-weight: bold;