Skip to content

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

demo02/demo06

parent 73b77d8a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 884 additions and 66 deletions
assets/css/base.less
View file @ e51bf68e
......@@ -351,6 +351,9 @@ div::-webkit-scrollbar-corner {
.pt15 {
padding-top: 15px
}
.pr30{
padding-right: 30px;
}
.bnone {
border: none;
......
pages/demo/02/echart1.vue 0 → 100644
View file @ e51bf68e
<template>
<div id="myChart" class="echarts_box"></div>
</template>
<script>
export default {
name: "echart1",
data() {
return {
};
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color: ["#d63834", "#e06717", "#d18f23", "#006ed2"],
series: [
{
name: "实时故障",
type: "pie",
radius: [20, 50],
center: ["50%", "50%"],
roseType: "radius",
data: [
{ value: 12, name: "一级故障" },
{ value: 10, name: "二级故障" },
{ value: 20, name: "三级故障" },
{ value: 8, name: "其他故障" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {
this.loadEchart();
}
};
</script>
<style scoped>
.echarts_box {
width: 260px;
height: 280px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2.vue 0 → 100644
View file @ e51bf68e
<template>
<div class="tc" >
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart5" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart5"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2a.vue 0 → 100644
View file @ e51bf68e
<template>
<div class="tc">
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart6" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart6"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2b.vue 0 → 100644
View file @ e51bf68e
<template>
<div class="tc">
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart7" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2b",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart7"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2c.vue 0 → 100644
View file @ e51bf68e
<template>
<div class="tc">
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart8" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart8"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart3.vue 0 → 100644
View file @ e51bf68e
<template>
<div id="myChart3" class="echarts_box3"></div>
</template>
<script>
export default {
name: "echart3",
data() {
return {};
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart3"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color: ["#006fd6", "#cf8d22", "#009c96"],
series: [
{
name: "任务执行状态",
type: "pie",
radius: [10, 50],
center: ["50%", "50%"],
roseType: "radius",
data: [
{ value: 65, name: "完工" },
{ value: 45, name: "未开工" },
{ value: 100, name: "进行中" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {
this.loadEchart();
}
};
</script>
<style scoped>
.echarts_box3 {
width: 260px;
height: 280px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/index.vue
View file @ e51bf68e
This diff is collapsed.
pages/demo/02/train.vue
View file @ e51bf68e
<template>
<div>
<div style="width:540px">
<Row>
<Col :span="24">
<Col span="24">
<div class="trainTitle">
<ul>
<li v-width="60">
&nbsp;
<li style="width:auto;line-height:45px;font-size:18px;">
<span :style="'color:'+this.trainData.colorTitle">{{trainData.title}}</span>
</li>
<li class="tc" v-for="(item1,index1) in this.trainData.users" :key="index1" v-width="liWidth">
{{item1.position}}
......@@ -15,12 +15,9 @@
</ul>
</div>
</Col>
<Col :span="24">
<div class="train">
<Col span="24">
<div class="train" @click="clickTrain">
<ul>
<li style="width:auto;line-height:45px;font-size:18px;">
<span :style="'color:'+this.trainData.colorTitle">{{trainData.title}}</span>
</li>
<li>
<img :src="'/imgshow/s-l-'+this.trainData.color+'.png'" />
<p class="tc">
......@@ -62,7 +59,7 @@ export default {
data() {
return {
trainData: null,
liWidth: 120
liWidth: 10
};
},
props: {
......@@ -75,13 +72,19 @@ export default {
},
mounted() {
},
methods:{
clickTrain()
{
this.$emit("on-ok");
}
},
watch: {
row(v) {
if (v != null) {
this.trainData=this.$u.clone(this.row)
this.liWidth =
(this.trainData.num.length * 60) / this.trainData.users.length;
(this.trainData.num.length * 55) / this.trainData.users.length;
}
}
}
......@@ -95,6 +98,10 @@ export default {
margin: 0 10px;
text-align: center;
}
.train{
margin-right: 0px;
}
.train ul li {
width: 60px;
height: 30px;
......
pages/demo/06/index.vue
View file @ e51bf68e
<template>
<div style="width:1850px;margin:0 auto;">
<div style="width:1740px;margin:0 auto;">
<Row class="mt20">
<Col span="12" class="tc">
今日在修：
......@@ -20,11 +20,10 @@
</Row>
<!--1-->
<Row class="mt50">
<Col span="12" style="height:150px;">
<Train :row="dataGreen1"></Train>
</Col>
<Col span="12">
<Train :row="dataGreen2"></Train>
<Col span="24" style="height:150px;">
<span class="fl trainTitles" style="color: #19be6b;">有电</span>
<Train :row="dataGreen1" class="fl"></Train>
<Train :row="dataGreen2" class="fl"></Train>
</Col>
</Row>
<Row class="lh30">
......@@ -80,10 +79,9 @@
<!--2-->
<Row>
<Col span="14" style="height:150px">
<Train :row="dataBlue"></Train>
<Col span="24" style="height:150px">
<span class="fl trainTitles" style="color: #2d8cf0;">作业前准备</span> <Train :row="dataBlue" class="fl"></Train>
</Col>
<Col span="10">&nbsp;</Col>
</Row>
<Row class="lh30">
<Col span="4">
......@@ -103,10 +101,9 @@
<!--3-->
<Row>
<Col span="14" style="height:100px">
<Train :row="dataGray"></Train>
<Col span="24" style="height:150px">
<span class="fl trainTitles" style="color: #888;">无电</span><Train :row="dataGray" class="fl"></Train>
</Col>
<Col span="10">&nbsp;</Col>
</Row>
<Row class="lh30">
<Col span="4">
......@@ -196,7 +193,7 @@ export default {
]
}),
(this.dataBlue = {
title: "作业前准备",
title: "准备",
color: "blue",
colorTitle: "#2d8cf0",
num: [1, 2, 3, 1, 2, 3, 1],
......@@ -219,8 +216,6 @@ export default {
{ position: "机务", name: "李志峰" },
{ position: "整备队", name: "张伟" },
{ position: "宝洁组", name: "张伟" },
{ position: "电务通讯", name: "张伟" },
{ position: "主机厂", name: "张伟" },
{ position: "车辆", name: "黄飞" }
]
});
......@@ -228,4 +223,8 @@ export default {
};
</script>
<style lang="less">
.trainTitles {
line-height: 130px;
font-size: 18px;
}
</style>
\ No newline at end of file
pages/demo/06/train.vue
View file @ e51bf68e
<template>
<div>
<div style="width:847px">
<Row>
<Col :span="24">
<div class="trainTitle">
<ul>
<li v-width="60">
&nbsp;
</li>
<li class="tc" v-for="(item1,index1) in this.trainData.users" :key="index1" v-width="liWidth">
{{item1.position}}
<br />
......@@ -18,9 +15,6 @@
<Col :span="24">
<div class="train">
<ul>
<li style="width:auto;line-height:45px;font-size:18px;">
<span :style="'color:'+this.trainData.colorTitle">{{trainData.title}}</span>
</li>
<li>
<img :src="'/imgshow/b-l-'+this.trainData.color+'.png'" />
<p class="tc">
......
src/assets/css/base.css
View file @ e51bf68e
......@@ -270,6 +270,9 @@ div::-webkit-scrollbar-corner {
.pt15 {
padding-top: 15px;
}
.pr30 {
padding-right: 30px;
}
.bnone {
border: none;
}
......
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