From 0f49a23a9d4dc7d3eb9a7309f8cd85a316cd4d97 Mon Sep 17 00:00:00 2001
From: zhangyanpeng <bob.zhang@highdatas.com>
Date: 星期四, 30 四月 2020 17:39:22 +0800
Subject: [PATCH] 功能调整
---
src/views/Overview.vue | 449 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 356 insertions(+), 93 deletions(-)
diff --git a/src/views/Overview.vue b/src/views/Overview.vue
index 337d45b..5183399 100644
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
@@ -1,159 +1,418 @@
<template>
- <div class="class_overview">
+ <div class="class_overview" >
<div style="float: left; width: 100%; height: 50px;">
<span>璇烽�夋嫨椤圭洰锛�</span>
- <el-select @change="selectChange_" 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>
-
-
+
+
</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>
-
-
-
+ <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>
-
-
export default {
-
+
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() {
this.initSelect();
-
- let fileList1 = [
- {name: "鏂囦欢鍚嶇О1", type: "isfile", path: ""},
- {name: "鏂囦欢鍚嶇О2", type: "isfile", path: ""},
- {name: "鏂囦欢澶瑰悕绉�", type: "isfiles", path: ""},
- ];
+ 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_ => {
- console.log(data_);
- if(data_.data.success){
+ if (data_.data.success) {
me.options = [];
var datas = data_.data.data;
- datas.forEach(function(one){
+ datas.forEach(function(one) {
+ if (!me.value) {
+ me.value = one.id;
+ }
+
var item = {
- value:one.id,
- label:one.name
- }
+ value: one.id,
+ label: one.name
+ }
me.options.push(item);
});
}
+ me.selectChange_();
}).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 {
+ 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 --;
+ 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 => {
+ })
- let fileList2 = [
- {name: "鏂囦欢鍚嶇О1", type: "isfile", path: ""},
- {name: "鏂囦欢鍚嶇О2", type: "isfile", path: ""},
- {name: "鏂囦欢澶瑰悕绉�", type: "isfiles", path: ""},
- ];
- this.fileList = fileList2;
},
-
+
Cancel() {
-
+
},
selectChange_(val) {
+ let me = this;
+ const loading = this.$loading({
+ lock: true,
+ text: '姝ｅ湪鍔犺浇鏁版嵁',
+ });
let url = "/api/scheme/getSchemeInfo/" + this.value;
- this.$axios.get(url,{
-
+ this.$axios.get(url, {
+
}).then(data_ => {
- console.log(data_);
- // 鍥�
- // 璁板綍
- // 浜哄憳
- // 璇︽儏
- //鐩綍
- }).catch(error =>{
- console.log(error);
+ 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>
@@ -162,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;
--
Gitblit v1.8.0