Skip to content

M
mes-ui
Commit f6134476 authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

shouye

parent 35590c5a
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 58 deletions
pages/home/component/approval.vue
View file @ f6134476
<template>
<div>
<div class="approval">
<Card class="todolist">
<p class="row_head">
<Icon type="md-contact" class="f20" />
......@@ -9,7 +9,7 @@
<a class="row_more fr" @click="toivew">更多</a>
</p>
<div class="row_card_body">
<Table border :columns="columns1" :data="data1" height="230"></Table>
<Table border :columns="columns1" :data="data1" height="220"></Table>
</div>
</Card>
<Modal v-model="viewModal" width="800" title="详情">
......@@ -53,15 +53,15 @@ export default {
viewData: {}, //详情数据
columns1: [
{ type: "index", title: "序号", width: 70, align: "center" },
{ key: "schemaName", title: "类别", align: "center", width: 150 },
{ key: "schemaName", title: "类别", align: "center" },
{ key: "currentNodeName", title: "环节", align: "center" },
{ key: "nextNodeName", title: "下一环节", align: "center" },
{ key: "creationTime", title: "创建时间", align: "center", width: 170 },
{ key: "creationTime", title: "创建时间", align: "center" },
{
key: "id",
title: "操作",
align: "center",
width: 90,
width: 100,
render: (h, parmse) => {
return h("div", { class: "action" }, [
h(
......@@ -69,7 +69,7 @@ export default {
{
attrs: {
oprate: "add",
title:"查看"
title: "查看"
},
on: {
click: () => {
......@@ -121,13 +121,22 @@ export default {
};
</script>
<style lang="less" scoped>
.approval {
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
border-radius: 8px;
}
.row_head {
height: 30px;
color: #249e91;
color: #0099ff;
border-bottom: 1px solid #dcdfe6;
a {
color: #249e91;
color: #0099ff;
}
}
.row_card_body{
margin-top: 10px;
}
.mo_cont {
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
......
pages/home/component/staChart.vue
View file @ f6134476
<template>
<div class="stachart">
<Row :gutter="16">
<Col :span="8" style="padding-right:50px;">
<div class="row_head">
<Icon type="ios-images" class="f20" />
<span class="ml10">年度计划各产品类型总数量和各状态数量</span>
</div>
<div class="echarts-map">
<v-chart :options="braking" style="width:100%;100%;" />
</div>
</Col>
<Col :span="16">
<Row :gutter="16" class="row_head">
<Col span="7">
<Icon type="ios-images" class="f20" />
<span class="ml10">各车间计划执行状态的详细情况</span>
</Col>
<Col span="9">
<DatePicker
:value="value2"
format="yyyy/MM/dd"
type="daterange"
placement="bottom-end"
placeholder="Select date"
style="width: 200px"
></DatePicker>
<Button type="primary">查询</Button>
</Col>
<Col span="8" class="geng-duo">
<Icon type="md-settings" class="f20" />
</Col>
</Row>
<div class="echarts-map">
<v-chart :options="braking1" style="width:100%;100%;" />
</div>
</Col>
</Row>
</div>
</template>
<script>
import ECharts from "vue-echarts";
import echarts from "echarts/lib/echarts";
// import "echarts/lib/chart/pie";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/grid";
export default {
name: "echarts",
components: {
"v-chart": ECharts
},
data() {
return {
value2: "",
braking: {},
braking1: {}
};
},
mounted() {
this.statistics();
this.statistics1();
},
methods: {
statistics() {
this.braking = {
xAxis: {
// type: "category",
data: ["计划数量", "已完成", "执行中", "暂停中", "未开工"],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "#515A6E"
}
}
},
yAxis: {
splitLine: {
show: true,
lineStyle: {
color: "#eee",
type: "solid"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "#515A6E"
}
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
color: ["#73DDFF"],
series: [
{
data: [
{
value: 120,
itemStyle: {
normal: {
color: "#2680EB",
barBorderRadius: [30, 30, 0, 0]
}
}
},
{
value: 60,
itemStyle: {
normal: {
color: "#0DD78D",
barBorderRadius: [30, 30, 0, 0]
}
}
},
{
value: 210,
itemStyle: {
normal: {
color: "#FFA000",
barBorderRadius: [30, 30, 0, 0]
}
}
},
{
value: 210,
itemStyle: {
normal: {
color: "#FE7777",
barBorderRadius: [30, 30, 0, 0]
}
}
},
{
value: 210,
itemStyle: {
normal: {
color: "#515A6E",
barBorderRadius: [30, 30, 0, 0]
}
}
}
],
type: "bar",
barWidth: 10, //柱图宽度
barGap: "-20%" //柱图间距
}
]
};
},
statistics1() {
this.braking1 = {
color: ["#2680EB", "#0DD78D", "#FFA000", "#FE7777", "#515A6E"],
legend: {
data: ["计划数量", "已完成", "执行中", "暂停中", "未开工"],
top: 12
// textStyle: {
// color: "#515A6E"
// },
// itemWidth: 12,
// itemHeight: 10
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "0",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
// type: "category",
data: ["三车间", "五车间", "六车间", "七车间"],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "#515A6E"
}
}
},
yAxis: {
// type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#eee",
type: "solid"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "#515A6E"
}
}
},
series: [
{
name: "计划数量",
type: "bar",
barWidth: 20, //柱图宽度
barGap: "100%", //柱图间距
data: [110, 40, 100, 70, 50]
},
{
name: "已完成",
type: "bar",
barWidth: 20, //柱图宽度
data: [5, 40, 70, 50, 20]
},
{
name: "执行中",
type: "bar",
barWidth: 20, //柱图宽度
data: [50, 40, 60, 110, 40]
},
{
name: "暂停中",
type: "bar",
barWidth: 20, //柱图宽度
data: [60, 110, 90, 50, 20]
},
{
name: "未开工",
type: "bar",
barWidth: 20, //柱图宽度
data: [50, 68, 40, 100, 55]
}
]
};
}
}
};
</script>
<style lang="less" scoped>
.stachart {
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
border-radius: 8px;
padding: 10px;
width: 100%;
.echarts-map {
width: 100%;
height: 300px;
.echarts {
height: 300px;
}
}
.row_head {
height: 35px;
line-height: 30px;
color: #0099ff;
margin: 0 10px;
border-bottom: 1px solid #dcdfe6;
.geng-duo {
text-align: right;
}
}
}
</style>
\ No newline at end of file
pages/home/component/unreadMessage.vue
View file @ f6134476
<template>
<Card class="todolist">
<Card class="todolist-u">
<p class="row_head">
<Icon type="ios-chatbubbles" class="f20" />
<Badge :count="3" :offset="[9,-5]">
......@@ -72,18 +72,28 @@ export default {
};
</script>
<style lang="less" scoped>
.todolist-u {
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
border-radius: 8px;
}
.row_head {
height: 35px;
line-height: 30px;
color: #0099ff;
border-bottom: 1px solid #dcdfe6;
a {
color: #0099ff;
}
}
.msg {
height: 225px;
height: 215px;
overflow-y: auto;
margin-top: 10px;
.row-text {
height: 40px;
line-height: 40px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
}
</style>
\ No newline at end of file
pages/home/index2.vue
View file @ f6134476
<template>
<div class="home">
<Card class="card-user">
<div class="card-user">
<div class="img-header">
<img src="@/assets/images/home/user.png" />
</div>
......@@ -15,31 +15,31 @@
<div class="bg-b">
<Icon type="ios-arrow-back" />
</div>
<div class="bg bg0">
<div class="bg">
<Icon type="ios-cube" />
<p>电子对账单</p>
</div>
<div class="bg bg1">
<div class="bg">
<Icon type="md-mail" />
<p>站内邮件</p>
</div>
<div class="bg bg2">
<div class="bg">
<Icon type="md-map" />
<p>站内邮件</p>
</div>
<div class="bg bg3">
<div class="bg">
<Icon type="ios-cube" />
<p>电子对账单</p>
</div>
<div class="bg bg0">
<div class="bg">
<Icon type="ios-cube" />
<p>电子对账单</p>
</div>
<div class="bg bg1">
<div class="bg">
<Icon type="md-mail" />
<p>站内邮件</p>
</div>
<div class="bg bg2">
<div class="bg">
<Icon type="md-mail" />
<p>站内邮件</p>
</div>
......@@ -47,7 +47,7 @@
<Icon type="ios-arrow-forward" />
</div>
</div>
</Card>
</div>
<div class="card-list">
<div class="bg-b">
<Icon type="ios-arrow-back" />
......@@ -71,24 +71,29 @@
</div>
</div>
<Row class="table" :gutter="16">
<Col :span="12">
<Col :span="15">
<Approval ref="approval" />
</Col>
<Col :span="12">
<Col :span="9">
<UnreadMessage />
</Col>
</Row>
<div class="url-img"></div>
<div class="table">
<StaChart/>
</div>
</div>
</template>
<script>
import Api from "./api";
import Approval from "./component/approval";
import UnreadMessage from "./component/unreadMessage";
import StaChart from "./component/staChart";
export default {
components: {
Approval,
UnreadMessage
UnreadMessage,
StaChart
},
data() {
return {
......@@ -125,10 +130,17 @@ export default {
};
</script>
<style lang="less" scoped>
.ivu-layout-content {
background-color: none !important;
}
.home {
padding: 10px 0;
.card-user {
height: 100px;
padding: 25px 15px;
height: 120px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
border-radius: 8px;
.img-header {
margin-top: -8px;
float: left;
......@@ -161,31 +173,12 @@ export default {
float: left;
.ivu-icon {
font-size: 35px;
color: #2680eb;
}
p {
margin-top: 8px;
}
}
.bg0 {
.ivu-icon {
color: #ffc300;
}
}
.bg1 {
.ivu-icon {
color: #0099ff;
}
}
.bg2 {
.ivu-icon {
color: #ff7a8b;
}
}
.bg3 {
.ivu-icon {
color: #ffc300;
}
}
}
}
.card-list {
......@@ -194,13 +187,14 @@ export default {
margin-top: 15px;
justify-content: space-around;
.bg-b {
margin-top: 18px;
margin-top: 40px;
font-size: 30px;
color: #dcdfe6;
width: 35px;
}
.bg-l {
margin-top: 18px;
margin-top: 40px;
font-size: 30px;
color: #dcdfe6;
width: 35px;
......@@ -208,37 +202,46 @@ export default {
.img_bg01 {
background-color: #ff9100;
width: 200px;
width: 290px;
height: 130px;
cursor: pointer;
background: linear-gradient(to left, #ff9100, #ffcf87);
background: linear-gradient(to left, #0673df, #26c2e9);
}
.img_bg02 {
width: 200px;
width: 290px;
height: 130px;
cursor: pointer;
background: linear-gradient(to left, #003fd4, #8ac7fc);
background: linear-gradient(to left, #5140e9, #8a92fc);
}
.img_bg03 {
cursor: pointer;
width: 200px;
background: linear-gradient(to left, #fe1b1b, #fc9c92);
width: 290px;
height: 130px;
background: linear-gradient(to left, #04b573, #69fc8a);
}
.img_bg04 {
cursor: pointer;
width: 200px;
background: linear-gradient(to left, #249e91, #79ece0);
width: 290px;
height: 130px;
background: linear-gradient(to left, #6514cf, #a972fe);
}
.img_icon {
width: 24px;
margin: 23% 0 0 0;
width: 40px;
height: 40px;
margin: 45% 0 0 20%;
}
.text-p {
text-align: center;
color: #fff;
padding: 2% 0 0 40%;
p:first-child {
font-size: 20px;
font-size: 30px;
font-weight: bold;
margin-bottom: 5px;
}
p:nth-child(2) {
font-size: 18px;
}
}
}
.url-img {
......
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