| | |
| | | <div class="search-bar"> |
| | | <!-- 产业下拉框 --> |
| | | <select id="industry-select"> |
| | | <option value="">选择产业</option> |
| | | <option value="产业1">产业1</option> |
| | | <option value="产业2">产业2</option> |
| | | <option value="产业3">产业3</option> |
| | | <option value="">莱阳厨电</option> |
| | | </select> |
| | | |
| | | <!-- 产品大类下拉框 --> |
| | |
| | | |
| | | <!-- 工程下拉框 --> |
| | | <select id="project-select"> |
| | | <option value="">选择工厂</option> |
| | | <option value="">莱阳厨电</option> |
| | | <option value="工程1">工程1</option> |
| | | <option value="工程2">工程2</option> |
| | | <option value="工程3">工程3</option> |
| | | </select> |
| | | |
| | | <!-- 开始日期 --> |
| | |
| | | <script src="../js/mixins.js"></script> |
| | | <script src="../js/echarts.min.js"></script> |
| | | <script> |
| | | Vue.prototype.$echarts = echarts; |
| | | Vue.prototype.$http= axios; |
| | | let app = new Vue({ |
| | | el:'#app', |
| | | mixins:[mixin], |
| | | data:{ |
| | | shuzu:[{}], |
| | | shuzu1:[{}], |
| | | shuzu2:[{}], |
| | | machineElectric:[{}], |
| | | machineWater:[{}], |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | val1: { |
| | | borderColor:'#082352', |
| | | title: { |
| | | // text: '成品库存', |
| | | // left: '290px', |
| | | // top: '0px' |
| | | text:'合格率',//主标题文本 |
| | | left:'center', |
| | | top:'45%', |
| | | left:'50%', |
| | | textStyle:{ |
| | | color:'#454c5c', |
| | | align:'center' |
| | | }, |
| | | subtextStyle:{ |
| | | fontFamily : "微软雅黑", |
| | | color:'#6c7a89', |
| | | } |
| | | |
| | | }, |
| | | |
| | | tooltip: { |
| | | trigger: 'item', |
| | | textStyle:{ |
| | | } |
| | | }, |
| | | legend: { |
| | | // orient: 'vertical', |
| | | left: 'left', |
| | | textStyle:{ |
| | | |
| | | } |
| | | }, |
| | | textStyle:{ |
| | | |
| | | }, |
| | | series: [ |
| | | { |
| | | |
| | | type: 'pie', |
| | | radius : ['40%','70%'], |
| | | center: ['50%', '50%'], |
| | | minAngle:'15', |
| | | label: { |
| | | // position: 'inside', |
| | | show: true, |
| | | formatter(param) { |
| | | // correct the percentage |
| | | return param.name + ' (' + param.percent + '%)'; |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 300, name: '成品',itemStyle:{color:'#53a2ff'} }, |
| | | { value: 700, name: '次品',itemStyle:{color:'darkseagreen'} } |
| | | ], |
| | | itemStyle: { |
| | | normal:{ |
| | | label:{ |
| | | show:true, |
| | | //formatter: "{b} :\n {c} \n ({d}%)", |
| | | formatter: "{b} :\n ({d}%)", |
| | | position:"inner" |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | ] |
| | | }, |
| | | |
| | | }, |
| | | methods:{ |
| | | |
| | | dingdanxiangqing(){ |
| | | let HisArr=""; |
| | | // HisArr = this.$echarts.init(document.getElementById('main2')); |
| | | let a = { |
| | | value: this.shuzu1[0]['6_qualified'], |
| | | |
| | | name: "成品", |
| | | itemStyle: { color: '#53a2ff' }, |
| | | label:{fontSize:30} |
| | | |
| | | } |
| | | let b = { |
| | | value: this.shuzu1[0]['7_qualified_not'], |
| | | name: "次品", |
| | | itemStyle: { color: 'darkseagreen' }, |
| | | label:{fontSize:30} |
| | | |
| | | } |
| | | this.val1.title.text="合格率" |
| | | this.val1.title.top="45%" |
| | | this.val1.title.left="45%" |
| | | this.val1.title.textStyle.fontSize=30 |
| | | this.val1.series[0].data[0]=a |
| | | this.val1.series[0].data[1]=b |
| | | |
| | | |
| | | HisArr.setOption(this.val1); |
| | | this.loading=false |
| | | }, |
| | | dingdanxiangqing1(){ |
| | | let HisArr=""; |
| | | // HisArr = this.$echarts.init(document.getElementById('main4')); |
| | | let a = { |
| | | value: this.shuzu1[0]['2_smallglass_completed'], |
| | | |
| | | name: "已完成", |
| | | itemStyle: { color: '#53a2ff' }, |
| | | label:{fontSize:30} |
| | | |
| | | |
| | | } |
| | | let b = { |
| | | value: this.shuzu1[0]['3_smallglass_processing'], |
| | | name: "未完成", |
| | | itemStyle: { color: 'darkseagreen' }, |
| | | label:{fontSize:30} |
| | | |
| | | } |
| | | this.val1.title.text="订单加工" |
| | | this.val1.title.top="45%" |
| | | this.val1.title.left="45%" |
| | | this.val1.title.textStyle.fontSize=30 |
| | | this.val1.series[0].data[0]=a |
| | | this.val1.series[0].data[1]=b |
| | | HisArr.setOption(this.val1); |
| | | this.loading=false |
| | | }, |
| | | |
| | | }, |
| | | watch:{ |
| | | |
| | | shuzu1(){ |
| | | // this.dingdanxiangqing(), |
| | | // this.dingdanxiangqing1() |
| | | } |
| | | |
| | | }, |
| | | async mounted(){ |
| | | |
| | | let sql="" |
| | | let flag=2 |
| | | sql="{call AXJ_dapingxianshi_dingdanshuju2('下片')}" |
| | | this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1") |
| | | |
| | | await setInterval(()=>{ |
| | | |
| | | sql="{call AXJ_dapingxianshi_dingdanshuju2('下片')}" |
| | | this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1") |
| | | },5000) |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | }) |
| | | // 初始化数据 |
| | | const initialData = { |
| | | labels: ['2025-03-30', '2025-03-31', '2025-04-01'], |
| | |
| | | <head> |
| | | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| | | <title>Insert title here</title> |
| | | |
| | | </head> |
| | | <body> |
| | | |