Skip to content

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

首页

parent fba44059
Hide whitespace changes
Inline Side-by-side
Showing with 1035 additions and 23 deletions
pages/home/component/approval.vue
View file @ 588e95de
......@@ -63,27 +63,27 @@ export default {
align: "center",
width: 100,
render: (h, parmse) => {
return h("div", { class: "action" }, [
return h("div", [
h(
"op",
{
attrs: {
oprate: "add",
title: "查看"
title: "查看",
},
on: {
click: () => {
this.viewRow(parmse.row);
}
}
},
},
},
"查看"
)
),
]);
}
}
},
},
],
data1: []
data1: [],
};
},
created() {
......@@ -98,10 +98,10 @@ export default {
pageIndex: 1,
pageSize: 20,
conditions: [
{ fieldName: "type", fieldValue: 2, conditionalType: "Equal" }
]
{ fieldName: "type", fieldValue: 2, conditionalType: "Equal" },
],
};
Api.getpaged(parme).then(res => {
Api.getpaged(parme).then((res) => {
let arry = res.result.items;
let arr = arry.slice(0, 4);
this.data1 = arr;
......@@ -115,9 +115,9 @@ export default {
var info = { id: "123", message: "成功" };
this.$router.push({ name: "handle", params: info });
// tab(1)
}
},
},
mounted() {}
mounted() {},
};
</script>
<style lang="less" scoped>
......@@ -129,12 +129,12 @@ export default {
.row_head {
height: 30px;
color: #0099ff;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid #dcdfe6;
a {
color: #0099ff;
}
}
.row_card_body{
.row_card_body {
margin-top: 10px;
}
.mo_cont {
......
pages/home/component/materielChart.vue 0 → 100644
View file @ 588e95de
<template>
<div class="stachart">
<div :gutter="16" class="row_head">
<Icon type="ios-images" class="f20" />
<span class="ml10">物料相关统计</span>
</div>
<div class="echarts-map">
<v-chart :options="braking" />
</div>
</div>
</template>
<script>
import Api from "../api";
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: {},
};
},
mounted() {
this.statistics();
},
methods: {
statistics() {
// let conditions = [
// {
// fieldName: "status",
// fieldValue: "1",
// conditionalType: "Equal",
// },
// ];
// let data = {
// conditions: conditions,
// };
// Api.planorderstatuscount(data).then((r) => {
// var allTotal = "";
// var listData = [];
// var status = ["计划数量"];
// r.result.chidren.map((e) => {
// status.push(e.status);
// });
// allTotal = r.result.allTotal;
// listData = r.result.chidren;
var data = [
{
name: "待复验",
value: 6,
},
{
name: "待配套",
value: 16,
},
{
name: "库存预警",
value: 54,
},
{
name: "现场缺料呼叫",
value: 27,
},
];
var titleArr = [],
seriesArr = [];
var sCenter,
TitleXy = {};
var colors = [
["#2680EB", "#E7E7E7"],
["#0DD78D", "#E7E7E7"],
["#FE7777", "#E7E7E7"],
["#FFA000", "#E7E7E7"],
];
data.forEach(function (item, index) {
if (index < 2) {
sCenter = [index * 50 + 10 + "%", "35%"];
TitleXy = {
left: index * 50 + 10 + "%",
top: "58%",
};
} else {
sCenter = [(index - 2) * 50 + 35 + "%", "65%"];
TitleXy = {
left: (index - 2) * 50 + 35 + "%",
top: "88%",
};
}
titleArr.push({
text: item.name,
left: TitleXy.left,
top: TitleXy.top,
textAlign: "center",
textStyle: {
fontWeight: "bold",
fontSize: "14",
color: colors[index][0],
textAlign: "center",
},
});
seriesArr.push({
name: item.name,
type: "pie",
clockWise: false,
radius: [50, 55],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: sCenter,
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
return params.value;
},
position: "center",
show: true,
textStyle: {
fontSize: "20",
fontWeight: "bold",
color: colors[index][0],
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
this.braking = {
backgroundColor: "#fff",
title: titleArr,
series: seriesArr,
};
// });
},
statistics1() {
// let conditions = [];
// let data = {
// conditions: conditions,
// };
// Api.orderstatuscount(data).then((r) => {
// let listData = [];
// let name = [];
// let allTotal = [];
// listData = r.result;
// r.result.map((e) => {
// name.push(e.name);
// allTotal.push(e.allTotal);
// });
// });
},
viewRow(rowData) {
// this.viewModal = true;
// this.viewData = rowData;
},
},
};
</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: 280px;
}
}
.row_head {
height: 35px;
line-height: 30px;
color: #0099ff;
margin-left: 10px;
border-bottom: 1px solid #dcdfe6;
}
}
</style>
\ No newline at end of file
pages/home/component/staChart.vue
View file @ 588e95de
......@@ -7,10 +7,10 @@
<span class="ml10">年度计划各产品类型总数量和各状态数量</span>
</div>
<div class="echarts-map">
<v-chart :options="braking" style="width:100%;100%;" />
<v-chart :options="braking" />
</div>
</Col>
<Col :span="16">
<Col :span="16" style="padding-right:20px;">
<Row :gutter="16" class="row_head">
<Col span="7">
<Icon type="ios-images" class="f20" />
......@@ -27,12 +27,9 @@
></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%;" />
<v-chart :options="braking1" />
</div>
</Col>
</Row>
......@@ -316,7 +313,7 @@ export default {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
border-radius: 8px;
padding: 10px;
width: 100%;
.echarts-map {
width: 100%;
height: 300px;
......
pages/home/component/suspendChart.vue 0 → 100644
View file @ 588e95de
<template>
<div class="stachart">
<div class="row_head">
<Icon type="ios-images" class="f20" />
<span class="ml10">暂停任务统计</span>
</div>
<div class="echarts-map">
<v-chart :options="braking" />
</div>
</div>
</template>
<script>
import Api from "../api";
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: {},
};
},
mounted() {
this.statistics();
},
methods: {
statistics() {
// let conditions = [
// {
// fieldName: "status",
// fieldValue: "1",
// conditionalType: "Equal",
// },
// ];
// let data = {
// conditions: conditions,
// };
// Api.planorderstatuscount(data).then((r) => {
// var allTotal = "";
// var listData = [];
// var status = ["计划数量"];
// r.result.chidren.map((e) => {
// status.push(e.status);
// });
// allTotal = r.result.allTotal;
// listData = r.result.chidren;
this.braking = {
xAxis: {
// type: "category",
data: ["fp-2", "fp-4", "fp-5", "fp-7", "fp-8"],
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: [
{
// name:'计划数量',
value: 331,
itemStyle: {
normal: {
color: "#2680EB",
barBorderRadius: [30, 30, 0, 0],
},
},
},
{
value: 112,
itemStyle: {
normal: {
color: "#0DD78D",
barBorderRadius: [30, 30, 0, 0],
},
},
},
{
value: 112,
itemStyle: {
normal: {
color: "#FFA000",
barBorderRadius: [30, 30, 0, 0],
},
},
},
{
value: 152,
itemStyle: {
normal: {
color: "#FE7777",
barBorderRadius: [30, 30, 0, 0],
},
},
},
{
value: 24,
itemStyle: {
normal: {
color: "#515A6E",
barBorderRadius: [30, 30, 0, 0],
},
},
},
],
type: "bar",
barWidth: 10, //柱图宽度
barGap: "-20%", //柱图间距
},
],
};
// });
},
statistics1() {
// let conditions = [];
// let data = {
// conditions: conditions,
// };
// Api.orderstatuscount(data).then((r) => {
// let listData = [];
// let name = [];
// let allTotal = [];
// listData = r.result;
// r.result.map((e) => {
// name.push(e.name);
// allTotal.push(e.allTotal);
// });
// });
},
viewRow(rowData) {
// this.viewModal = true;
// this.viewData = rowData;
},
},
};
</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: 280px;
}
}
.row_head {
height: 35px;
line-height: 30px;
margin-left: 10px;
color: #0099ff;
border-bottom: 1px solid #dcdfe6;
}
}
</style>
\ No newline at end of file
pages/home/component/unqualifiedEcharts.vue 0 → 100644
View file @ 588e95de
<template>
<div class="stachart">
<div :gutter="16" class="row_head">
<Icon type="ios-images" class="f20" />
<span class="ml10">不合格品审理单统计</span>
</div>
<Row :gutter="16">
<Col :span="8" style="padding-right:50px;">
<div class="echarts-map">
<v-chart :options="braking" />
</div>
</Col>
<Col :span="16">
<div class="table-b">
<Table border :columns="columns1" :data="data1" height="280"></Table>
</div>
</Col>
</Row>
</div>
</template>
<script>
import Api from "../api";
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: {},
columns1: [
{ type: "index", title: "序号", width: 70, align: "center" },
{ key: "schemaName", title: "产品名称", align: "center" },
{ key: "currentNodeName", title: "车间", align: "center" },
{ key: "nextNodeName", title: "审批结果", align: "center" },
{ key: "creationTime", title: "审批时间", align: "center" },
{
key: "id",
title: "操作",
align: "center",
width: 100,
render: (h, parmse) => {
return h("div", [
h(
"op",
{
attrs: {
oprate: "add",
title: "查看",
},
on: {
click: () => {
this.viewRow(parmse.row);
},
},
},
"查看"
),
]);
},
},
],
data1: [
{ creationTime: "2020-08-01" },
{ creationTime: "2020-08-01" },
{ creationTime: "2020-08-01" },
{ creationTime: "2020-08-01" },
{ creationTime: "2020-08-01" },
{ creationTime: "2020-08-01" },
],
};
},
mounted() {
this.statistics();
// this.statistics1();
},
methods: {
statistics() {
// let conditions = [
// {
// fieldName: "status",
// fieldValue: "1",
// conditionalType: "Equal",
// },
// ];
// let data = {
// conditions: conditions,
// };
// Api.planorderstatuscount(data).then((r) => {
// var allTotal = "";
// var listData = [];
// var status = ["计划数量"];
// r.result.chidren.map((e) => {
// status.push(e.status);
// });
// allTotal = r.result.allTotal;
// listData = r.result.chidren;
this.braking = {
tooltip: {
// trigger: "item",
// formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
orient: "vertical",
right: 10,
bottom: 10,
data: ["一车间", "三车间", "五车间", "六车间"],
},
color: ["#2680EB", "#0DD78D", "#FFA000", "#FE7777"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["55%", "80%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "一车间" },
{ value: 310, name: "三车间" },
{ value: 234, name: "五车间" },
{ value: 135, name: "六车间" },
],
},
],
};
// });
},
statistics1() {
// let conditions = [];
// let data = {
// conditions: conditions,
// };
// Api.orderstatuscount(data).then((r) => {
// let listData = [];
// let name = [];
// let allTotal = [];
// listData = r.result;
// r.result.map((e) => {
// name.push(e.name);
// allTotal.push(e.allTotal);
// });
// });
},
viewRow(rowData) {
// this.viewModal = true;
// this.viewData = rowData;
},
},
};
</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 20px 0 20px;
width: 100%;
.echarts-map {
width: 100%;
height: 300px;
.echarts {
height: 280px;
}
}
.row_head {
height: 35px;
line-height: 30px;
color: #0099ff;
// margin: 0 10px;
border-bottom: 1px solid #dcdfe6;
.geng-duo {
text-align: right;
}
}
.table-b{
margin-top:10px;
}
}
</style>
\ No newline at end of file
pages/home/component/workChart.vue 0 → 100644
View file @ 588e95de
<template>
<div class="stachart">
<div :gutter="16" class="row_head">
<Icon type="ios-images" class="f20" />
<span class="ml10">工单任务状态分布</span>
</div>
<div class="echarts-map">
<v-chart :options="braking"/>
</div>
</div>
</template>
<script>
import Api from "../api";
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: {},
};
},
mounted() {
this.statistics();
},
methods: {
statistics() {
// let conditions = [
// {
// fieldName: "status",
// fieldValue: "1",
// conditionalType: "Equal",
// },
// ];
// let data = {
// conditions: conditions,
// };
// Api.planorderstatuscount(data).then((r) => {
// var allTotal = "";
// var listData = [];
// var status = ["计划数量"];
// r.result.chidren.map((e) => {
// status.push(e.status);
// });
// allTotal = r.result.allTotal;
// listData = r.result.chidren;
this.braking = {
title: {
// text: "广州市天河区网络安全建设情况",
// textStyle: {
// color: "#fff",
// fontSize: 20,
// fontWeight: "400",
// },
},
color: ["#2680EB", "#0DD78D", "#FFA000", "#FE7777", "#515A6E"],
// title: {
// text: '网络/安全设备',
// left: '60',
// top: 0,
// textAlign: 'center',
// textStyle: {
// color: '#fff',
// fontSize: 14,
// fontWeight: 0
// }
// },
grid: {
left: -100,
top: 50,
bottom: 10,
right: 25,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
legend: {
type: "scroll",
orient: "vartical",
// x: "right",
// top: "center",
right: "10",
bottom: "10",
// itemWidth: 16,
// itemHeight: 8,
// itemGap: 16,
// textStyle: {
// color: "#A3E2F4",
// fontSize: 12,
// fontWeight: 0,
// },
data: ["已派工", "待派工", "执行中", "暂停中", "未开工"],
},
polar: {},
angleAxis: {
interval: 1,
type: "category",
data: [],
z: 10,
axisLine: {
show: false,
lineStyle: {
// color: "#0B4A6B",
width: 1,
type: "solid",
},
},
axisLabel: {
interval: 0,
show: true,
// color: "#0B4A6B",
margin: 8,
fontSize: 16,
},
},
radiusAxis: {
min: 40,
max: 100,
interval: 10,
axisLine: {
show: false,
lineStyle: {
// color: "#0B3E5E",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: "{value} %",
show: false,
padding: [0, 0, 10, 0],
// color: "#0B3E5E",
fontSize: 16,
},
splitLine: {
lineStyle: {
// color: "#0B3E5E",
width: 2,
type: "solid",
},
},
},
calculable: true,
series: [
{
type: "pie",
radius: ["5%", "10%"],
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 30,
length2: 55,
},
emphasis: {
show: false,
},
},
data: [
{
name: "",
value: 0,
itemStyle: {
normal: {
color: "#0B4A6B",
},
},
},
],
},
{
type: "pie",
radius: ["75%", "80%"],
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 10,
length2: 35,
},
emphasis: {
show: false,
},
},
name: "",
data: [
{
name: "",
value: 0,
itemStyle: {
normal: {
color: "#ccc",
},
},
},
],
},
{
stack: "a",
type: "pie",
radius: ["20%", "60%"],
roseType: "area",
zlevel: 5,
label: {
normal: {
show: true,
formatter: "{c}",
textStyle: {
fontSize: 12,
},
position: "outside",
},
emphasis: {
show: true,
},
},
labelLine: {
normal: {
show: true,
length: 5,
length2: 35,
},
emphasis: {
show: false,
},
},
data: [
{
value: 10,
name: "已派工",
},
{
value: 5,
name: "待派工",
},
{
value: 15,
name: "执行中",
},
{
value: 25,
name: "暂停中",
},
{
value: 20,
name: "未开工",
},
],
},
],
};
// });
},
statistics1() {
// let conditions = [];
// let data = {
// conditions: conditions,
// };
// Api.orderstatuscount(data).then((r) => {
// let listData = [];
// let name = [];
// let allTotal = [];
// listData = r.result;
// r.result.map((e) => {
// name.push(e.name);
// allTotal.push(e.allTotal);
// });
// });
},
viewRow(rowData) {
// this.viewModal = true;
// this.viewData = rowData;
},
},
};
</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: 280px;
}
}
.row_head {
height: 35px;
line-height: 30px;
color: #0099ff;
margin-left: 10px;
border-bottom: 1px solid #dcdfe6;
.geng-duo {
text-align: right;
}
}
}
</style>
\ No newline at end of file
pages/home/index.vue
View file @ 588e95de
......@@ -55,9 +55,50 @@
<UnreadMessage />
</Col>
</Row>
<div class="table">
<div class="table title-r">
<a class="a-r" @click="set">
<Icon type="md-settings" class="f20" />
</a>
<StaChart />
</div>
<div class="table title-r">
<a class="a-r" @click="set">
<Icon type="md-settings" class="f20" />
</a>
<UnqualifiedEcharts />
</div>
<Row class="table title-r" :gutter="16">
<Col :span="8" class="title-r">
<a class="a-r" @click="set">
<Icon type="md-settings" class="f20" />
</a>
<WorkChart />
</Col>
<Col :span="8" class="title-r">
<a class="a-r" @click="set">
<Icon type="md-settings" class="f20" />
</a>
<SuspendChart />
</Col>
<Col :span="8" class="title-r">
<a class="a-r" @click="set">
<Icon type="md-settings" class="f20" />
</a>
<MaterielChart />
</Col>
</Row>
<Modal v-model="modal1" title="统计列表显示设置" width="1300" footer-hide>
<Divider>生产计划状态监控</Divider>
<StaChart />
<Divider>不合格品审理单统计</Divider>
<UnqualifiedEcharts />
<Divider>班组工单监控</Divider>
<WorkChart />
<Divider>暂停任务统计</Divider>
<SuspendChart />
<Divider>物料相关统计</Divider>
<MaterielChart />
</Modal>
</div>
</template>
<script>
......@@ -65,15 +106,25 @@ import Api from "./api";
import Approval from "./component/approval";
import UnreadMessage from "./component/unreadMessage";
import StaChart from "./component/staChart";
import UnqualifiedEcharts from "./component/unqualifiedEcharts";
import WorkChart from "./component/workChart";
import SuspendChart from "./component/suspendChart";
import MaterielChart from "./component/materielChart";
import { mapState } from "vuex";
export default {
components: {
Approval,
UnreadMessage,
StaChart,
UnqualifiedEcharts,
WorkChart,
SuspendChart,
MaterielChart,
},
data() {
return {
modal1: false,
listTask: [],
listFavorite: [],
imgUrl: iconImg,
......@@ -136,6 +187,15 @@ export default {
toPage(u) {
this.$router.push(u.url);
},
set() {
this.modal1 = true;
},
// ok() {
// this.$Message.info("Clicked ok");
// },
// cancel() {
// this.$Message.info("Clicked cancel");
// },
},
};
</script>
......@@ -268,5 +328,19 @@ export default {
.table {
margin-top: 15px;
}
.title-r {
position: relative;
}
.a-r {
position: absolute;
top: 15px;
right: 15px;
z-index: 9999;
}
.set-p {
width: 100%;
margin: 0 auto;
// text-align: center;
}
}
</style>
\ No newline at end of file
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