From 0fcf0f9036c6ea78855486ea528924498f166c83 Mon Sep 17 00:00:00 2001
From: kimi <kimi42345@gmail.com>
Date: 星期二, 11 二月 2020 14:18:45 +0800
Subject: [PATCH] 0211
---
src/views/Overview.vue | 427 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 338 insertions(+), 89 deletions(-)
diff --git a/src/views/Overview.vue b/src/views/Overview.vue
index 337d45b..ab7a7cd 100644
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
@@ -2,103 +2,120 @@
<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 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 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">
+ <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;">
+ <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;">
<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: 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>
</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: [],
+
+ 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 = [{
+ name: "鏂囦欢鍚嶇О1",
+ type: "isfile",
+ path: ""
+ },
+ {
+ name: "鏂囦欢鍚嶇О2",
+ type: "isfile",
+ path: ""
+ },
+ {
+ name: "鏂囦欢澶瑰悕绉�",
+ type: "isfiles",
+ path: ""
+ },
+ ];
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) {
var item = {
- value:one.id,
- label:one.name
- }
+ value: one.id,
+ label: one.name
+ }
me.options.push(item);
});
}
@@ -107,53 +124,283 @@
})
},
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_ => {
+ console.log(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 => {
+ console.log(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_ => {
+ console.log(data_);
+ if (data_.data.success) {
+
+ var datas = data_.data.data;
+ this.fileList = datas;
+ this.fileLevel--;
+ }
+ }).catch(error => {
+ console.log(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;
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);
+ console.log(data_);
+ if (data_.data.success) {
+ let result = data_.data.data;
+ me.initChart(result.option);
+ me.userList = result.users;
+ 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;
+ }
+ }).catch(error => {
+ console.log(error);
})
-
- }
-
- }
-
+
+ },
+ initChart(datas) {
+ this.myChart.setOption({
+ backgroundColor: '#FFF',
+ grid: {
+ top: '12%',
+ bottom: '19%',
+ left: '8%',
+ 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: [
+ '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)'
+ }
+ }
+ },
+ 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: [
+ 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: [
+ 20, 17.5, 15, 12.5, 10,
+ 7.5, 5, 2.5, 0
+ ]
+ }
+ ]
+ });
+ },
+
+ },
+
}
</script>
@@ -162,16 +409,18 @@
text-align: left;
background-color: #dee0e2;
}
-
- .files_div{
+
+ .files_div {
height: 90%;
overflow: auto;
}
+
.file_div {
width: 30%;
height: 20px;
float: left;
}
+
.file_div :hover {
cursor: pointer;
font-weight: bold;
--
Gitblit v1.8.0