Skip to content

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

大屏

parent 27ee0d2c
Hide whitespace changes
Inline Side-by-side
Showing with 1303 additions and 165 deletions
pages/bigScreen/consume.vue
View file @ 1172beb3
<template>
<div>
<div class="consumes">
<v-chart :options="braking" style="width:'100%',height:'100%'" />
</div>
</template>
......@@ -28,38 +28,40 @@ export default {
methods: {
statistics() {
this.braking = {
backgroundColor: "#2c343c",
// backgroundColor: "#2c343c",
title: {
text: "产品消耗工时占比",
left: "center",
top: 20,
// left: "left",
top: 25,
left: 90,
textStyle: {
color: "#ccc",
color: "#106FFE",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
orient: "vertical",
left: 10,
textStyle: {
color: "#ccc",
},
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
},
// legend: {
// orient: "vertical",
// left: 10,
// textStyle: {
// color: "#ccc",
// },
// data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
// },
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"],
radius: ["25%", "33%"],
center: ["28%", "60%"],
// avoidLabelOverlap: false,
label: {
show: false,
position: "outside",
normal: {
formatter: "{b}: {c} ({d}%)",
formatter: "{b}\n {d}%",
},
},
// emphasis: {
......@@ -84,14 +86,7 @@ export default {
normal: {
color: function (params) {
//自定义颜色
var colorList = [
"#00FFFF",
"#00FF00",
"#FFFF00",
"#FF8C00",
"#FF0000",
"#FE8463",
];
var colorList = ["#F62B65", "#FA873B", "#09D472", "#106FFE"];
return colorList[params.dataIndex];
},
},
......@@ -101,7 +96,6 @@ export default {
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" },
],
},
],
......@@ -109,4 +103,6 @@ export default {
},
},
};
</script>
\ No newline at end of file
</script>
<style lang="less">
</style>
\ No newline at end of file
pages/bigScreen/index.vue
View file @ 1172beb3
......@@ -3,29 +3,36 @@
<div class="big-screen">
<h3>见著MSE可视化平台</h3>
<div class="up-screen">
<div>
<div class="plan">
<MonthlyPlan></MonthlyPlan>
</div>
<div>2</div>
<div>
<div class="multiple">
<Multiple></Multiple>
</div>
<div class="consume">
<Consume></Consume>
</div>
<div><Workshop></Workshop></div>
<div>5</div>
<div class="shop"><Workshop></Workshop></div>
<div class="hours"><WorkingHours></WorkingHours></div>
</div>
<div class="down-screen">
<div>1</div>
<div><Suspend></Suspend></div>
<div>3</div>
<div>4</div>
<div class="suspend"><Suspend></Suspend></div>
<div class="task-type"><TaskType></TaskType></div>
<div class="pass-rate"><PassRate></PassRate></div>
<div class="quality-problem"><QualityProblem></QualityProblem></div>
</div>
</div>
</template>
<script>
import MonthlyPlan from "./monthlyPlan.vue";
import Multiple from "./multiple.vue";
import Consume from "./consume.vue";
import Workshop from "./workshop.vue";
import Suspend from "./suspend.vue";
import WorkingHours from "./workingHours.vue";
import TaskType from "./taskType.vue";
import PassRate from "./passRate.vue";
import QualityProblem from "./qualityProblem.vue";
export default {
components: {
......@@ -33,6 +40,11 @@ export default {
Consume,
Workshop,
Suspend,
WorkingHours,
TaskType,
PassRate,
QualityProblem,
Multiple,
},
data() {
return {};
......@@ -43,17 +55,58 @@ export default {
.big-screen {
width: 100%;
height: 100%;
padding: 35px 30px 22px 40px;
text-align: center;
// background: url("../../assets/images/home/menu.png");
background: url("../../assets/images/bigScreen/daping0.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #222341;
h3 {
width: 1341px;
height: 72.56px;
margin: 0 auto;
color: #106FFE;
font-size: 32px;
background: url("../../assets/images/bigScreen/daping1.png");
background-repeat: no-repeat;
}
.up-screen {
display: -webkit-flex;
display: flex;
margin-top: 30px;
.plan {
width: 28%;
}
.multiple {
width: 18%;
}
.consume {
width: 18%;
}
.shop {
width: 16%;
}
.hours {
width: 20%;
}
}
.down-screen {
display: -webkit-flex;
display: flex;
margin-top: 25px;
.suspend {
width: 38%;
}
.task-type {
width: 20%;
}
.pass-rate {
width: 25%;
}
.quality-problem {
width: 17%;
}
}
}
</style>
\ No newline at end of file
pages/bigScreen/monthlyPlan.vue
View file @ 1172beb3
<template>
<div>
<div class="monthly-p">
<v-chart :options="braking" style="width:'100%',height:'100%'" />
</div>
</template>
......@@ -28,48 +28,63 @@ export default {
methods: {
statistics() {
this.braking = {
backgroundColor: "#2c343c",
// backgroundColor: "#2c343c",
title: {
text: "月度计划进行情况",
left: "center",
top: 20,
left: "left",
left: 160,
top: 28,
textStyle: {
color: "#ccc",
color: "#106FFE",
},
},
// grid: {
// top:'40%',
// left: "3%",
// right: "4%",
// bottom: "3%",
// containLabel: true,
// },
tooltip: {
axisPointer: {
type: "line",
},
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1],
},
},
// visualMap: {
// show: false,
// min: 80,
// max: 600,
// inRange: {
// colorLightness: [0, 1],
// },
// },
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "50%"],
center: ["40%", "60%"],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 274, name: "联盟广告" },
{ value: 235, name: "视频广告" },
{ value: 400, name: "搜索引擎" },
{ value: 335, name: "暂停中" },
{ value: 310, name: "交检中" },
{ value: 274, name: "未开工" },
{ value: 235, name: "执行中" },
{ value: 400, name: "已完成" },
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: "radius",
label: {
// color: "rgba(255, 255, 255, 0.3)",
// show: false,
// position: "outside",
normal: {
formatter: "{b}\n {d}%",
},
},
labelLine: {
// lineStyle: {
......@@ -94,12 +109,11 @@ export default {
color: function (params) {
//自定义颜色
var colorList = [
"#00FFFF",
"#00FF00",
"#FFFF00",
"#FF8C00",
"#FF0000",
"#FE8463",
"#F62B65",
"#2F2F57",
"#FA873B",
"#09D472",
"#106FFE",
];
return colorList[params.dataIndex];
},
......@@ -116,4 +130,6 @@ export default {
},
},
};
</script>
\ No newline at end of file
</script>
<style lang="less">
</style>
pages/bigScreen/multiple.vue 0 → 100644
View file @ 1172beb3
<template>
<div class="mul">
<Row class="row-multiple">
<Col span="12">
<v-chart :options="braking1" style="width:'100%',height:'100%'"
/></Col>
<Col span="12">
<v-chart :options="braking2" style="width:'100%',height:'100%'"
/></Col>
</Row>
<Row class="row-multiple2">
<Col span="12">
<div class="row-l">
<h5>设备运行中</h5>
<h4>40台</h4>
</div>
</Col>
<Col span="12">
<div class="row-r">
<h5>故障设备</h5>
<h4>4台</h4>
</div>
</Col>
</Row>
<Row class="row-multiple3">
<Col span="12">
<div class="row-l">
<h5>待机设备</h5>
<h4>40台</h4>
</div>
</Col>
<Col span="12">
<div class="row-r">
<h5>维修保养设备数量</h5>
<h4>4台</h4>
</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 {
components: {
"v-chart": ECharts,
},
data() {
return {
braking1: {},
braking2: {},
};
},
mounted() {
this.getdata1();
this.getdata2();
},
methods: {
getdata1() {
this.braking1 = {
color: ["#FA873B", "rgba(250, 135, 59, 0.2)"],
title: {
text: "本月物料齐套率",
top: 25,
left: "left",
left: 25,
textStyle: {
color: "#106FFE",
fontWeight: "bolder",
fontSize: 13,
},
},
series: [
{
name: "来源",
type: "pie",
radius: ["16%", "18%"],
center: ["13%", "24%"],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: "center",
textStyle: {
fontSize: 16,
fontWeight: "bold",
},
formatter: "{b}\n{c}%",
},
},
data: [
{
value: 40,
name: "",
label: {
normal: {
show: true,
},
},
},
{
value: 100 - 40,
name: "",
},
],
},
],
};
},
getdata2() {
this.braking2 = {
color: ["#09D472", "rgba(9, 212, 114, 0.2)"],
title: {
text: "本月计划执行准确率",
top: 25,
left: "left",
left: -6,
textStyle: {
color: "#106FFE",
fontWeight: "bolder",
fontSize: 13,
},
},
series: [
{
name: "来源",
type: "pie",
radius: ["16%", "18%"],
center: ["10%", "24%"],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: "center",
textStyle: {
fontSize: 16,
fontWeight: "bold",
},
formatter: "{b}\n{c}%",
},
},
data: [
{
value: 40,
name: "",
label: {
normal: {
show: true,
},
},
},
{
value: 100 - 40,
name: "",
},
],
},
],
};
},
},
};
</script>
<style lang="less">
.mul {
width: 100%;
height: 100%;
.row-multiple {
height: 200px;
}
.row-multiple2 {
width: 100%;
position: relative;
.row-l {
margin-top: -145%;
margin-left: -10px;
h5 {
color: #106FFE;
}
h4 {
color: #09D472;
font-size: 20px;
margin-top: 25%;
}
}
.row-r {
position: absolute;
top: -236px;
right: -80px;
h5 {
color: #106FFE;
}
h4 {
color: #F62B65;
font-size: 20px;
margin-top: 80%;
}
}
}
.row-multiple3 {
width: 100%;
position: relative;
.row-l {
margin-top: -60%;
margin-left: -10px;
h5 {
color: #106FFE;
}
h4 {
color: #106FFE;
font-size: 20px;
margin-top: 25%;
}
}
.row-r {
position: absolute;
top: -100px;
right: -105px;
h5 {
color: #106FFE;
}
h4 {
color: #FA873B;
font-size: 20px;
margin-top: 45%;
}
}
}
}
</style>
pages/bigScreen/passRate.vue 0 → 100644
View file @ 1172beb3
<template>
<div class="task-type">
<v-chart :options="braking" style="width:'100%',height:'100%'" />
</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: "MonthlyPlan",
components: {
"v-chart": ECharts,
},
data() {
return {
braking: {},
};
},
mounted() {
this.statistics();
},
methods: {
statistics() {
// var lastData = [30, 25, 30, 20, 15, 18, 23, 21, 20, 10];
// var thisData = [30, 0, 10, 20, 10, 30, 0, 10, 20, 20];
this.braking = {
// backgroundColor: "rgba(7,28,52,1)",
title: {
text: "本月质量合格率",
left: "22%",
top: 16,
textStyle: {
color: "#106FFE",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
data: ["报废", "合格"],
top: "15%",
left: "2%",
orient: "vertical",
itemGap: 18,
itemWidth: 15,
itemHeight: 8,
textStyle: {
fontSize: "13",
color: "#FFFFFF",
},
},
grid: [
{
top: "35%",
left: "5%",
right: "30%",
bottom: "5%",
// width: "0%",
containLabel: true,
show: false,
},
{
top: "35%",
left: "5%",
right: "30%",
bottom: "15%",
// width: "100%",
//containLabel: true,
show: false,
},
],
yAxis: [
{
gridIndex: 0,
show: false,
type: "value",
// splitLine: {
// show: false, //去掉网格线
// },
},
{
gridIndex: 1,
show: true,
type: "value",
splitLine: {
show: false, //去掉网格线
},
axisLine: {
show: true,
lineStyle: {
color: "white",
opacity: 0.3,
},
},
axisLabel: {
color: "white",
},
},
],
xAxis: [
{
gridIndex: 0,
show: true,
inverse: true,
minorTick: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "white",
},
splitLine: {
show: false, //去掉网格线
},
type: "category",
// data:[-30,-25, -30, -20, -15, -18, -23,-21,-20,-10]
data: [
"八车间",
"七车间",
"六车间",
"五车间",
"四车间",
"三车间",
"二车间",
"一车间",
],
},
{
gridIndex: 1,
show: true,
minorTick: false,
inverse: true, //数据排序
axisLine: {
show: true,
lineStyle: {
color: "white",
opacity: 0.3,
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
color: "white",
},
type: "category",
// data:[-30,-25, -30, -20, -15, -18, -23,-21,-20,-10]
},
],
series: [
{
name: "合格",
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
stack: "0",
barWidth: 8,
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#62B800", // 0% 处的颜色
},
{
offset: 1,
color: "#00C576", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
barBorderRadius: [5, 5, 0, 0],
},
},
data: [58, 90, 15, 60, 50, 18, 23, 21],
},
{
name: "报废",
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
stack: "0",
barWidth: 8,
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#FFAA00", // 0% 处的颜色
},
{
offset: 1,
color: "#FF0900", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
barBorderRadius: [0, 0, 5, 5],
},
},
data: [0, -35, -10, -0, -0, -1, -30, -10],
},
{
name: "合格率",
type: "pie",
z: 100,
radius: "20%",
center: ["35%", "25%"],
labelLine: {
normal: {
show: false,
},
},
label: {
normal: {
position: "inner",
show: false,
},
},
// label: {
// normal: {
// textStyle: {
// color: "#fff", // 改变标示文字的颜色
// },
// },
// },
data: [
{
value: 100,
name: "合格",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#62B800", // 0% 处的颜色
},
{
offset: 1,
color: "#00C576", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
{
value: 20,
name: "报废",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#FFAA00", // 0% 处的颜色
},
{
offset: 1,
color: "#FF0900", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
],
// itemStyle: {
// emphasis: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: "rgba(0, 0, 0, 0.5)",
// },
// },
},
],
};
},
},
};
</script>
<style lang="less">
</style>
\ No newline at end of file
pages/bigScreen/qualityProblem.vue 0 → 100644
View file @ 1172beb3
<template>
<div class="quality">
<h4>质量问题滚动播报</h4>
<!-- <Table :columns="columns1" :data="data1"></Table> -->
<Row class="row-title">
<Col span="6">上报人</Col>
<Col span="6">问题原因</Col>
<Col span="6">报废数量</Col>
<Col span="6">上报时间</Col>
</Row>
<Row v-for="(item, index) in list" :key="index" class="item-row">
<Col span="6">{{ item.name }}</Col>
<Col span="6">{{ item.work }}</Col>
<Col span="6">{{ item.type }}</Col>
<Col span="6">{{ item.hours }}</Col>
</Row>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
name: "张飞",
work: "操作失败",
type: "20",
hours: "116h",
},
{
name: "张飞",
work: "操作失败",
type: "20",
hours: "116h",
},
{
name: "张飞",
work: "操作失败",
type: "20",
hours: "116h",
},
{
name: "张飞",
work: "操作失败",
type: "20",
hours: "116h",
},
{
name: "张飞",
work: "操作失败",
type: "20",
hours: "116h",
},
{
name: "张飞",
work: "操作失败",
type: "20",
hours: "116h",
},
{
name: "张飞",
work: "操作失败",
type: "20",
hours: "116h",
},
],
};
},
};
</script>
<style lang="less">
.quality {
color: #fff;
h4 {
height: 50px;
line-height: 50px;
font-size: 17px;
padding-top: 2px;
color: #106FFE;
font-family: PingFang SC;
font-weight: bold;
}
.row-title {
height: 36px;
line-height: 36px;
background: #2F2F57;
}
.item-row {
height: 44px;
line-height: 44px;
font-size: 13px;
}
}
</style>
\ No newline at end of file
pages/bigScreen/suspend.vue
View file @ 1172beb3
<template>
<div>
<div class="suspends">
<v-chart :options="braking" style="width:'100%',height:'100%'" />
</div>
</template>
......@@ -27,105 +27,274 @@ export default {
},
methods: {
statistics() {
var xData = (function () {
var data = [];
for (var i = 1; i <= 12; i++) {
data.push(i + "月");
}
return data;
})();
this.braking = {
backgroundColor: "#2c343c",
// color: ["#3398DB"],
// backgroundColor: "#344b58",
title: {
text: "暂停任务类型分布",
left: "center",
top: 20,
text: "年度计划完成情况",
left: "42%",
top: 16,
textStyle: {
color: "#ccc",
color: "#106FFE",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: ["计划数量", "已完成", "执行中", "暂停中", "未开工"],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
},
yAxis: {
splitLine: {
show: false,
// lineStyle: {
// color: "#eee",
// type: "solid",
// },
legend: {
data: [
{
name: "已完成",
},
{
name: "计划完成",
},
{
name: "完成率",
},
],
type: "scroll",
//icon: 'ret',
height: "88%",
left: "15",
top: "15%",
itemGap: 25,
itemWidth: 15,
itemHeight: 8,
textStyle: {
fontSize: "13",
color: "#FFFFFF",
},
axisTick: {
show: false,
},
grid: {
// borderWidth: 0,
top: "28%",
bottom: "12%",
left: "10%",
right: "7%",
textStyle: {
color: "#fff",
},
// axisLine: {
// show: false,
// },
axisLabel: {
textStyle: {
color: "#fff",
},
calculable: true,
xAxis: [
{
type: "category",
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
color: "#FFFFFF",
},
axisLine: {
show: true,
lineStyle: {
color: "white",
opacity: 0.3,
},
},
data: xData,
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#FFFFFF",
},
splitArea: {
show: false,
},
},
{
type: "value",
name: "",
// name: "完成率%",
min: 0,
max: 100,
axisLabel: {
color: "#FFFFFF",
show: true,
interval: "auto",
formatter: "{value}%",
},
axisLine: {
show: true,
lineStyle: {
color: "white",
opacity: 0.3,
},
},
splitLine: {
show: true,
lineStyle: {
color: "white",
opacity: 0.1,
},
},
},
],
series: [
{
name: "任务分类",
name: "已完成",
type: "bar",
barWidth: 10,
label: {
show: true,
position: "top",
stack: "总量",
barMaxWidth: 8,
barGap: "10%",
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#106FFE", // 0% 处的颜色
},
{
offset: 1,
color: "#1F1FFE", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
data: [709, 1917, 2455, 2610, 1719, 1433, 555, 888, 999, 1041],
},
{
name: "计划完成",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
barBorderRadius: [30, 30, 30, 30],
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#1268f3", // 0% 处的颜色
color: "#C500FF", // 0% 处的颜色
},
{
offset: 0.6,
color: "#08a4fa", // 60% 处的颜色
offset: 1,
color: "#4300FF", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
barBorderRadius: [6, 6, 0, 0],
},
},
data: [
327,
1776,
507,
1200,
800,
1500,
1800,
1700,
1600,
1800,
3680,
3588,
],
},
{
name: "完成率",
type: "line",
symbolSize: 5,
symbol: "circle",
itemStyle: {
normal: {
color: "rgba(255, 196, 53, 1)",
barBorderRadius: 0,
},
},
lineStyle: {
normal: {
width: 1,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255, 67, 2, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "#01ccfe", // 100% 处的颜色
color: "rgba(255, 196, 53, 1)", // 100% 处的颜色
},
],
false
),
global: false, // 缺省为 false
},
},
},
data: [10, 52, 200, 334, 390, 330, 220],
data: [1036, 3693, 2962, 3810, 2519, 2960, 2350, 2600, 2600, 2800],
},
// {
// name: "完成率",
// yAxisIndex: 1,
// // type: "line",
// stack: "完成率",
// smooth: true,
// itemStyle: {
// normal: {
// color: "#fff",
// lineStyle: {
// color: "#fff",
// },
// },
// },
// // areaStyle: { normal: { color: "#b78ffc" } },
// data: [50, 100, 120, 55, 23, 78, 200],
// },
],
};
},
},
};
</script>
\ No newline at end of file
</script>
<style lang="less">
</style>
\ No newline at end of file
pages/bigScreen/taskType.vue 0 → 100644
View file @ 1172beb3
<template>
<div class="task-type">
<v-chart :options="braking" style="width:'100%',height:'100%'" />
</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: "MonthlyPlan",
components: {
"v-chart": ECharts,
},
data() {
return {
braking: {},
};
},
mounted() {
this.statistics();
},
methods: {
statistics() {
this.braking = {
// backgroundColor: "#2c343c",
// color: ["#3398DB"],
title: {
text: "暂停任务类型分布",
left: "11%",
top: 20,
textStyle: {
color: "#106FFE",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
top: "25%",
left: "0%",
right: "52%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
data: ["设备故障", "物料缺少", "质量问题", "临时调度", "停电检修"],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
interval: 0,
rotate: -30, //角度顺时针计算的
textStyle: {
color: "#fff",
// fontSize: 15,
},
},
axisLine: {
show: true,
lineStyle: {
color: "white",
opacity: 0.3,
},
},
},
yAxis: {
splitLine: {
show: false,
// lineStyle: {
// color: "#eee",
// type: "solid",
// },
},
axisTick: {
show: false,
},
// axisLine: {
// show: false,
// },
axisLabel: {
textStyle: {
color: "#fff",
},
},
axisLine: {
show: true,
lineStyle: {
color: "white",
opacity: 0.3,
},
},
},
series: [
{
name: "任务分类",
type: "bar",
barWidth: 8,
// label: {
// show: true,
// position: "top",
// },
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0],
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "#4300FF", // 0% 处的颜色
},
{
offset: 1,
color: "#C500FF", // 100% 处的颜色
},
],
false
),
},
},
data: [10, 52, 200, 334, 390, 330, 220],
},
],
};
},
},
};
</script>
<style lang="less">
</style>
\ No newline at end of file
pages/bigScreen/workingHours.vue 0 → 100644
View file @ 1172beb3
<template>
<div class="workong-hours">
<h4>本月工人工时排行</h4>
<div class="row-body">
<Row v-for="(item, index) in list" :key="index">
<Col span="2">{{ index + 1 }}</Col>
<Col span="6">{{ item.name }}</Col>
<Col span="10">{{ item.work }}/{{ item.type }}</Col>
<Col span="6">{{ item.hours }}</Col>
</Row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
name: "张飞",
work: "总装",
type: "电工组",
hours: "116h",
},
{
name: "张飞",
work: "总装",
type: "电工组",
hours: "116h",
},
{
name: "张飞",
work: "总装",
type: "电工组",
hours: "116h",
},
{
name: "张飞",
work: "总装",
type: "电工组",
hours: "116h",
},
{
name: "张飞",
work: "总装",
type: "电工组",
hours: "116h",
},
{
name: "张飞",
work: "总装",
type: "电工组",
hours: "116h",
},
{
name: "张飞",
work: "总装",
type: "电工组",
hours: "116h",
},
],
};
},
};
</script>
<style lang="less">
.workong-hours {
color: #fff;
h4 {
height: 40px;
line-height: 40px;
color: #106FFE;
margin-top: 20px;
margin-left: 35px;
font-size: 17px;
font-family: PingFang SC;
font-weight: bold;
}
.row-body {
margin-left: 20%;
font-size: 13px;
.ivu-row {
line-height: 48px;
}
}
}
</style>
\ No newline at end of file
pages/bigScreen/workshop.vue
View file @ 1172beb3
<template>
<div>
<div class="in">
<v-chart :options="braking" style="width:'100%',height:'100%'" />
</div>
</template>
......@@ -28,14 +28,14 @@ export default {
methods: {
statistics() {
this.braking = {
backgroundColor: "#2c343c",
// backgroundColor: "#2c343c",
// color: ["#3398DB"],
title: {
text: "本月各车间工时排名",
left: "center",
top: 20,
left: 100,
top: 25,
textStyle: {
color: "#ccc",
color: "#106FFE",
},
},
tooltip: {
......@@ -46,43 +46,27 @@ export default {
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
left: "9%",
right: "53%",
bottom: -18,
top: "16%",
containLabel: true,
},
xAxis: [
{
type: "value",
axisLine: {
//y轴
show: false,
lineStyle: {
color: "#fff",
},
},
axisTick: {
//y轴刻度线
show: false,
},
splitLine: {
//网格线
show: false,
},
},
],
xAxis: { show: false },
yAxis: [
{
type: "category",
data: [
"一车间",
"二车间",
"三车间",
"四车间",
"五车间",
"六车间",
"八车间",
"七车间",
"六车间",
"五车间",
"四车间",
"三车间",
"二车间",
"一车间",
],
axisTick: {
//y轴刻度线
show: false,
......@@ -100,22 +84,53 @@ export default {
{
name: "车间工时",
type: "bar",
barWidth: 10,
barWidth: 8,
label: {
show: true,
position: "right",
textStyle: {
color: "#FFFFFF",
fontSize: 16,
fontWeight: "bold",
},
},
// itemStyle: {
// normal: {
// color: "#2680EB",
// barBorderRadius: [30, 30, 30, 30],
// },
// },
itemStyle: {
normal: {
color: "#2680EB",
barBorderRadius: [30, 30, 30, 30],
barBorderRadius: [6, 6, 6, 6],
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: "#08387F", // 0% 处的颜色
},
{
offset: 1,
color: "#106FFE", // 100% 处的颜色
},
],
false
),
},
},
data: [10, 52, 200, 334, 390, 330, 220],
data: [101, 52, 200, 334, 390, 330, 220, 330],
},
],
};
},
},
};
</script>
\ No newline at end of file
</script>
<style lang="less" >
</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