diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css index 877b5c4..08685ca 100644 --- a/src/assets/css/reset.css +++ b/src/assets/css/reset.css @@ -130,3 +130,17 @@ div, p { -khtml-user-select:none;/*早期浏览器*/ user-select:none; } + +.zd-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.flexcol { + flex-direction: column; +} + +.jccenter { + justify-content: center; +} diff --git a/src/assets/images/screen1/item_10.png b/src/assets/images/screen1/item_10.png new file mode 100644 index 0000000..0da8709 Binary files /dev/null and b/src/assets/images/screen1/item_10.png differ diff --git a/src/assets/images/screen1/item_5.png b/src/assets/images/screen1/item_5.png index c73eff3..f10c215 100644 Binary files a/src/assets/images/screen1/item_5.png and b/src/assets/images/screen1/item_5.png differ diff --git a/src/assets/images/screen1/item_9.png b/src/assets/images/screen1/item_9.png new file mode 100644 index 0000000..53c0132 Binary files /dev/null and b/src/assets/images/screen1/item_9.png differ diff --git a/src/components/header.vue b/src/components/header.vue index 31e5b42..fbbae27 100644 --- a/src/components/header.vue +++ b/src/components/header.vue @@ -71,7 +71,6 @@ header position relative width 100% height 1rem - position relative background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat p font-family "YouSheBiaoTiHei" diff --git a/src/pages/board.vue b/src/pages/board.vue index 39fa6c8..7e10755 100644 --- a/src/pages/board.vue +++ b/src/pages/board.vue @@ -2,14 +2,128 @@
-
+
-
{{ e.device_code }}
+
{{ e.device_code }}
-
+
压机状态:
{{ e.status }}
+
+
当前产品:
+
{{ e.status }}
+
+
+
泥料:
+
{{ e.status }}
+
+
+
当班产量:
+
{{ e.status }}
+
+
+
布料仓余量:
+
{{ e.status }}
+
+
+
缓存线泥料余量:
+
{{ e.status }}
+
+
+
当班合格率:
+
{{ e.status }}
+
+
+
+
+
+
+
+

成型工序

+
+
+
+
+
+
+
+
+
日计划量
+
1000 吨
+
+
+
日完成量
+
1000 吨
+
+
+
+
+
+
+
+
+
+
月计划量
+
1000 吨
+
+
+
月完成量
+
1000 吨
+
+
+
+
+
+

日合格率

+

20%

+
+
+

日合格率

+

20%

+
+
+
+
+
+
+

缓存线泥料

+
+
+
+
+
当前缓存线泥料种类
+
20
+
+
+
当前缓存线泥料总重
+
20
+
+
+
+
    +
  • 序号
    • +
  • 泥料编码
    • +
  • 泥料名称
    • +
  • 泥料重量
    • +
  • 排料时间
    • +
  • 停留时间
    • +
+
+ +
    +
  • +
    {{i+1}}
    +
    {{e.material_code}}
    +
    {{e.material_name}}
    +
    {{e.qty}}
    +
    {{e.time}}
    +
    {{e.time1}}
    +
    • +
+ +
+
@@ -26,25 +140,131 @@ export default { }, data () { return { - dataList1: [] + dataList1: [], + dataList2: [{material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}] + } + }, + computed: { + defaultOption1 () { + return { + step: 0.4, // 数值越大速度滚动越快 + limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length + hoverStop: true, // 是否开启鼠标悬停stop + direction: 1, // 0向下 1向上 2向左 3向右 + openWatch: true, // 开启数据实时监控刷新dom + singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 + singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 + waitTime: 1000 // 单步运动停止的时间(默认值1000ms) + } } }, created () { for (let i = 0; i < 8; i++) { this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'}) } + }, + mounted () { + this.setEchart1() + }, + methods: { + setEchart1 () { + let value = 10 + let title = '%' + let text = '完成率' + let option = { + title: [ + { + text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}', + x: 'center', + y: 'center', + textStyle: { + rich: { + a: { + fontSize: 22, + color: '#00D9FF', + fontFamily: 'SourceHanSansCN', + foontWeight: '700' + }, + b: { + fontSize: 14, + color: '#ffffff', + fontFamily: 'SourceHanSansCN', + foontWeight: '700', + padding: [10, 0, 0, 3] + }, + c: { + color: '#FFFFFF', + fontSize: 12, + fontWeight: '700', + fontFamily: 'SourceHanSansCN', + padding: [10, 0, 0, 0] + } + } + } + } + ], + polar: { + radius: ['85%', '100%'], + center: ['50%', '50%'] + }, + angleAxis: { + max: 100, + show: false + }, + radiusAxis: { + type: 'category', + show: true, + axisLabel: { + show: false + }, + axisLine: { + show: false + }, + axisTick: { + show: false + } + }, + series: [ + {name: '', + type: 'bar', + roundCap: true, + showBackground: true, + backgroundStyle: { + color: '#0a2543' + }, + data: [value], + coordinateSystem: 'polar', + itemStyle: { + normal: { + color: '#00dfff' + } + } + } + ] + } + if (document.getElementById('echart_d1') == null) { + return + } + this.$echarts.dispose(document.getElementById('echart_d1')) + let echart = this.$echarts.init(document.getElementById('echart_d1')) + echart.setOption(option) + window.addEventListener('resize', () => { + echart.resize() + }) + } } }