Skip to content

P
project-manage
提交 498cd739 authored 作者: 周雨莹's avatar 周雨莹
浏览文件
操作

'demo'

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 2794 行增加 和 0 行删除
.browserslistrc 0 → 100644
浏览文件 @ 498cd739
> 1%
last 2 versions
not dead
.eslintrc.js 0 → 100644
浏览文件 @ 498cd739
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
.gitignore 0 → 100644
浏览文件 @ 498cd739
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
浏览文件 @ 498cd739
# project-manage
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
浏览文件 @ 498cd739
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package-lock.json 0 → 100644
浏览文件 @ 498cd739
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
浏览文件 @ 498cd739
{
"name": "project-manage",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@antv/g6": "^3.6.0",
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-plugin-vuex": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
}
}
public/index.html 0 → 100644
浏览文件 @ 498cd739
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
浏览文件 @ 498cd739
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
src/assets/styles/replace-element.css 0 → 100644
浏览文件 @ 498cd739
.el-main {
width: 98%;
margin-left: 1%;
margin-bottom: 15px;
border-radius: 2px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
/*overflow: hidden;*/
margin-top: -40px;
}
.grayBg /deep/ .el-main{
background-color: #edeef2;
}
.whiteBg /deep/ .el-main{
background-color: #fff;
}
.el-header {
background-color: #B3C0D1;
color: #333;
text-align: center;
height: 20px;
}
.dialogHeader{
display: inline-block;
width: 92%;
text-align: center;
padding-top: 7px;
padding-bottom: 7px;
}
.dialogHeaderClose{
cursor: pointer;
width: 3%;
margin-right: 5px;
display: inline-block;
}
.el-dialog__header {
padding: 0 !important;
height: 10% !important;
text-align: center !important;
background-color: #22233f;
color: white;
font-size: 16px;
}
.el-dialog__body {
padding: 0 !important;
height: 250px !important;
}
.dialogBodyContent{
height: 100%;
}
\ No newline at end of file
src/assets/styles/resert.css 0 → 100644
浏览文件 @ 498cd739
@charset "utf-8";
/*通配css样式*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
/*适配全屏 */
html {
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-background-size: 100%;
background-size: 100%;
/*overflow: hidden;*/
font-family: Alibaba;
background-color: #f8f9fd;
overflow: hidden;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:link {
text-decoration: none;
}
ul, li {
list-style: none
}
img, li {
vertical-align: middle;
border: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
i, em {
font-style: normal;
}
.title-wrap{
font-weight: 600;
height: 30px;
}
.main-content{
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
.center-wrap{
height: calc(100% - (60px));
}
.foot-wrap{
height: 30px;
}
/*分页样式*/
.foot-wrap /deep/ .el-pagination.is-background .btn-next,
.foot-wrap /deep/ .el-pagination.is-background .btn-prev{
border-radius: 15px;
background-color: #b1c9fd;
color: white;
}
.foot-wrap /deep/ .el-pagination.is-background .btn-next.disabled,
.foot-wrap /deep/ .el-pagination.is-background .btn-next:disabled,
.foot-wrap /deep/ .el-pagination.is-background .btn-prev.disabled,
.foot-wrap /deep/ .el-pagination.is-background .btn-prev:disabled,
.foot-wrap /deep/ .el-pagination.is-background .el-pager li.disabled{
color: white;
}
.foot-wrap /deep/ .el-pagination.is-background .el-pager li{
border-radius: 15px;
color: white;
background-image: linear-gradient(#e7f1ec, #93a5cf);
}
.foot-wrap /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-image: linear-gradient(#3570f1, #3570f1);
}
.logo{
width: 15px;
height: auto;
}
src/main.js 0 → 100644
浏览文件 @ 498cd739
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/resert.css'
import './assets/styles/replace-element.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import G6 from '@antv/g6';
Vue.use(G6);
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
src/router/index.js 0 → 100644
浏览文件 @ 498cd739
import Vue from 'vue'
import VueRouter from 'vue-router'
import layout from '../views/layout.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'layout',
component: layout,
redirect: '/p1',
children: [
{
path: '/p1',
name: 'p1',
component: () => import(/* webpackChunkName: "unit" */ '../views/overview.vue')
},
{
path: '/p2',
name: 'p2',
component: () => import(/* webpackChunkName: "unit" */ '../views/projectWork.vue')
},
{
path: '/p3',
name: 'p3',
component: () => import(/* webpackChunkName: "unit" */ '../views/todo.vue')
},
{
path: '/p4',
name: 'p4',
component: () => import(/* webpackChunkName: "unit" */ '../views/projectFile.vue')
},
{
path: '/p5',
name: 'p5',
component: () => import(/* webpackChunkName: "unit" */ '../views/architectureDiagram.vue')
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
src/store/index.js 0 → 100644
浏览文件 @ 498cd739
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
src/views/architectureDiagram.vue 0 → 100644
浏览文件 @ 498cd739
<template>
<div class="main-content">
<div class="title-wrap">组织架构图</div>
<div class="map-wrap">
<div id="mountNode"></div>
</div>
</div>
</template>
<script>
import G6 from '@antv/g6';
export default {
components: {},
data(){
return{
}
},
methods: {
},
mounted(){
const data = {
// 点集
nodes: [
{
id: 'node1', // String，该节点存在则必须，节点的唯一标识
x: 600, // Number，可选，节点位置的 x 值
y: 80, // Number，可选，节点位置的 y 值
label: '项目负责人\n张xx',
type: 'circle',
anchorPoints: [[0.5, 1]],
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:20,
offset:[10,0,0,0]
}
},
size:100,
style: {
// fill: 'l(0) 0:rgba(58,91,215,1) 0.5:rgba(74,107,232,0.5) 1:rgba(115,139,242,0.3)',//渐变色
fill: 'l(0) 0:#1d5bdb 1:#437dff',//渐变色
stroke: '#fff',
lineWidth: 5,
shadowColor:'#001c89',
shadowBlur:4,
// shadowOffsetX:5,
// shadowOffsetY:5，
},
},
{
id: 'node2', // String，该节点存在则必须，节点的唯一标识
x: 180, // Number，可选，节点位置的 x 值
y: 220, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0],[0.5,1]],
size:[180,36],
style: {
fill: 'l(0) 0:#6f91d6 1:#4470d3',//渐变色
stroke: '#fff',
lineWidth: 2,
shadowColor:'#001c89',
shadowBlur:2,
radius:18
},
label: '售前组组长：毛xx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:20,
offset:[10,0,0,0]
}
},
},
{
id: 'node3', // String，该节点存在则必须，节点的唯一标识
x: 460, // Number，可选，节点位置的 x 值
y: 220, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0],[0.5,1]],
size:[180,36],
style: {
fill: 'l(0) 0:#6f91d6 1:#4470d3',//渐变色
stroke: '#fff',
lineWidth: 2,
shadowColor:'#001c89',
shadowBlur:2,
radius:18
},
label: '测试组组长：李xx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:20,
offset:[10,0,0,0]
}
},
},
{
id: 'node4', // String，该节点存在则必须，节点的唯一标识
x: 740, // Number，可选，节点位置的 x 值
y: 220, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0],[0.5,1]],
size:[180,36],
style: {
fill: 'l(0) 0:#6f91d6 1:#4470d3',//渐变色
stroke: '#fff',
lineWidth: 2,
shadowColor:'#001c89',
shadowBlur:2,
radius:18
},
label: '产品组组长：毛xx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:20,
offset:[10,0,0,0]
}
},
},
{
id: 'node5', // String，该节点存在则必须，节点的唯一标识
x: 1020, // Number，可选，节点位置的 x 值
y: 220, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0],[0.5,1]],
size:[180,36],
style: {
fill: 'l(0) 0:#6f91d6 1:#4470d3',//渐变色
stroke: '#fff',
lineWidth: 2,
shadowColor:'#001c89',
shadowBlur:2,
radius:18
},
label: '开发组组长：张xx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:20,
offset:[10,0,0,0]
}
},
},
{
id: 'node6', // String，该节点存在则必须，节点的唯一标识
x: 100, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '李\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node7', // String，该节点存在则必须，节点的唯一标识
x: 180, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '吴\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node8', // String，该节点存在则必须，节点的唯一标识
x: 260, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '李\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node9', // String，该节点存在则必须，节点的唯一标识
x: 420, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
size:[40,100],
anchorPoints: [[0.5, 0]],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '王\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node10', // String，该节点存在则必须，节点的唯一标识
x: 500, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '肖\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node11', // String，该节点存在则必须，节点的唯一标识
x: 700, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
size:[40,100],
anchorPoints: [[0.5, 0]],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '王\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node12', // String，该节点存在则必须，节点的唯一标识
x: 780, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '肖\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node13', // String，该节点存在则必须，节点的唯一标识
x: 880, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '李\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node14', // String，该节点存在则必须，节点的唯一标识
x: 960, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '吴\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node15', // String，该节点存在则必须，节点的唯一标识
x: 1040, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '李\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
},
{
id: 'node16', // String，该节点存在则必须，节点的唯一标识
x: 1120, // Number，可选，节点位置的 x 值
y: 380, // Number，可选，节点位置的 y 值
type: 'rect',
anchorPoints: [[0.5, 0]],
size:[40,100],
style: {
fill: '#767e99',
stroke: '#fff',
radius:18
},
label: '毛\nx\nx',
labelCfg:{
style:{
fontSize:14,
fill:'#fff',
lineHeight:16,
}
},
}
],
// 边集
edges: [
{
source: 'node1', // String，必须，起始点 id
target: 'node2', // String，必须，目标点 id
controlPoints:[{ x: 600, y: 160 }, { x: 180, y: 160 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node1',
target: 'node3',
controlPoints:[{ x: 600, y: 160 }, { x: 460, y: 160 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node1',
target: 'node4',
controlPoints:[{ x: 600, y: 160 }, { x: 740, y: 160 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node1',
target: 'node5',
controlPoints:[{ x: 600, y: 160 }, { x: 1020, y: 160 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node2',
target: 'node6',
controlPoints:[{ x: 180, y: 280 }, { x: 100, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node2',
target: 'node7',
controlPoints:[{ x: 180, y: 280 }, { x: 180, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node2',
target: 'node8',
controlPoints:[{ x: 180, y: 280 }, { x: 260, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node3',
target: 'node9',
controlPoints:[{ x: 460, y: 280 }, { x: 420, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node3',
target: 'node10',
controlPoints:[{ x: 460, y: 280 }, { x: 500, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node4',
target: 'node11',
controlPoints:[{ x: 740, y: 280 }, { x: 700, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node4',
target: 'node12',
controlPoints:[{ x: 740, y: 280 }, { x: 780, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node5',
target: 'node13',
controlPoints:[{ x: 1020, y: 280 }, { x: 880, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node5',
target: 'node14',
controlPoints:[{ x: 1020, y: 280 }, { x: 960, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node5',
target: 'node15',
controlPoints:[{ x: 1020, y: 280 }, { x:1040, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
{
source: 'node5',
target: 'node16',
controlPoints:[{ x: 1020, y: 280 }, { x: 1120, y: 280 }],
sourceAnchor:4,
style: {
lineWidth: 2,
stroke: '#dadded'
},
},
],
};
// 创建 G6 图实例
const graph = new G6.Graph({
container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
// 画布宽高
width: 1200,
height: 500,
defaultNode: {
position: 'left',
style: {
// background: {
//// fill: '#ffffff',
//// stroke: 'green',
//// padding: [3, 2, 3, 2],
//// radius: 2,
//// lineWidth: 3,
// },
},
},
defaultEdge: {
autoRotate: true,
type:'polyline',
style: {
background: {
fill: '#ffffff',
stroke: '#000000',
padding: [2, 2, 2, 2],
// radius: 2,
},
},
}
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();
}
}
</script>
<style>
.map-wrap{
width: 100%;
height: 100%;
}
#mountNode{
margin: 0 auto;
}
#mountNode /deep/ .canvas{
margin: 0 auto;
}
</style>
\ No newline at end of file
src/views/layout.vue 0 → 100644
浏览文件 @ 498cd739
<!-- 整体框架 -->
<template>
<div class='layoutIndex' :class="this.$route.path == '/p1' ? 'grayBg' : 'whiteBg' ">
<el-container style="height: 100%">
<el-header style="z-index: 1000;">
<div>
<div style="width:20%; height:60px;float: left;font-size: 22px;">
<i class="el-icon-s-grid"></i><span style="margin-left: 10px;">项目管理系统</span>
</div>
<div class="nav-bar">
<el-menu
default-active="p1"
@select="select"
:active="actives"
mode="horizontal"
class="el-menu-vertical-demo"
background-color="#23233e"
text-color="#fff"
active-text-color="#fff">
<el-menu-item :index="item.index" :key="index" v-for="(item, index) in processes" :class="{unitActive: actives === item.index}">
<span slot="title">{{item.name}}</span>
</el-menu-item>
</el-menu>
</div>
<div class="userMenu">
<el-menu class="el-menu-demo" mode="horizontal" style="margin: 0px">
<el-submenu index="user">
<template slot="title"><i class="el-icon-user"></i>张三</template>
<el-menu-item index="password">修改密码</el-menu-item>
<el-menu-item index="password">退出</el-menu-item>
</el-submenu>
</el-menu>
</div>
</div>
</el-header>
<div style="width: 100%;height: 40px;background-color: #23233e">
</div>
<el-main style="height: 100px">
<div class="container">
<router-view></router-view>
</div>
</el-main>
</el-container>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
name: "layout",
//import引入的组件需要注入到对象中才能使用
components: {
},
data () {
//这里存放数据
return {
isEditor:false,
input2:' ',
actives: 'p1',
userList: [{ // 列表数据
name: '销售负责人',
person: ' ',
unit:' ',
level: ' ',
edit:false,
tel:' '
},
{
name: '项目经理',
person: ' ',
unit:' ',
level: ' ',
edit:false,
tel:' '
}, {
name: '采购经理',
person: ' ',
unit:' ',
level: ' ',
edit:false,
tel:' '
}, {
name: '软件研发负责人',
person: ' ',
unit:' ',
level: ' ',
edit:false,
tel:' '
},{
name: '软件研发负责人',
person: ' ',
unit:' ',
level: ' ',
edit:false,
tel:' '
},
],
processes:[
{
name:'项目总览',id:'1',index:'p1'
},
{
name:'项目工作',id:'2',index:'p2'
},
{
name:'待办事务',id:'3',index:'p3'
},
{
name:'工程文件',id:'4',index:'p4'
},
{
name:'组织架构图',id:'5',index:'p5'
}
]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
closeAnalysisDialog() {
this.showAnalysis = false;
this.showAnalysis0 = false;
},
select(key, keyPath) {
// console.log(key)
console.log(keyPath)
if (keyPath.length > 1) {
this.actives = keyPath[1];
this.$router.push({name: keyPath[1]})
} else {
this.actives = keyPath[0];
this.$router.push({name: keyPath[0]})
}
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created () {
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
console.log(this.actives)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.layoutIndex
{
height: 100vh;
}
.el-header {
background-color: #23233e !important;
color: #fff;
padding: 0;
text-align: center;
line-height: 60px;
height: 60px !important;
}
.el-main {
background-color: #f8f9fd;
color: #333;
text-align: left;
}
.nav-bar{
height: 60px;
float: left;
width: 60%;
display: flex;
}
.nav-bar /deep/ .el-menu--horizontal>.el-menu-item{
height: 35px;
line-height: 35px;
}
/*.nav-bar /deep/ .el-menu--horizontal>.el-menu-item:hover{*/
/*background-color: #0e0e2a;*/
/*}*/
/*.nav-bar /deep/ .el-menu--horizontal>.el-menu-item:active{*/
/*background-color: #0e0e2a;*/
/*}*/
.nav-bar /deep/ .el-menu>.el-menu-item:hover {
border: none;
background-color: #0e0e2a !important;
}
.nav-bar /deep/ .el-menu>.el-menu-item.is-active{
border: none;
background-color: #0e0e2a !important;
}
.layoutIndex /deep/ .el-menu.el-menu--horizontal{
height: 35px;
line-height: 35px;
margin-top: 12px;
}
.userMenu{
float: right;
height: 40px;
color: white;
line-height: 40px;
}
.layoutIndex /deep/ .el-menu{
color: white;
background-color: #23233e;
}
.layoutIndex .el-menu-item{
color: white;
/*background-color: #282d3b;*/
text-align: left;
}
.layoutIndex .el-menu-item {
border-bottom-color: #23233e !important;
}
.el-menu--horizontal>.el-menu-item.is-active{
/*border-bottom:none ;*/
}
.el-menu--horizontal>.el-submenu /deep/ .el-submenu__title{
color: white;
}
.layoutIndex>.el-submenu:focus /deep/ .el-submenu__title,
.layoutIndex>.el-submenu:hover /deep/ .el-submenu__title{
color: white;
}
.layoutIndex /deep/ .el-submenu__title i{
color: white;
}
.layoutIndex /deep/ .el-menu-item:focus,
.el-menu--horizontal /deep/ .el-submenu .el-submenu__title:hover{
background-color: #23233e !important;
color: white;
}
.layoutIndex /deep/ .el-menu.el-menu--horizontal{
border-bottom: none;
}
.userMenu .el-menu-item:not(.is-disabled):focus,
.userMenu .el-menu-item:not(.is-disabled):hover{
color: #19191b;
background-color: #fff;
}
.container{
height: 100%;
}
</style>
src/views/overview.vue 0 → 100644
浏览文件 @ 498cd739
<template>
<div class="wrap">
<div class="left">
<div class="title"><img src="../assets/img/logo.png" class="logo"/><span style="margin-left: 10px">项目基本信息</span></div>
<div class="project-wrap">
<div class="bg-img">
<div class="txt-wrap">
<div style="line-height: 20px;margin-top: 10px">项目名称：</div>
<div style="margin-left: 24px;line-height: 30px">XXX项目一</div>
</div>
<div class="txt-wrap">
<div style="line-height: 20px">工 期：</div>
<div style="margin-left: 30px;line-height: 20px">2020.07.10-2020.10.10</div>
</div>
</div>
<div class="bg" v-for="item in unitList" :label="item" :key="item">
<div style="float: left">
<div class="icon-bar"></div>
<div class="tit">{{item.title}}:</div>
<div class="detail-wrap">
<div class="txt"><img src="../assets/img/unit.png" style="width: 12px;height: auto;margin-right: 10px"/>{{item.name}}</div>
<div class="txt"><img src="../assets/img/person.png" style="width: 12px;height: auto;margin-right: 10px"/>{{item.person}}</div>
<div class="txt"><img src="../assets/img/tel.png" style="width: 10px;height: auto;margin-right: 10px"/>{{item.tel}}</div>
</div>
</div>
<div class="material">材 料</div>
</div>
</div>
</div>
<div class="right">
<div class="model-1">
<div>
<div class="txt-ahead"><span class="second-tit">总进度</span><span class="time">2020.07.10</span></div>
<div class="process-bar">
<div class="badge1">50%</div>
<el-progress :percentage="50" :stroke-width="12" :show-text=false>123</el-progress>
</div>
<div class="txt-behind"><span class="time">2020.10.10</span></div>
</div>
<div class="step-wrap">
<div v-for="item in step" :label="item" :key="item">
<div class="step-content">
<div class="tooltip">
<!--<div slot="content">{{item.content1}}<br/>{{item.content2}}</div>-->
<div class="tooltiptext">{{item.content1}}<br/>{{item.content2}}</div>
<div class="step"
:class="item.step== 'active' ? 'active' : item.step == 'activeNow' ? 'activeNow' : 'activedNo'">
</div>
</div>
</div>
<div class="line"
v-if="item.line!=0"
:class= "item.line== 1 ? 'line1' : 'line2'">
</div>
<div class="text-wrap">
<div class="text">
<div style="line-height: 19px">{{item.name}}</div>
<div style="line-height: 19px">{{item.date}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="model-2">
<div>
<div class="txt-ahead"><span class="second-tit">到货数量</span><span class="time">0</span></div>
<div class="process-bar">
<div class="badge2">72%</div>
<el-progress :percentage="72" :stroke-width="12" :show-text=false>123</el-progress>
</div>
<div class="txt-behind"><span class="time">325</span></div>
</div>
<div class="chart-wrap">
<div v-for="item in chartS" :label="item" :key="item">
<div class="chart"
:style="{'backgroundImage': 'url(' + item.imgSrc + ')'}">
{{item.num}}
</div>
<div class="txt-name">
{{item.name}}
</div>
</div>
</div>
</div>
<div class="model-3">
<div class="model-4">
<div class="txt-ahead">
<span class="second-tit">软件进度</span>
</div>
<div class="process-bg-wrap">
<div class="process-bg" >
<div style="display: flex;flex-direction: column;justify-content: center;height: 100px">
<span>完成度</span><span style="font-size: 16px">78%</span>
</div>
</div>
</div>
</div>
<div class="model-5">
<div class="txt-ahead">
<span class="second-tit">项目重难点情况</span>
</div>
<div class="details-wrap">
<div v-for="item in detials" :label="item" :key="item" style="display: flex">
<div class="bud" :class="item.index== 1 ? 'bud1' : (item.index== 2 ? 'bud2' : item.index== 3 ? 'bud3' : 'bud4')"></div>
<div class="detail-txt">
<div style="float: left;margin-left: 10px">{{item.index}}、{{item.txt}} </div>
<div style="float: right;margin-right: 10px" :class="item.badge=='处理中' ? 'processing' : 'haveDone'">
{{item.badge}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
unitList:[
{
title:'建设单位',
name:'XXXX单位',
person:'XXX领导',
tel:'15833089021'
},
{
title:'监理单位',
name:'XXXX单位',
person:'吴XX',
tel:'15833089021'
},
{
title:'承建单位',
name:'XXXX单位',
person:'毛X',
tel:'15833089021'
}
],
step:[
{
content1:'1、初验报告',
content2:'2、专家意见',
step:'active',
name:'开工',
date:'2020-7-10',
line:1
},
{
content1:'1、初验报告',
content2:'2、专家意见',
step:'active',
name:'开工',
date:'2020-7-10',
line:1
},
{
content1:'1、初验报告',
content2:'2、专家意见',
step:'activeNow',
name:'开工',
date:'2020-7-10',
line:2
},
{
content1:'1、初验报告',
content2:'2、专家意见',
step:'activedNo',
name:'开工',
date:'2020-7-10',
line:0
},
],
chartS:[
{
name:'通用PC',imgSrc:require('../assets/img/chart1.png'),num:'12/32'
},
{
name:'专用PC',imgSrc:require('../assets/img/chart2.png'),num:'33/50'
},
{
name:'服务器',imgSrc:require('../assets/img/chart3.png'),num:'6/10'
},
{
name:'打印机',imgSrc:require('../assets/img/chart4.png'),num:'48/70'
},
{
name:'其他设备',imgSrc:require('../assets/img/chart5.png'),num:'45/63'
},
],
detials:[
{
index:'1',
txt:'项目涉及众多打印机，型号不统一，打印机驱动适配问题',
badge:'处理中'
},
{
index:'2',
txt:'原系统使用IE控件，系统适配，需寻找到替代产品',
badge:'已解决'
},
{
index:'3',
txt:'项目涉及众多打印机，型号不统一，打印机驱动适配问题',
badge:'已解决'
},
{
index:'4',
txt:'项目涉及众多打印机，型号不统一，打印机驱动适配问题',
badge:'已解决'
}
]
}
}
}
</script>
<style scoped>
.wrap{
display: flex;
width: 100%;
height: 100%;
justify-content: space-between;
}
.left{
width: 23%;
height: 100%;
background-color: #fff;
border-radius: 5px;
}
.title{
height: 4%;
padding-top: 3%;
padding-bottom: 3%;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
}
.project-wrap{
padding-left: 20px;
padding-right: 20px;
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bg-img{
width: 100%;
height: 23%;
background-image: url("../assets/img/bg.png");
background-size: 100% 100%;
}
.txt-wrap{
padding: 0 10px;
color: white;
font-size: 13px;
}
.bg{
width: 100%;
height: 23%;
border: 1px #edeef2 solid;
}
.icon-bar{
width: 3px;
height: 12px;
background-color: #3c7dde;
float: left;
margin: 14px 0 0 15px;
}
.tit{
font-size: 14px;
color: #3c7dde;
padding-left: 8px;
margin-top: 10px;
float: left;
font-weight: 500;
}
.detail-wrap{
padding: 10px 20px 10px 20px;
font-size: 12px;
clear: both;
}
.txt{
line-height: 20px;
}
.right{
width: 75.8%;
height: 100%;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.model-1, .model-2, .model-4, .model-5{
background-color: #fcfcfc;
border-radius: 4px;
}
.model-1, .model-2, .model-3{
width: 100%;
}
.model-1{
height: 33%;
}
.model-2{
height: 30.56%;
}
.model-3{
height: 32%;
display: flex;
border-radius: 4px;
justify-content: space-between;
}
.model-4{
width: 38.5%;
}
.model-5{
width: 60%;
}
.txt-ahead, .process-bar, .txt-behind{
float: left;
font-size: 15px;
margin-top: 20px;
}
.process-bar{
width: 70%;
margin-left: 10px;
position: relative;
z-index: 10;
margin-top:25px;
}
.process-bar /deep/ .el-progress-bar__inner{
background-image: linear-gradient(to right, #56cdfa, #417bc9);
}
.badge1, .badge2{
background-image: url("../assets/img/li.png");
width: 25px;
height: 25px;
background-size: 100% 100%;
line-height: 25px;
font-size: 8px;
text-align: center;
color: #fff;
position: absolute;
top:-22px;
z-index: 1000;
}
.badge1{
left: 47.5%;
}
.badge2{
left: 69.5%;
}
.second-tit{
margin-left: 15px;
}
.time{
color: #4f89b7;
margin-left: 10px;
font-size: 14px;
}
.step-wrap{
clear: both;
width: 90%;
margin-left: 40px;
padding: 20px 50px 20px 20px;
margin-top: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.step-content{
float: left;
}
.step{
width: 34px;
height: 34px;
border-radius: 15px;
cursor: pointer;
/*background-color: #333333;*/
}
.line{
height: 2px;
width: 200px;
float: left;
margin-top: 16px;
padding-top: -50px;
}
.line1{
background-color: #3570f1;
}
.line2{
background-color: #e4e6eb;
}
.active{
background-image: url("../assets/img/active.png");
background-size: 100% 100%;
}
.activeNow{
background-image: url("../assets/img/activeNow.png");
background-size: 100% 100%;
}
.activedNo{
background-image: url("../assets/img/activeNo.png");
background-size: 100% 100%;
}
.text-wrap{
clear: both;
display: flex;
}
.text{
font-size: 12px;
margin-left: -10px;
margin-top: 10px;
text-align: center;
color: #a5a9a8;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: #848484;
text-align: center;
font-size: 12px;
line-height: 20px;
border-radius: 6px;
padding: 10px 0;
position: absolute;
bottom: 150%;
left: 50%;
z-index: 10000;
margin-left: -60px;
box-shadow: 0 2px 6px 0 rgba(185, 189, 200, 0.5);
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: white transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.chart-wrap{
clear: both;
display: flex;
padding-top: 15px;
width: 80%;
margin-left: 70px;
justify-content: space-between;
}
.chart{
width: 70px;
height: 70px;
background-size: 100% 100%;
text-align: center;
line-height: 70px;
color: #a5a9a8;
font-size: 12px;
}
.txt-name{
text-align: center;
font-size: 13px;
color: #191919;
margin-top: 10px;
}
.process-bg-wrap{
clear: both;
display: flex;
justify-content: center;
}
.process-bg{
background-image: url("../assets/img/processbg.png");
background-size: 100% 100%;
width: 100px;
height: 100px;
margin-top: 15px;
color: #fff;
font-size: 12px;
text-align: center;
}
.details-wrap{
clear: both;
padding-left: 20px;
padding-top: 12px;
}
.detail-txt{
width: 90%;
background-color: #f7f7ff;
height: 20px;
line-height: 20px;
font-size: 13px;
color: #93969e;
margin-bottom: 8px;
}
.bud{
height: 20px;
width: 4px;
background-color: #3570f1;
}
.bud1{
background-image: linear-gradient(to bottom, #18b7f9, #2061bf);
}
.bud2{
background-image: linear-gradient(to bottom, #50acb7, #1ea891);
}
.bud3{
background-image: linear-gradient(to bottom, #1abfef, #2757ab);
}
.bud4{
background-image: linear-gradient(to bottom, #3cc0f1, #9734cf);
}
.processing{
color: #f47a4a;
}
.haveDone{
color: #58b09a;
}
.material{
float: right;
width: 40px;
height: 40px;
border-radius: 20px;
background-image: linear-gradient(to right, #2160dc, #4880f0);
color: white;
font-size: 12px;
text-align: center;
line-height: 40px;
margin-top: 10px;
margin-right: 20px;
}
</style>
\ No newline at end of file
src/views/projectFile.vue 0 → 100644
浏览文件 @ 498cd739
<template>
<div class="main-content">
<div class="title-wrap">工程文件</div>
<div class="center-wrap">
<div class="state-wrap">
<div class="select-wrap">
<div class="select-first">
<span class="txt-lip">选择日期：</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="日期">
</el-date-picker>
</div>
<div class="select-second">
<span class="txt-lip">文件类型：</span>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="search-but">
<el-button @click="showAnalysis = true">新增</el-button>
</div>
</div>
<div class="table-wrap">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="num"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="fileName"
label="文件名称"
width="180">
</el-table-column>
<el-table-column
prop="fileType"
label="文件类型">
</el-table-column>
<el-table-column
prop="contractor"
label="承建方"
width="180">
</el-table-column>
<el-table-column
prop="supervisor"
label="监理方"
width="180">
</el-table-column>
<el-table-column
prop="owner"
label="业主方">
</el-table-column>
<el-table-column
prop="state"
label="状态">
</el-table-column>
</el-table>
</div>
</div>
<div class="foot-wrap">
<el-pagination
background
layout="prev, pager, next"
:total="1000" style="float: right">
</el-pagination>
</div>
<el-dialog
title="新增项目"
width="400px"
:show-close="false"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:lock-scroll="true"
:visible.sync="showAnalysis"
style="width: 100%;height: 100%;margin-top: 80px;">
<div slot="title" class="header-title">
<div class="dialogHeader">文件详情</div>
<div @click="closeAnalysisDialog(showAnalysis)" class="dialogHeaderClose"><i class="el-icon-close"></i></div>
</div>
<div class="dialogBodyContent">
<div class="demo-input-suffix">
<div style="width: 20%;display: inline-block;text-align: right;">文件名称：</div>
<div style="width: 60%;display: inline-block;">
<el-input
placeholder="请输入内容"
v-model="input2">
</el-input>
</div>
</div>
<div class="demo-input-suffix">
<div style="width: 20%;display: inline-block;text-align: right;">文件类型：</div>
<div style="width: 60%;display: inline-block;">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="demo-input-suffix">
<div style="width: 20%;display: inline-block;text-align: right;">附件：</div>
<div style="width: 60%;display: inline-block;">
<el-button class="bt2">上传</el-button>
</div>
</div>
<div class="foot-but">
<el-button class="bt1">取消</el-button>
<el-button class="bt2" style=" margin-left: 100px;">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
export default {
components: {ElButton},
data(){
return{
input1:'',
input2:'',
showAnalysis: false,
tableData: [{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
contractor:'提交',
supervisor:'审核',
owner:'未审核',
state:'进行中'
}, {
num:'2',
fileName:'xxxx',
fileType:'类型2',
contractor:'未提交',
supervisor:'未审核',
owner:'未审核',
state:'进行中'
},{
num:'3',
fileName:'xxxxxxx',
fileType:'类型3',
contractor:'提交',
supervisor:'审核',
owner:'审核',
state:'通过并存档'
},{
num:'4',
fileName:'xxxxxxx',
fileType:'类型3',
contractor:'提交',
supervisor:'审核',
owner:'审核',
state:'通过并存档'
},{
num:'5',
fileName:'xxxxxxx',
fileType:'类型3',
contractor:'提交',
supervisor:'审核',
owner:'审核',
state:'通过并存档'
},{
num:'6',
fileName:'xxxxxxx',
fileType:'类型3',
contractor:'提交',
supervisor:'审核',
owner:'审核',
state:'通过并存档'
},{
num:'7',
fileName:'xxxxxxx',
fileType:'类型3',
contractor:'提交',
supervisor:'审核',
owner:'审核',
state:'通过并存档'
},{
num:'8',
fileName:'xxxxxxx',
fileType:'类型3',
contractor:'提交',
supervisor:'审核',
owner:'审核',
state:'通过并存档'
}]
}
},
methods:{
closeAnalysisDialog() {
this.showAnalysis = false;
},
}
}
</script>
<style>
.table-wrap{
margin-top: 8px;
}
/*表格样式--*/
.table-wrap /deep/ .el-table th, .el-table tr{
background-color: #fefcfe;
}
.table-wrap /deep/ .el-table{
border: 1px solid #f2f4f8;
}
.table-wrap /deep/ .el-table__header tr,
.table-wrap /deep/ .el-table__header th {
padding: 0;
height: 40px;
}
.table-wrap /deep/ .el-table__body tr,
.table-wrap /deep/ .el-table__body td {
padding: 0;
height: 40px;
}
/**/
.txt-lip{
font-size: 12px;
color: #8c9296;
}
.state-wrap{
height: 40px;
}
.select-wrap{
float: left;
display: flex;
}
.select-first /deep/ .el-input__icon{
display: none;
}
.select-second /deep/ .el-input__icon{
height: 30px;
line-height: 30px;
}
.select-wrap /deep/ .el-input__inner{
height: 30px;
line-height: 30px;
width: 140px;
}
.select-wrap /deep/ .el-input--prefix .el-input__inner{
padding-left: 10px;
}
.search-but{
float: right;
}
.search-but /deep/ .el-button{
height: 30px;
line-height: 30px;
padding: 0 30px;
border-radius: 15px;
color: white;
background-image: linear-gradient(to right, #1e5cdc, #417cfd);
border: none;
}
.main-content /deep/ .el-dialog{
/*margin:0 !important;*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height: 450px !important;
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
background: #FFF;
}
.demo-input-suffix{
width: 100%;
padding-left: 10%;
font-size: 12px;
margin-top: 15px;
}
.demo-input-suffix /deep/ .el-input__inner{
height: 30px;
width: 100%;
}
.demo-input-suffix /deep/ .el-input__icon{
line-height: 30px;
}
.foot-but{
display: flex;
justify-content: center;
margin-top: 20px;
}
.foot-but /deep/ .el-button,
.demo-input-suffix /deep/ .el-button{
height: 30px;
width: 80px;
border-radius: 15px;
line-height: 30px;
padding: 0;
margin-top: 20px;
}
.demo-input-suffix /deep/ .el-select{
width: 100%;
}
.bt2{
background-image: linear-gradient(to right, #1e5cdc, #417cfd);
color: white;
}
.bt1{
background-image: linear-gradient(to right, #d6d5d3, #ededec);
}
</style>
\ No newline at end of file
src/views/projectWork.vue 0 → 100644
浏览文件 @ 498cd739
<template>
<div class="main-content">
<div class="title-wrap">项目工作</div>
<div class="date-wrap">
<div class="left-wrap">
<div class="calendar-wrap">
<el-button class="but prev"><i class="el-icon-arrow-left"></i></el-button>
<el-calendar>
<template
slot="dateCell"
slot-scope="{date, data}">
<p> <!--这里原本有动态绑定的class，去掉-->
{{ data.day.split('-').slice(2).join('-') }}<br />
<!--{{dealMyDate(data.day)}}-->
</p>
<div v-if="data.day=='2020-08-23'||data.day=='2020-08-19'" class="red budge"></div>
<div v-if="data.day=='2020-08-09'||data.day=='2020-08-13'" class="green budge"></div>
<div v-if="data.day=='2020-08-12'||data.day=='2020-08-22'" class="orange budge"></div>
</template>
</el-calendar>
<el-button class="but next"><i class="el-icon-arrow-right"></i></el-button>
</div>
<div class="explanation">
<div>注:</div>
<div class="green budge0"></div>
<div>项目工作开展或已完成</div>
<div class="orange budge0" style="margin-left: 40px"></div>
<div>项目即将逾期（1天）</div>
<div class="red budge0" style="margin-left: 40px"></div>
<div>项目逾期或未通过</div>
</div>
</div>
<div class="right-wrap">
<div class="mywork">
<div style="padding: 20px">
<div><el-button @click="showAnalysis = true">添加工作</el-button></div>
<div class="myTime">
<div><img src="../assets/img/time.png" style="width: 16px;height: auto;margin-right: 10px;margin-top: -3px"/>2020-07-15</div>
<div style="margin-left: 26px;font-size: 13px;margin-top: 5px">10:14:55</div>
</div>
<div class="assign">
<div><img src="../assets/img/work.png" style="width: 14px;height: auto;margin-right: 10px;margin-top: -3px"/>今日工作安排：</div>
<div style="height: 200px;margin-top: 40px;margin-left: 40px">
<el-steps direction="vertical">
<el-step title="xxxx工作" icon="el-icon-step1">
<template slot="description" >
<span>负责人：</span><span style="color: #333333">张XX</span>
<span style="margin-left: 60px">剩余时间：</span><span style="color:#c34129;">1天</span>
</template>
</el-step>
<el-step title="xxxx工作" icon="el-icon-step2">
<template slot="description" >
<span>负责人：</span><span style="color: #333333">张XX</span>
<span style="margin-left: 60px">剩余时间：</span><span style="color:#333333;">5天</span>
</template>
</el-step>
<el-step title="xxxx工作" icon="el-icon-step2">
<template slot="description" >
<span>负责人：</span><span style="color: #333333">张XX</span>
<span style="margin-left: 60px">剩余时间：</span><span style="color:#333333;">5天</span>
</template>
</el-step>
</el-steps>
</div>
</div>
</div>
</div>
</div>
</div>
<el-dialog
title="新增项目"
width="400px"
:show-close="false"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:lock-scroll="true"
:visible.sync="showAnalysis"
style="width: 100%;height: 100%;margin-top: 80px;">
<div slot="title" class="header-title">
<div class="dialogHeader">添加工作</div>
<div @click="closeAnalysisDialog(showAnalysis)" class="dialogHeaderClose"><i class="el-icon-close"></i></div>
</div>
<div class="dialogBodyContent">
<div class="demo-input-suffix">
<div style="width: 25%;display: inline-block;text-align: right;">工作名称：</div>
<div style="width: 55%;display: inline-block;">
<el-input
placeholder="请输入内容"
v-model="input2">
</el-input>
</div>
</div>
<div class="demo-input-suffix">
<div style="width: 27%;display: inline-block;text-align: right;">预计完成时间：</div>
<div style="width: 53%;display: inline-block">
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
</div>
</div>
<div class="demo-input-suffix" style="display: flex;align-items:flex-start;">
<div style="width: 25%;display: inline-block;text-align: right;height: 20px;line-height: 20px">工作内容：</div>
<div style="width: 55%;display: inline-block">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
</div>
</div>
<div class="foot-but">
<el-button class="bt1">取消</el-button>
<el-button class="bt2" style=" margin-left: 100px;">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
export default {
components: {ElButton},
data(){
return{
showAnalysis: false,
resDate: [
{date:"2019-12-20",content:"放假"},
{date:"2019-12-26",content:"去交电费"},
{date:"2019-11-26",content:"去学习vue"}
]
}
},
methods: {
dealMyDate(v) {
console.log(v)
let len = this.resDate.length
let res = ""
for (let i = 0; i < len; i++) {
if (this.resDate[i].date == v) {
res = this.resDate[i].content
console.log(res)
break
}
}
return res
},
closeAnalysisDialog() {
this.showAnalysis = false;
},
}
}
</script>
<style>
.date-wrap{
display: flex;
width: 100%;
height: 100%;
}
.left-wrap{
width: 70%;
height: 100%;
background-color: #fff;
}
/*日历样式*/
.left-wrap /deep/ .el-calendar__header{
background-color: #57617c;
border-bottom: none;
}
.left-wrap /deep/ .el-calendar-table thead th{
background-color: #57617c;
color: #fff;
font-size: 15px;
}
.left-wrap /deep/ .el-calendar__button-group{
display: none;
}
.left-wrap /deep/ .el-calendar__title{
text-align: center;
margin: 0 auto;
padding-top: 10px;
color: white;
}
.calendar-wrap{
/*height: 420px;*/
/*width: 600px;*/
display: flex;
align-items: center;
justify-content: center;
margin:0 auto;
}
.left-wrap /deep/ .el-calendar{
/*border: 1px #e5e5e7 solid;*/
}
.left-wrap /deep/ .el-calendar{
/*height: 380px;*/
margin: 20px;
width: 600px;
}
.left-wrap /deep/ .el-calendar__header{
height: 10%;
width: 100%;
padding: 0;
}
.left-wrap /deep/ .el-calendar-table thead th{
text-align: center;
}
.left-wrap /deep/ .el-calendar__body{
height: 80%;
width: 100%;
padding: 0;
}
.left-wrap /deep/ .el-calendar-day{
height: 60px;
text-align: center;
}
.left-wrap /deep/ .el-calendar-table .el-calendar-day{
padding: 22px;
}
.left-wrap /deep/ .el-backtop, .el-calendar-table td.is-today p{
height: 30px;
width: 30px;
color: white;
border-radius: 15px;
line-height: 30px;
margin: 0 auto;
margin-top: -6px;
background-image: linear-gradient(to right, #2160dc, #4880f0);;
}
.right-wrap{
width: 30%;
height: 100%;
background-color: #93a5cf;
}
.search-but /deep/ .el-button{
height: 30px;
line-height: 30px;
padding: 0 30px;
border-radius: 15px;
color: white;
background-image: linear-gradient(to right, #1e5cdc, #417cfd);
border: none;
}
.budge{
width: 10px;
height: 10px;
border-radius: 5px;
margin: 5px auto;
}
.budge0{
width: 10px;
height: 10px;
border-radius: 5px;
margin-top: 3px;
margin-right: 5px;
margin-left: 15px;
}
.red{
background-color: #c9413f;
}
.green{
background-color: #25b591;
}
.orange{
background-color: #ee915c;
}
.calendar-wrap /deep/ .el-button{
height: 30px;
width: 30px;
border-radius: 15px;
padding: 0;
background-color: #aec7fc;
color: white;
}
.calendar-wrap /deep/ .el-icon-arrow-left,
.calendar-wrap /deep/ .el-icon-arrow-right{
font-weight:900 !important;
}
.calendar-wrap /deep/ .el-calendar-table tr td:first-child,
.calendar-wrap /deep/ .el-calendar-table tr td:last-child{
background-color: #f9f8fe;
}
.explanation{
display: flex;
margin: 0 auto;
font-size: 12px;
color: #B3C0D1;
width: 600px;
border-top: 2px #e1e8f1 solid;
padding-top: 20px;
}
.right-wrap{
}
.mywork{
width: 100%;
height: 100%;
background-color: #f0f7fd;
}
.mywork /deep/ .el-button{
background-image: linear-gradient(to right, #1e5cdc, #417cfd);
float: right;
width: 90px;
height: 30px;
color: white;
border-radius: 15px;
padding: 0;
}
.myTime{
margin-top: 40px;
}
.assign{
margin-top: 40px;
}
.assign /deep/ .el-icon-step1 {
background: url('../assets/img/step1.png') center center no-repeat;
background-size: 15px 15px;
}
.assign /deep/ .el-icon-step1:before,
.assign /deep/ .el-icon-step2:before
{
content: "替";
visibility: hidden;
}
.assign /deep/ .el-icon-step2 {
background: url('../assets/img/step2.png') center center no-repeat;
background-size: 15px 15px;
}
.assign /deep/ .el-step__icon{
background: #f0f7fd;
}
.assign /deep/ .el-step__title.is-wait{
color: #333333;
}
.main-content /deep/ .el-dialog{
/*margin:0 !important;*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height: 450px !important;
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
background: #FFF;
}
.demo-input-suffix{
width: 100%;
padding-left: 10%;
font-size: 12px;
margin-top: 15px;
}
.demo-input-suffix /deep/ .el-input__inner{
height: 30px;
}
.demo-input-suffix /deep/ .el-input__icon{
line-height: 30px;
}
.foot-but{
display: flex;
justify-content: center;
}
.foot-but /deep/ .el-button{
height: 30px;
width: 80px;
border-radius: 15px;
line-height: 30px;
padding: 0;
margin-top: 20px;
}
.bt2{
background-image: linear-gradient(to right, #1e5cdc, #417cfd);
color: white;
}
.bt1{
background-image: linear-gradient(to right, #d6d5d3, #ededec);
}
</style>
\ No newline at end of file
src/views/todo.vue 0 → 100644
浏览文件 @ 498cd739
<template>
<div class="main-content">
<div class="title-wrap">待办事务</div>
<div class="center-wrap">
<div class="state-wrap">
<div class="select-wrap">
<div class="select-first">
<span class="txt-lip">选择日期：</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="日期">
</el-date-picker>
</div>
</div>
<div class="search-but">
<el-button @click="showAnalysis = true">新增</el-button>
</div>
</div>
<div class="table-wrap">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="num"
label="序号">
</el-table-column>
<el-table-column
prop="fileName"
label="文件名称">
</el-table-column>
<el-table-column
prop="person"
label="执行人">
</el-table-column>
<el-table-column
prop="expectTime"
label="预计完成时间">
</el-table-column>
<el-table-column
prop="realTime"
label="实际完成时间">
</el-table-column>
</el-table>
</div>
</div>
<div class="foot-wrap">
<el-pagination
background
layout="prev, pager, next"
:total="1000" style="float: right">
</el-pagination>
</div>
<el-dialog
title="新增项目"
width="400px"
:show-close="false"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:lock-scroll="true"
:visible.sync="showAnalysis"
style="width: 100%;height: 100%;margin-top: 80px;">
<div slot="title" class="header-title">
<div class="dialogHeader">待办事务</div>
<div @click="closeAnalysisDialog(showAnalysis)" class="dialogHeaderClose"><i class="el-icon-close"></i></div>
</div>
<div class="dialogBodyContent">
<div class="demo-input-suffix">
<div style="width: 25%;display: inline-block;text-align: right;">事务标题：</div>
<div style="width: 55%;display: inline-block;">
<el-input
placeholder="请输入内容"
v-model="input2">
</el-input>
</div>
</div>
<div class="demo-input-suffix">
<div style="width: 27%;display: inline-block;text-align: right;">事务标题：</div>
<div style="width: 53%;display: inline-block;">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="demo-input-suffix">
<div style="width: 27%;display: inline-block;text-align: right;">预计完成时间：</div>
<div style="width: 53%;display: inline-block">
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
</div>
</div>
<div class="demo-input-suffix" style="display: flex;align-items:flex-start;">
<div style="width: 25%;display: inline-block;text-align: right;height: 20px;line-height: 20px">事务内容：</div>
<div style="width: 55%;display: inline-block">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
</div>
</div>
<div class="foot-but">
<el-button class="bt1">取消</el-button>
<el-button class="bt2" style=" margin-left: 100px;">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
export default {
components: {ElButton},
data(){
return{
input1:'',
input2:'',
showAnalysis: false,
tableData: [{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
},{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
},{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
},{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
},{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
},{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
},{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
},{
num:'1',
fileName:'xxxxxx',
fileType:'类型1',
person:'张xx',
expectTime:'2020.08.06',
realTime:'2020.08.01'
}]
}
},
methods:{
closeAnalysisDialog() {
this.showAnalysis = false;
},
}
}
</script>
<style>
.main-content{
height: 100%;
}
.table-wrap{
margin-top: 8px;
}
/*表格样式--*/
.table-wrap /deep/ .el-table th, .el-table tr{
background-color: #fefcfe;
}
.table-wrap /deep/ .el-table{
border: 1px solid #f2f4f8;
}
.table-wrap /deep/ .el-table__header tr,
.table-wrap /deep/ .el-table__header th {
padding: 0;
height: 40px;
}
.table-wrap /deep/ .el-table__body tr,
.table-wrap /deep/ .el-table__body td {
padding: 0;
height: 40px;
}
/**/
.txt-lip{
font-size: 12px;
color: #8c9296;
}
.state-wrap{
height: 40px;
}
.select-wrap{
float: left;
display: flex;
}
.select-first /deep/ .el-input__icon{
display: none;
}
.select-second /deep/ .el-input__icon{
height: 30px;
line-height: 30px;
}
.select-wrap /deep/ .el-input__inner{
height: 30px;
line-height: 30px;
width: 140px;
}
.select-wrap /deep/ .el-input--prefix .el-input__inner{
padding-left: 10px;
}
.search-but{
float: right;
}
.search-but /deep/ .el-button{
height: 30px;
line-height: 30px;
padding: 0 30px;
border-radius: 15px;
color: white;
background-image: linear-gradient(to right, #1e5cdc, #417cfd);
border: none;
}
.main-content /deep/ .el-dialog{
/*margin:0 !important;*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height: 450px !important;
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
background: #FFF;
}
.demo-input-suffix{
width: 100%;
padding-left: 10%;
font-size: 12px;
margin-top: 15px;
}
.demo-input-suffix /deep/ .el-input__inner{
height: 30px;
}
.demo-input-suffix /deep/ .el-input__icon{
line-height: 30px;
}
.foot-but{
display: flex;
justify-content: center;
}
.foot-but /deep/ .el-button{
height: 30px;
width: 80px;
border-radius: 15px;
line-height: 30px;
padding: 0;
margin-top: 10px;
}
.bt2{
background-image: linear-gradient(to right, #1e5cdc, #417cfd);
color: white;
}
.bt1{
background-image: linear-gradient(to right, #d6d5d3, #ededec);
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论