Skip to content

P
projectMgmtClient
Commit 565d7e66 by lixinming
Options

no message

parent 66ed32d1
Showing with 585 additions and 38 deletions
package-lock.json
...@@ -4086,11 +4086,22 @@ ...@@ -4086,11 +4086,22 @@
} }
}, },
"echarts": { "echarts": {
"version": "4.8.0", "version": "5.3.1",
"resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.8.0.tgz", "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.1.tgz",
"integrity": "sha1-ssHPuSKbE9No7hBPyO6mALV01MQ=", "integrity": "sha512-nWdlbgX3OVY0hpqncSvp0gDt1FRSKWn7lsWEH+PHmfCuvE0QmSw17pczQvm8AvawnLEkmf1Cts7YwQJZNC0AEQ==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.3.1"
},
"dependencies": {
"zrender": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
"integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
"requires": { "requires": {
"zrender": "4.3.1" "tslib": "2.3.0"
}
}
} }
}, },
"echarts-gl": { "echarts-gl": {
...@@ -13575,6 +13586,11 @@ ...@@ -13575,6 +13586,11 @@
} }
} }
}, },
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"tty-browserify": { "tty-browserify": {
"version": "0.0.0", "version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
......
package.json
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
"dependencies": { "dependencies": {
"@babel/preset-es2017": "^7.0.0-beta.53", "@babel/preset-es2017": "^7.0.0-beta.53",
"axios": "^0.18.0", "axios": "^0.18.0",
"echarts": "^4.8.0", "echarts": "^5.3.1",
"echarts-gl": "^1.1.1", "echarts-gl": "^1.1.1",
"element": "^0.1.4", "element": "^0.1.4",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
......
src/pages/home.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
</el-aside> </el-aside>
<el-container> <el-container>
<el-header :style="defaultHeader"> <!-- <el-header :style="defaultHeader">
<div class="headerBox"> <div class="headerBox">
<div class="headerBoxStyle"> <div class="headerBoxStyle">
<el-row> <el-row>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</el-row> </el-row>
</div> </div>
</div> </div>
</el-header> </el-header> -->
<el-main :style="defaultMainHeight"> <el-main :style="defaultMainHeight">
<router-view></router-view> <router-view></router-view>
</el-main> </el-main>
......
src/pages/new/menu.vue
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div> <div>
<nav class="layer"> <nav class="layer">
<ul> <ul>
<li><label for="pageOne">页面1</label></li> <li><router-link to="/new/test">页面1</router-link></li>
<li><label for="pageTwo">页面2</label></li> <li><router-link to="/new/test2">页面2</router-link></li>
<li><label for="pageThree">页面3</label></li> <li><label for="pageThree">页面3</label></li>
<li><label for="pageFour">页面4</label></li> <li><label for="pageFour">页面4</label></li>
<li><label for="pageFive">页面5</label></li> <li><label for="pageFive">页面5</label></li>
...@@ -20,11 +20,12 @@ ...@@ -20,11 +20,12 @@
</ul> </ul>
</label> </label>
<section class="front layer home"> <section class="front layer2">
<h1>你好</h1> <!-- <h1>你好</h1> -->
<router-view ></router-view>
<input type="radio" name="nav" id="pageOne" class="home" /> <!-- <input type="radio" name="nav" id="pageOne" class="home" />
<div id="One"></div> <div id="One">
</div>
<input type="radio" name="nav" id="pageTwo" /> <input type="radio" name="nav" id="pageTwo" />
<div id="Two"></div> <div id="Two"></div>
<input type="radio" name="nav" id="pageThree" /> <input type="radio" name="nav" id="pageThree" />
...@@ -32,13 +33,29 @@ ...@@ -32,13 +33,29 @@
<input type="radio" name="nav" id="pageFour" /> <input type="radio" name="nav" id="pageFour" />
<div id="Four"></div> <div id="Four"></div>
<input type="radio" name="nav" id="pageFive" /> <input type="radio" name="nav" id="pageFive" />
<div id="Five"></div> <div id="Five"></div> -->
</section> </section>
</div> </div>
</template> </template>
<script> <script>
export default {}; export default {
// 笔记本
data() {
return {
}
},
components: { },
methods:{
page1:function() {
this.$router.push({path: '/new/notebook2'});
},
initPscChart() {
}
}
}
</script> </script>
<style> <style>
...@@ -46,7 +63,8 @@ export default {}; ...@@ -46,7 +63,8 @@ export default {};
body { body {
font-family: "Roboto Condensed"; font-family: "Roboto Condensed";
text-transform: uppercase; text-transform: uppercase;
background: #52d7db; /* background: #52d7db; */
background: url('../../assets/login/logbackground.png') no-repeat;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
...@@ -142,6 +160,21 @@ input[type="checkbox"]:checked#hamburger + label > ul > li:last-child { ...@@ -142,6 +160,21 @@ input[type="checkbox"]:checked#hamburger + label > ul > li:last-child {
transform: perspective(800px) scale(1) translateX(0) rotateY(0); transform: perspective(800px) scale(1) translateX(0) rotateY(0);
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.layer2 {
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: transform 0.4s;
transform: perspective(800px) scale(1) translateX(0) rotateY(0);
transform-style: preserve-3d;
}
nav { nav {
vertical-align: center; vertical-align: center;
...@@ -170,7 +203,8 @@ nav ul li label:hover { ...@@ -170,7 +203,8 @@ nav ul li label:hover {
} }
.front { .front {
background: #ffffff; /* background: #ffffff; */
background: url('../../assets/login/logbackground.png') no-repeat;
} }
.front > div { .front > div {
...@@ -179,7 +213,7 @@ nav ul li label:hover { ...@@ -179,7 +213,7 @@ nav ul li label:hover {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; /* opacity: 0; */
pointer-events: none; pointer-events: none;
transition: all 0.4s ease; transition: all 0.4s ease;
} }
......
src/pages/new/test.vue 0 → 100644
<template>
<div class="test2">
<!-- <pageNameModel :pageName="pageName"></pageNameModel> -->
<div class="selectBox">
<div class="selectInputBox">
<el-input v-model="selectInput" placeholder="请输入内容"></el-input>
</div>
<div class="selectButtonBox">
<el-button type="primary" @click="checkSelect"><font style="font-size:12px" class="el-icon-search"></font></el-button>
</div>
</div>
<div class="projectListBox">
<div class="projectListTable">
<el-table :data="projectList" height="650">
<el-table-column prop="projectName" align="center" width="220" label="项目名称">
</el-table-column>
<el-table-column prop="type" align="center" width="150" label="项目类型">
</el-table-column>
<el-table-column prop="state" align="center" width="200" label="当前进度">
</el-table-column>
<el-table-column prop="startTime" align="center" width="200" label="开始时间">
</el-table-column>
<el-table-column prop="lastNodeTime" align="center" width="200" label="下一节点时间">
</el-table-column>
<el-table-column align="center" width="100" label="操作">
<template slot-scope="scope">
<i @click="checkProjectItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-thumb"></i>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="projectInfoDialog">
<el-dialog width="80%" top="2vh" :visible.sync="projectInfoDialogVisible">
<projectInfo></projectInfo>
</el-dialog>
</div>
</div>
</template>
<script>
// import pageNameModel from "./../publicModel/pageName.vue"
import projectInfo from "../project/projectInfo.vue"
export default {
data() {
return {
pageName:"项目列表",
selectInput:"",
projectList:[{
projectName:"11",
type:"11",
state:"11",
startTime:"11",
lastNodeTime:"11"
}],
projectInfoDialogVisible:false,
}
},
components: { projectInfo },
methods:{
checkProjectItem:function(projectItem) {//点击详情
this.projectInfoDialogVisible = true;
},
checkSelect:function() {//查询
}
}
}
</script>
<style>
.test2 .selectBox{
width: 100%;
height: 60px;
}
/* 输入框 */
.test2 .selectBox .selectInputBox {
width: 400px;
display: inline-block;
}
.test2 .selectInputBox .el-input__inner {
height: 40px !important;
background-color: rgb(0 0 0 / 15%);
}
/* 查询按钮 */
.test2 .selectBox .selectButtonBox {
display: inline-block;
/* width: 100px; */
border-radius: 10px;
height: 40px;
}
.test2 .selectBox .selectButtonBox .el-button {
height: 100% !important;
width: 100% !important;
border-radius: 0px;
background-color: rgb(255 255 255 / 15%);
border-color: rgb(255 255 255 / 35%);
}
/* 列表 */
.test2 .projectListBox{
width: 100%;
}
.test2 .projectListBox .projectListTable {
width: 66%;
box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
background-color: rgb(255 255 255 / 15%);
border-radius: 6px;
}
/*最外层透明*/
.test2 .projectListBox .projectListTable .el-table, .el-table__expanded-cell{
background-color: transparent;
}
/* 表格内背景颜色 */
.test2 .projectListBox .projectListTable .el-table th, .el-table tr, .el-table td {
background-color: transparent;
color: aliceblue;
}
.test2 .projectListBox .projectListTable .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: rgba(247, 247, 247, 0.205);
}
/* 弹出框 */
.projectInfoDialog .el-dialog, .el-pager li {
/* background-color: rgba(206, 206, 206, 0.486); */
border-radius: 40px;
box-shadow: 0 2px 50px 0 rgba(255, 255, 255, 0.699);
background: url('../../assets/login/logbackground.png') no-repeat;
}
.projectInfoDialog .el-dialog__header {
padding:0 0 0 0;
}
</style>
\ No newline at end of file
src/pages/new/test2.vue 0 → 100644
<template>
<div class="testBox">
<el-row :gutter="20">
<el-col :span="6">
<div class="notebookBaseBox">
<el-card shadow="always">
<div class="pscChartBox"></div>
<div class="calendarChartBox"></div>
</el-card>
</div>
</el-col>
<el-col :span="18">
<div class="notebookTable">
<el-table :data="notebookList" height="750" >
<el-table-column prop="projectName" align="center" label="项目名称">
</el-table-column>
<el-table-column prop="count" align="center" label="笔记数量">
</el-table-column>
<el-table-column align="center" width="80" label="查看">
<template slot-scope="scope">
<i @click="checkNotebookItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-s-management"></i>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from "echarts";
export default {
// 笔记本
data() {
return {
notebookList:[
{projectName:"张江双创", count:9},
{projectName:"张江双创二期", count:10},
{projectName:"徐汇教育局", count:12},
{projectName:"徐汇二期", count:3},
{projectName:"深圳艺校三期", count:6},
{projectName:"深圳艺校四期", count:0},
]
}
},
components: { },
methods:{
checkNotebookItem:function() {
},
initPscChart() {
}
}
}
</script>
<style>
.testBox {
width: 100%;
}
.testBox .notebookTable {
width: 100%;
height: 750px;
}
.testBox .notebookTable {
width: 100%;
box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
background-color: rgb(255 255 255 / 15%);
border-radius: 6px;
}
/*最外层透明*/
.testBox .notebookTable .el-table, .el-table__expanded-cell{
background-color: transparent;
}
/* 表格内背景颜色 */
.testBox .notebookTable .el-table th, .el-table tr, .el-table td {
background-color: transparent;
color: rgb(3, 3, 3);
}
.testBox .notebookTable .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: rgba(247, 247, 247, 0.205);
}
.testBox .notebookBaseBox {
width: 80%;
height: 750px;
}
.testBox .notebookBaseBox .el-card {
box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
background-color: rgb(255 255 255 / 15%);
border-radius: 6px;
height: 750px;
}
.testBox .notebookBaseBox .pscChartBox {
width: 100%;
height: 300px;
background: rgb(224, 179, 179);
}
.testBox .notebookBaseBox .calendarChartBox {
width: 100%;
height: 300px;
background: rgb(231, 131, 131);
}
</style>
\ No newline at end of file
src/pages/self/calendarChart.vue 0 → 100644
<template>
<div class="calendarChartBox">
<div id="calendarChart" style="width:100%;height:400px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
// 笔记本
data() {
return {
notebookList:[
{projectName:"张江双创", count:9},
{projectName:"张江双创二期", count:10},
{projectName:"徐汇教育局", count:12},
{projectName:"徐汇二期", count:3},
{projectName:"深圳艺校三期", count:6},
{projectName:"深圳艺校四期", count:0},
]
}
},
components: { },
mounted:function(){
this.initChart();
},
methods:{
initChart:function() {
let myChart = echarts.init(document.getElementById('calendarChart'));
myChart.setOption(option);
}
}
}
</script>
<style>
.calendarChartBox {
width: 100%;
height: 400px;
}
</style>
\ No newline at end of file
src/pages/self/notebook.vue
<template> <template>
<div class="notebookBox"> <div class="notebookBox">
<el-row :gutter="20"> <el-row :gutter="24">
<el-col :span="6"> <el-col :span="10">
<div class="notebookBaseBox">
<el-card shadow="always">
<div class="pscChartBox">
<pscChart></pscChart>
</div>
<div class="calendarChartBox">
<div id="calendarChart" style="width:400px;height:400px"></div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="14">
<div class="selectNotebookBox">
<div class="addNotebookBox">
<el-button type="primary" @click="addNotebook"><font style="font-size:22px" class="el-icon-plus"></font></el-button>
</div>
</div>
<div class="notebookTable"> <div class="notebookTable">
<el-table :data="notebookList" height="750" > <el-table :data="notebookList" height="740" >
<el-table-column prop="projectName" align="center" width="210" label="项目名称"> <el-table-column align="left" width="80" label="查看">
</el-table-column>
<el-table-column prop="count" align="center" width="100" label="笔记数量">
</el-table-column>
<el-table-column align="center" width="80" label="查看">
<template slot-scope="scope"> <template slot-scope="scope">
<i @click="checkNotebookItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-s-management"></i> <i @click="checkNotebookItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-s-management"></i>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="projectName" align="left" label="项目名称">
</el-table-column>
<el-table-column prop="count" align="center" label="笔记数量">
</el-table-column>
</el-table> </el-table>
</div> </div>
</el-col>
<el-col :span="18">
<div class="notebookBaseBox">
<el-card shadow="always">
</el-card>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import pscChart from "./pscChart.vue"
export default { export default {
// 笔记本 // 笔记本
data() { data() {
...@@ -41,16 +54,28 @@ export default { ...@@ -41,16 +54,28 @@ export default {
] ]
} }
}, },
components: { }, components: { pscChart },
mounted:function(){
this.initPscChart();
this.initDayChart();
},
methods:{ methods:{
checkNotebookItem:function() { checkNotebookItem:function() {
},
addNotebook:function() {
},
initPscChart:function() {
} }
} }
} }
</script> </script>
<style> <style>
.notebookBox { .notebookBox {
width: 100%; width: 100%;
} }
...@@ -79,16 +104,45 @@ export default { ...@@ -79,16 +104,45 @@ export default {
background-color: rgba(247, 247, 247, 0.205); background-color: rgba(247, 247, 247, 0.205);
} }
.notebookBox .selectNotebookBox {
width: 100%;
height: 60px;
}
.notebookBox .selectNotebookBox .addNotebookBox {
display: inline-block;
border-radius: 10px;
height: 45px;
}
.notebookBox .selectNotebookBox .addNotebookBox .el-button {
height: 100% !important;
width: 100% !important;
border-radius: 0px;
background-color: rgb(255 255 255 / 15%);
border-color: rgb(255 255 255 / 35%);
}
.notebookBox .notebookBaseBox { .notebookBox .notebookBaseBox {
width: 80%; width: 100%;
height: 750px; height: 700px;
} }
.notebookBox .notebookBaseBox .el-card { .notebookBox .notebookBaseBox .el-card {
box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144); box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
background-color: rgb(255 255 255 / 15%); background-color: rgb(255 255 255 / 15%);
border-radius: 6px; border-radius: 6px;
height: 750px; background-color: rgb(255 255 255 / 25%);
height: 810px;
}
.notebookBaseBox .pscChartBox {
width: 100%;
height: 400px;
} }
.notebookBaseBox .calendarChartBox {
width: 100%;
height: 300px;
/* background: rgb(231, 131, 131); */
}
</style> </style>
\ No newline at end of file
src/pages/self/pscChart.vue 0 → 100644
<template>
<div class="pscChartBox">
<div id="pscChart" style="width:100%;height:400px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
// 笔记本
data() {
return {
notebookList:[
{projectName:"张江双创", count:9},
{projectName:"张江双创二期", count:10},
{projectName:"徐汇教育局", count:12},
{projectName:"徐汇二期", count:3},
{projectName:"深圳艺校三期", count:6},
{projectName:"深圳艺校四期", count:0},
]
}
},
components: { },
mounted:function(){
this.initPscChart();
},
methods:{
initPscChart:function() {
let myChart = echarts.init(document.getElementById('pscChart'));
let gaugeData = [
{
value: 20,
name: '张江双创',
title: {
offsetCenter: ['0%', '-60%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '-45%']
}
},
{
value: 40,
name: '徐汇教育局',
title: {
offsetCenter: ['0%', '-15%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '0%']
}
},
{
value: 60,
name: '山鹰',
title: {
offsetCenter: ['0%', '30%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '45%']
}
}
];
let option = {
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1,
borderColor: '#464646'
}
},
axisLine: {
lineStyle: {
width: 20
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: gaugeData,
title: {
fontSize: 14
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'auto',
borderColor: 'auto',
borderRadius: 20,
borderWidth: 1,
formatter: function(value) {
if (value == 20 ) return "核对需求"
else if (value == 40) return "设计中"
else if (value == 60) return "开发中"
}
},
center:["50%","50%"],
radius: "95%"
}
]
};
myChart.setOption(option);
}
}
}
</script>
<style>
.pscChartBox {
width: 100%;
height: 400px;
}
</style>
\ No newline at end of file
src/router/index.js
...@@ -13,8 +13,13 @@ export default new Router({ ...@@ -13,8 +13,13 @@ export default new Router({
{ {
path: '/new', path: '/new',
name: 'new', name: 'new',
component: () => import('../pages/new/menu.vue') component: () => import('../pages/new/menu.vue'),
children: [
{path: 'test', name: 'test', component: () => import('../pages/task/taskList.vue')},
{path: 'test2', name: 'test2', component: () => import('../pages/new/test.vue')}
]
}, },
{ {
path: '/login', path: '/login',
name: 'login', name: 'login',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment