| | |
| | | <template> |
| | | <div class="class_overview"> |
| | | <div class="class_overview" > |
| | | <div style="float: left; width: 100%; height: 50px;"> |
| | | <span>请选择项目:</span> |
| | | <el-select @change="selectChange_" filterable 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" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | |
| | | |
| | | </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 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 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="(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;"> |
| | |
| | | </div> |
| | | </div> |
| | | </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 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}} <span style="font-size: 12px; color: #409EFF;">{{type_itm.state}} </span></h3> |
| | | <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> |
| | |
| | | dialog_1: false, |
| | | fileLevel: 0, |
| | | fileList: [], |
| | | |
| | | usedCnt: 0, |
| | | totalCnt: 0, |
| | | task_itm: [ |
| | | |
| | | ], |
| | |
| | | mounted() { |
| | | this.initSelect(); |
| | | this.myChart = this.$echarts.init(document.getElementById('myChart')) |
| | | let fileList1 = [{ |
| | | name: "文件名称1", |
| | | type: "isfile", |
| | | path: "" |
| | | }, |
| | | { |
| | | name: "文件名称2", |
| | | type: "isfile", |
| | | path: "" |
| | | }, |
| | | { |
| | | name: "文件夹名称", |
| | | type: "isfiles", |
| | | path: "" |
| | | }, |
| | | ]; |
| | | let fileList1 = []; |
| | | this.fileList = fileList1; |
| | | this.initChart(); |
| | | //this.initChart(); |
| | | }, |
| | | |
| | | methods: { |
| | |
| | | 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) { |
| | | if (!me.value) { |
| | | me.value = one.id; |
| | | } |
| | | |
| | | var item = { |
| | | value: one.id, |
| | | label: one.name |
| | |
| | | me.options.push(item); |
| | | }); |
| | | } |
| | | me.selectChange_(); |
| | | }).catch(error => { |
| | | console.log(error); |
| | | }) |
| | | }, |
| | | file_click(file) { |
| | | if (!file.file) { |
| | | |
| | | |
| | | let url = "/api/file/child" ; |
| | | this.$axios.get(url,{ |
| | | params:{ |
| | |
| | | } |
| | | }) |
| | | .then(data_ => { |
| | | console.log(data_); |
| | | |
| | | if (data_.data.success) { |
| | | |
| | | var datas = data_.data.data; |
| | |
| | | |
| | | this.fileLevel++; |
| | | } |
| | | |
| | | }).catch(error => { |
| | | console.log(error); |
| | | }) |
| | | |
| | | } else { |
| | |
| | | } |
| | | }) |
| | | .then(data_ => { |
| | | console.log(data_); |
| | | if (data_.data.success) { |
| | | |
| | | var datas = data_.data.data; |
| | |
| | | this.fileLevel--; |
| | | } |
| | | }).catch(error => { |
| | | console.log(error); |
| | | }) |
| | | |
| | | }, |
| | |
| | | }, |
| | | 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_ => { |
| | | console.log(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; |
| | |
| | | me.fileList = result.paths; |
| | | me.task_itm = result.scheme; |
| | | me.deals = result.record; |
| | | loading.close(); |
| | | } |
| | | }).catch(error => { |
| | | console.log(error); |
| | | loading.close(); |
| | | }) |
| | | |
| | | }, |
| | |
| | | backgroundColor: '#FFF', |
| | | grid: { |
| | | top: '12%', |
| | | bottom: '19%', |
| | | left: '8%', |
| | | bottom: '18%', |
| | | left: '12%', |
| | | right: '8%' |
| | | }, |
| | | tooltip: { |
| | |
| | | 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: { |
| | |
| | | } |
| | | } |
| | | }, |
| | | 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', |
| | |
| | | } |
| | | } |
| | | }, |
| | | data: [ |
| | | 20, 18, 17, 10, 7, 4, |
| | | ] |
| | | data: datas.yAxis2, |
| | | // [ |
| | | // 20, 18, 17, 10, 7, 4, |
| | | // ] |
| | | }, |
| | | { |
| | | name: "参考", |
| | |
| | | |
| | | } |
| | | }, |
| | | 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 |
| | | // ] |
| | | } |
| | | ] |
| | | }); |
| | |
| | | |
| | | .files_div { |
| | | height: 90%; |
| | | margin-top: 10px; |
| | | margin-left: 10px; |
| | | overflow: auto; |
| | | } |
| | | |