Skip to content

M
mes-ui
Commit b50a72d9 authored by renjintao's avatar renjintao
Browse files
Options

Merge branch 'product' of git.mes123.com:zhouyx/mes-ui into product-rjt

parents 4fbd3d24 6640770b
Hide whitespace changes
Inline Side-by-side
Showing with 383 additions and 60 deletions
pages/home/component/approval.vue
View file @ b50a72d9
<template> <template>
<div> <div class="approval">
<Card class="todolist"> <Card class="todolist">
<p class="row_head"> <p class="row_head">
<Icon type="md-contact" class="f20" /> <Icon type="md-contact" class="f20" />
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<a class="row_more fr" @click="toivew">更多</a> <a class="row_more fr" @click="toivew">更多</a>
</p> </p>
<div class="row_card_body"> <div class="row_card_body">
<Table border :columns="columns1" :data="data1" height="230"></Table> <Table border :columns="columns1" :data="data1" height="220"></Table>
</div> </div>
</Card> </Card>
<Modal v-model="viewModal" width="800" title="详情"> <Modal v-model="viewModal" width="800" title="详情">
...@@ -53,15 +53,15 @@ export default { ...@@ -53,15 +53,15 @@ export default {
viewData: {}, //详情数据 viewData: {}, //详情数据
columns1: [ columns1: [
{ type: "index", title: "序号", width: 70, align: "center" }, { 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: "currentNodeName", title: "环节", align: "center" },
{ key: "nextNodeName", title: "下一环节", align: "center" }, { key: "nextNodeName", title: "下一环节", align: "center" },
{ key: "creationTime", title: "创建时间", align: "center", width: 170 }, { key: "creationTime", title: "创建时间", align: "center" },
{ {
key: "id", key: "id",
title: "操作", title: "操作",
align: "center", align: "center",
width: 90, width: 100,
render: (h, parmse) => { render: (h, parmse) => {
return h("div", { class: "action" }, [ return h("div", { class: "action" }, [
h( h(
...@@ -69,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ export default {
{ {
attrs: { attrs: {
oprate: "add", oprate: "add",
title:"查看" title: "查看"
}, },
on: { on: {
click: () => { click: () => {
...@@ -121,13 +121,22 @@ export default { ...@@ -121,13 +121,22 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <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 { .row_head {
height: 30px; height: 30px;
color: #249e91; color: #0099ff;
border-bottom: 1px solid #dcdfe6;
a { a {
color: #249e91; color: #0099ff;
} }
} }
.row_card_body{
margin-top: 10px;
}
.mo_cont { .mo_cont {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
......
pages/home/component/staChart.vue
View file @ b50a72d9
<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 @ b50a72d9
<template> <template>
<Card class="todolist"> <Card class="todolist-u">
<p class="row_head"> <p class="row_head">
<Icon type="ios-chatbubbles" class="f20" /> <Icon type="ios-chatbubbles" class="f20" />
<Badge :count="3" :offset="[9,-5]"> <Badge :count="3" :offset="[9,-5]">
...@@ -72,18 +72,28 @@ export default { ...@@ -72,18 +72,28 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <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 { .row_head {
height: 35px; height: 35px;
line-height: 30px; line-height: 30px;
color: #0099ff; color: #0099ff;
border-bottom: 1px solid #dcdfe6;
a {
color: #0099ff;
}
} }
.msg { .msg {
height: 225px; height: 215px;
overflow-y: auto; overflow-y: auto;
margin-top: 10px;
.row-text { .row-text {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
border-top: 1px solid #eee; border-bottom: 1px solid #eee;
} }
} }
</style> </style>
\ No newline at end of file
pages/home/index2.vue
View file @ b50a72d9
<template> <template>
<div class="home"> <div class="home">
<Card class="card-user"> <div class="card-user">
<div class="img-header"> <div class="img-header">
<img src="@/assets/images/home/user.png" /> <img src="@/assets/images/home/user.png" />
</div> </div>
...@@ -15,31 +15,31 @@ ...@@ -15,31 +15,31 @@
<div class="bg-b"> <div class="bg-b">
<Icon type="ios-arrow-back" /> <Icon type="ios-arrow-back" />
</div> </div>
<div class="bg bg0"> <div class="bg">
<Icon type="ios-cube" /> <Icon type="ios-cube" />
<p>电子对账单</p> <p>电子对账单</p>
</div> </div>
<div class="bg bg1"> <div class="bg">
<Icon type="md-mail" /> <Icon type="md-mail" />
<p>站内邮件</p> <p>站内邮件</p>
</div> </div>
<div class="bg bg2"> <div class="bg">
<Icon type="md-map" /> <Icon type="md-map" />
<p>站内邮件</p> <p>站内邮件</p>
</div> </div>
<div class="bg bg3"> <div class="bg">
<Icon type="ios-cube" /> <Icon type="ios-cube" />
<p>电子对账单</p> <p>电子对账单</p>
</div> </div>
<div class="bg bg0"> <div class="bg">
<Icon type="ios-cube" /> <Icon type="ios-cube" />
<p>电子对账单</p> <p>电子对账单</p>
</div> </div>
<div class="bg bg1"> <div class="bg">
<Icon type="md-mail" /> <Icon type="md-mail" />
<p>站内邮件</p> <p>站内邮件</p>
</div> </div>
<div class="bg bg2"> <div class="bg">
<Icon type="md-mail" /> <Icon type="md-mail" />
<p>站内邮件</p> <p>站内邮件</p>
</div> </div>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<Icon type="ios-arrow-forward" /> <Icon type="ios-arrow-forward" />
</div> </div>
</div> </div>
</Card> </div>
<div class="card-list"> <div class="card-list">
<div class="bg-b"> <div class="bg-b">
<Icon type="ios-arrow-back" /> <Icon type="ios-arrow-back" />
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
@click.native="goPage(item)" @click.native="goPage(item)"
> >
<div class="leftIco"> <div class="leftIco">
<img class="img_icon" src="@/assets/imgicon/u1640.png" alt /> <img class="img_icon" :src="imgUrl + item.image" alt />
</div> </div>
<div class="text-p"> <div class="text-p">
<p>{{item.totalUrl}}</p> <p>{{item.totalUrl}}</p>
...@@ -71,29 +71,34 @@ ...@@ -71,29 +71,34 @@
</div> </div>
</div> </div>
<Row class="table" :gutter="16"> <Row class="table" :gutter="16">
<Col :span="12"> <Col :span="15">
<Approval ref="approval" /> <Approval ref="approval" />
</Col> </Col>
<Col :span="12"> <Col :span="9">
<UnreadMessage /> <UnreadMessage />
</Col> </Col>
</Row> </Row>
<div class="url-img"></div> <div class="table">
<StaChart/>
</div>
</div> </div>
</template> </template>
<script> <script>
import Api from "./api"; import Api from "./api";
import Approval from "./component/approval"; import Approval from "./component/approval";
import UnreadMessage from "./component/unreadMessage"; import UnreadMessage from "./component/unreadMessage";
import StaChart from "./component/staChart";
export default { export default {
components: { components: {
Approval, Approval,
UnreadMessage UnreadMessage,
StaChart
}, },
data() { data() {
return { return {
listTask: [], listTask: [],
imgUrl: iconImg imgUrl: iconImg,
}; };
}, },
created() { created() {
...@@ -125,10 +130,17 @@ export default { ...@@ -125,10 +130,17 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ivu-layout-content {
background-color: none !important;
}
.home { .home {
padding: 10px 0; padding: 10px 0;
.card-user { .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 { .img-header {
margin-top: -8px; margin-top: -8px;
float: left; float: left;
...@@ -161,31 +173,12 @@ export default { ...@@ -161,31 +173,12 @@ export default {
float: left; float: left;
.ivu-icon { .ivu-icon {
font-size: 35px; font-size: 35px;
color: #2680eb;
} }
p { p {
margin-top: 8px; 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 { .card-list {
...@@ -194,13 +187,14 @@ export default { ...@@ -194,13 +187,14 @@ export default {
margin-top: 15px; margin-top: 15px;
justify-content: space-around; justify-content: space-around;
.bg-b { .bg-b {
margin-top: 18px; margin-top: 40px;
font-size: 30px; font-size: 30px;
color: #dcdfe6; color: #dcdfe6;
width: 35px; width: 35px;
} }
.bg-l { .bg-l {
margin-top: 18px; margin-top: 40px;
font-size: 30px; font-size: 30px;
color: #dcdfe6; color: #dcdfe6;
width: 35px; width: 35px;
...@@ -208,37 +202,46 @@ export default { ...@@ -208,37 +202,46 @@ export default {
.img_bg01 { .img_bg01 {
background-color: #ff9100; background-color: #ff9100;
width: 200px; width: 290px;
height: 130px;
cursor: pointer; cursor: pointer;
background: linear-gradient(to left, #ff9100, #ffcf87); background: linear-gradient(to left, #0673df, #26c2e9);
} }
.img_bg02 { .img_bg02 {
width: 200px; width: 290px;
height: 130px;
cursor: pointer; cursor: pointer;
background: linear-gradient(to left, #003fd4, #8ac7fc); background: linear-gradient(to left, #5140e9, #8a92fc);
} }
.img_bg03 { .img_bg03 {
cursor: pointer; cursor: pointer;
width: 200px; width: 290px;
background: linear-gradient(to left, #fe1b1b, #fc9c92); height: 130px;
background: linear-gradient(to left, #04b573, #69fc8a);
} }
.img_bg04 { .img_bg04 {
cursor: pointer; cursor: pointer;
width: 200px; width: 290px;
background: linear-gradient(to left, #249e91, #79ece0); height: 130px;
background: linear-gradient(to left, #6514cf, #a972fe);
} }
.img_icon { .img_icon {
width: 24px; width: 40px;
margin: 23% 0 0 0; height: 40px;
margin: 45% 0 0 20%;
} }
.text-p { .text-p {
text-align: center; text-align: center;
color: #fff; color: #fff;
padding: 2% 0 0 40%;
p:first-child { p:first-child {
font-size: 20px; font-size: 30px;
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin-bottom: 5px;
} }
p:nth-child(2) {
font-size: 18px;
}
} }
} }
.url-img { .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