config

zhangyanpeng

2020-02-11 4b072772ea5c85a63388fa5e52f6561f187e0d23

 src/views/Overview.vue

@@ -2,7 +2,7 @@
   <div class="class_overview">
      <div style="float: left; width: 100%; height: 50px;">
         <span>请选择项目：</span>
         <el-select v-model="value" placeholder="请选择" size="small">
         <el-select @change="selectChange_" filterable v-model="value" placeholder="请选择" size="small">
            <el-option
               v-for="item in options"
               :key="item.value"
@@ -11,68 +11,170 @@
            </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 style="float: left; margin: 10px;  width: 46%; height: 43%; border: 1px solid #42B983;"></div>
         <div style="float: left; margin: 10px; width: 46%; height: 43%; border: 1px solid #42B983;"></div>
         <div style="float: left; margin: 10px; width: 46%; height: 43%; border: 1px solid #42B983;"></div>
         <div style="float: left; margin: 10px; width: 46%; height: 43%; border: 1px solid #42B983;"></div>
      <div style="float: left; margin-left: 1%; width: 69%; height: 70vh; ">
         <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;">
            <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>
               </div>
               <div v-if="fileLevel > 0">
                  <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 style="float: right; margin-right: 1%; width: 28%; height: 80vh; border: 1px solid #42B983;"></div>
      <div class="z_shadow" style="float: right; margin-right: 1%; padding: 10px; box-sizing: border-box; width: 28%; height: 70vh; border: 1px solid #e4eef9; overflow: auto;">
         <h3 style="margin: 0px;">项目概览</h3>
         <div v-for="(type_itm, k_) in task_itm" :key="k_">
            <h3>{{k_+1}}、{{type_itm.name}} <span style="font-size: 12px; color: #409EFF;">{{type_itm.state}} </span></h3> 
            <div>
               <span>{{type_itm.desp}}</span>
            </div>
         </div>
      </div>
      
      
      <el-dialog @close="Cancel" width="70%" top="50px" :visible.sync="dialog_1" append-to-body>
        <newProject @closeNewProject="closeNewProject"></newProject>
      </el-dialog>
		
      
   </div>
</template>

<script>
   import newProject from '../components/popup/newProject.vue'
	
   
   export default {
      components: {
        newProject
      },
		
      data() {
         return {
            options: [
               {
                  value: '选项1',
                  label: '黄金糕'
                  label: '项目1'
               }, {
                  value: '选项2',
                  label: '双皮奶'
                  label: '项目2'
               }, {
                  value: '选项3',
                  label: '蚵仔煎'
                  label: '项目3'
               }, {
                  value: '选项4',
                  label: '龙须面'
                  label: '项目4'
               }, {
                  value: '选项5',
                  label: '北京烤鸭'
                  label: '项目5'
               }
            ],
            value: '',
            dialog_1: false,
            fileLevel: 0,
            fileList: [],
            
            task_itm: [
                {'id': "111_1", 'name': "立题服务", desp: "描述看到静安寺", 'state': "进行中"}, //
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
                {'id': "111_2", 'name': "方案开发服务", desp: "描述看到静安寺", 'state': "进行中"}, 
					
            ]
         }
      },
      mounted() {
         this.initSelect();
			
         let fileList1 = [
               {name: "文件名称1", type: "isfile", path: ""},
               {name: "文件名称2", type: "isfile", path: ""},
               {name: "文件夹名称", type: "isfiles", path: ""},
            ];
         this.fileList = fileList1;
      },
		
      methods: {
         addProject() {
            this.dialog_1 = true;
				
         initSelect() {
            var me = this;
            this.$axios.get("/api/scheme/all")
               .then(data_ => {
                  console.log(data_);
                  if(data_.data.success){
                     me.options = [];
                     var datas = data_.data.data;
                     datas.forEach(function(one){
                        var item = {
                           value:one.id,
                           label:one.name
                        } 
                        me.options.push(item);
                     });
                  }
               }).catch(error => {
                  console.log(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 {
               //下载
               this.$refs.frame_export.src = "";
            }
         },
         upFile_click() {
            this.fileLevel --;
				
            let fileList2 = [
               {name: "文件名称1", type: "isfile", path: ""},
               {name: "文件名称2", type: "isfile", path: ""},
               {name: "文件夹名称", type: "isfiles", path: ""},
            ];
            this.fileList = fileList2;
         },
			
         Cancel() {
            
         },
         closeNewProject() {
            this.dialog_1 = false
         },
         selectChange_(val) {
            let url = "/api/scheme/getSchemeInfo/" + this.value;
            this.$axios.get(url,{
				  
            }).then(data_ => {
              console.log(data_);
               // 图
               // 记录
               // 人员
               // 详情
               //目录
            }).catch(error =>{
                console.log(error);
            })
				
         }
			
      }
      
   }
@@ -84,4 +186,17 @@
      background-color: #dee0e2;
   }
   
   .files_div{
      height: 90%;
      overflow: auto;
   }
   .file_div {
      width: 30%;
      height: 20px;
      float: left;
   }
   .file_div :hover {
      cursor: pointer;
      font-weight: bold;
   }
</style>