| New file |
| | |
|---|
| | | # é»è®¤å¿½ç¥çæ件 |
|---|
| | | /shelf/ |
|---|
| | | /workspace.xml |
|---|
| | | # åºäºç¼è¾å¨ç HTTP 客æ·ç«¯è¯·æ± |
|---|
| | | /httpRequests/ |
|---|
| | | # Datasource local storage ignored files |
|---|
| | | /dataSources/ |
|---|
| | | /dataSources.local.xml |
|---|
| New file |
| | |
|---|
| | | <?xml version="1.0" encoding="UTF-8"?> |
|---|
| | | <module type="JAVA_MODULE" version="4"> |
|---|
| | | <component name="NewModuleRootManager" inherit-compiler-output="true"> |
|---|
| | | <exclude-output /> |
|---|
| | | <content url="file://$MODULE_DIR$" /> |
|---|
| | | <orderEntry type="inheritedJdk" /> |
|---|
| | | <orderEntry type="sourceFolder" forTests="false" /> |
|---|
| | | </component> |
|---|
| | | </module> |
|---|
| New file |
| | |
|---|
| | | <?xml version="1.0" encoding="UTF-8"?> |
|---|
| | | <project version="4"> |
|---|
| | | <component name="ProjectRootManager"> |
|---|
| | | <output url="file://$PROJECT_DIR$/out" /> |
|---|
| | | </component> |
|---|
| | | </project> |
|---|
| New file |
| | |
|---|
| | | <?xml version="1.0" encoding="UTF-8"?> |
|---|
| | | <project version="4"> |
|---|
| | | <component name="ProjectModuleManager"> |
|---|
| | | <modules> |
|---|
| | | <module fileurl="file://$PROJECT_DIR$/.idea/Haier_MES.iml" filepath="$PROJECT_DIR$/.idea/Haier_MES.iml" /> |
|---|
| | | </modules> |
|---|
| | | </component> |
|---|
| | | </project> |
|---|
| New file |
| | |
|---|
| | | <?xml version="1.0" encoding="UTF-8"?> |
|---|
| | | <project version="4"> |
|---|
| | | <component name="VcsDirectoryMappings"> |
|---|
| | | <mapping directory="" vcs="Git" /> |
|---|
| | | </component> |
|---|
| | | </project> |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>Document</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" > |
|---|
| | | <button @click="add">123</button> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
| | | <script> |
|---|
| | | let app= new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data:{ |
|---|
| | | textColor:{ |
|---|
| | | color:'orange' |
|---|
| | | }, |
|---|
| | | picture:[{}], |
|---|
| | | tupian:['',''],orderData:'' |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | errorFlag(){ |
|---|
| | | alert |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let timer1=await setInterval(()=>{ |
|---|
| | | let arrObj={ |
|---|
| | | type:0, |
|---|
| | | stateData:'', |
|---|
| | | endeData:'' |
|---|
| | | } |
|---|
| | | sql="{call AXJ_a_largeScreen_batchOffData_select(?,?,?,?)}~"+JSON.stringify(arrObj) |
|---|
| | | this.interValLoadAjxs('ä¸ç订ååæ°',sql,2,"tableData",timer1) |
|---|
| | | },5000) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | add(){ |
|---|
| | | this.global.errorFlag=1 |
|---|
| | | this.orderData=1 |
|---|
| | | //console.log(vue.); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <!-- import CSS --> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | <style > |
|---|
| | | .page-scroll { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-scroll .el-scrollbar__wrap { |
|---|
| | | overflow-x: hidden; |
|---|
| | | } |
|---|
| | | img{ |
|---|
| | | width: auto; |
|---|
| | | height: auto; |
|---|
| | | max-width: 100%; |
|---|
| | | max-height: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" > |
|---|
| | | |
|---|
| | | <el-container > |
|---|
| | | |
|---|
| | | |
|---|
| | | <el-upload |
|---|
| | | :limit="1" |
|---|
| | | :on-change="changeFile" |
|---|
| | | class="upload-demo" |
|---|
| | | ref="upload" |
|---|
| | | action="https://jsonplaceholder.typicode.com/posts/" |
|---|
| | | :file-list="fileList" |
|---|
| | | :auto-upload="false"> |
|---|
| | | <el-button slot="trigger" size="small" type="primary" >éåæ件</el-button> |
|---|
| | | <div slot="tip" class="el-upload__tip">åªè½ä¸ä¼ jpg/pngæ件ï¼ä¸ä¸è¶
è¿5m</div> |
|---|
| | | </el-upload> |
|---|
| | | |
|---|
| | | |
|---|
| | | </el-container> |
|---|
| | | <img :src="ruleForm.route" style="margin-right: 0;width: 1000px;height: 700px;background-color: aqua;" > |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | <script > |
|---|
| | | //import * as echarts from '../js/echarts.min.js'; |
|---|
| | | let app =new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data(){ |
|---|
| | | var checkNum = (rule, value, callback) => { |
|---|
| | | if (!value) { |
|---|
| | | return callback(new Error('ä¸è½ä¸ºç©º')); |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | let reg = new RegExp(`^[0-9]{1,4}(\.[0-9]{0,2})?$`) |
|---|
| | | |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('请è¾å
¥0.01-9999.99çæ°å')); |
|---|
| | | }else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, 1000); |
|---|
| | | }; |
|---|
| | | var checkString = (rule, value, callback) => { |
|---|
| | | if (!value) { |
|---|
| | | return callback(new Error('ä¸è½ä¸ºç©º')); |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | if (value.length>255) { |
|---|
| | | callback(new Error('æ大é¿åº¦255')); |
|---|
| | | }else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | }, 1000); |
|---|
| | | }; |
|---|
| | | var checkThickness = (rule, value, callback) => { |
|---|
| | | if (!value) { |
|---|
| | | return callback(new Error('ä¸è½ä¸ºç©ºæè
0')); |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | let reg = new RegExp(`^[0-9]*[1-9][0-9]*$`) |
|---|
| | | |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('请è¾å
¥æ£æ´æ°çå度')); |
|---|
| | | }else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, 1000); |
|---|
| | | }; |
|---|
| | | return { |
|---|
| | | ruleForm: { |
|---|
| | | produceid:'', |
|---|
| | | width: '', |
|---|
| | | height: '', |
|---|
| | | thickness: '', |
|---|
| | | color:'', |
|---|
| | | optNum:'', |
|---|
| | | creator:'', |
|---|
| | | route:null |
|---|
| | | }, |
|---|
| | | rules: { |
|---|
| | | produceid: [ |
|---|
| | | { validator: checkString, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | height: [ |
|---|
| | | { validator: checkNum, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | width: [ |
|---|
| | | { validator: checkNum, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | thickness: [ |
|---|
| | | { validator: checkThickness, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | color: [ |
|---|
| | | { validator: checkString, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | optNum: [ |
|---|
| | | { validator: checkString, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | route: [ |
|---|
| | | { validator: checkString, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | |
|---|
| | | }, |
|---|
| | | tableHead:[], |
|---|
| | | produceData:[], |
|---|
| | | showFlag:true, |
|---|
| | | updateShowFlag:false, |
|---|
| | | updateGlass:{ |
|---|
| | | id:'' |
|---|
| | | }, |
|---|
| | | optList:[], |
|---|
| | | fileList:[], |
|---|
| | | selectGlass:["","","","","","","",""] |
|---|
| | | |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | submitForm(formName) { |
|---|
| | | this.$refs[formName].validate((valid) => { |
|---|
| | | if (!valid) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_produce_insert(?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(this.ruleForm); |
|---|
| | | this.connects("æ°å¢äº§å",sql,1,1); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | resetForm(formName) { |
|---|
| | | this.$refs[formName].resetFields(); |
|---|
| | | }, |
|---|
| | | showFlagFuc(){ |
|---|
| | | Object.keys(this.ruleForm).forEach((key) => (this.ruleForm[key] = '')); |
|---|
| | | this.showFlag=!this.showFlag |
|---|
| | | this.updateShowFlag=false; |
|---|
| | | }, |
|---|
| | | updateRow(index,row){//ä¿®æ¹äº§åæ°æ®æ¾ç¤º |
|---|
| | | this.showFlag=!this.showFlag |
|---|
| | | this.updateShowFlag=true; |
|---|
| | | let rowObj=row[index] |
|---|
| | | this.ruleForm.produceid=rowObj["1_recipe_no"] |
|---|
| | | this.ruleForm.width=rowObj["3_width"] |
|---|
| | | this.ruleForm.height=rowObj["4_height"] |
|---|
| | | this.ruleForm.thickness=rowObj["5_thickness"] |
|---|
| | | this.ruleForm.color=rowObj["6_color"] |
|---|
| | | this.ruleForm.optNum=rowObj["2_optfile_no"] |
|---|
| | | this.ruleForm.creator=rowObj["7_recipe_maker"] |
|---|
| | | this.ruleForm.route=rowObj["9_route"] |
|---|
| | | this.updateGlass.id=rowObj["0_id"] |
|---|
| | | }, |
|---|
| | | updateGlassSub(formName){ |
|---|
| | | this.$refs[formName].validate((valid) => { |
|---|
| | | if (!valid) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | let updateGlassObj=this.ruleForm |
|---|
| | | updateGlassObj.id=this.updateGlass.id |
|---|
| | | let sql="{call AXJ_a_produce_update(?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(updateGlassObj); |
|---|
| | | this.connects("产åä¿®æ¹",sql,1,1); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | changeFile(file){//æ·»å æ件触åçæbase64æ件 |
|---|
| | | const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' ; |
|---|
| | | const isLt2M = file.size / 1024 / 1024 < 5; |
|---|
| | | |
|---|
| | | if (!isJPG) { |
|---|
| | | this.$message.error('ä¸ä¼ 头åå¾çåªè½æ¯ JPGæè
PNG æ ¼å¼!') |
|---|
| | | this.$refs.upload.clearFiles() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (!isLt2M) { |
|---|
| | | this.$message.error('ä¸ä¼ 头åå¾ç大å°ä¸è½è¶
è¿ 5MB!') |
|---|
| | | this.$refs.upload.clearFiles() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | let reader = new FileReader(); |
|---|
| | | reader.readAsDataURL(file.raw); |
|---|
| | | reader.onload = (e) => { |
|---|
| | | resolve(e.target.result); |
|---|
| | | console.log(e.target.result) |
|---|
| | | this.updateShowFlag=true |
|---|
| | | this.ruleForm.route=e.target.result; |
|---|
| | | }; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | selectSub:function(){ |
|---|
| | | let arrObj={} |
|---|
| | | for(let i in this.selectGlass){ |
|---|
| | | arrObj[i]=this.selectGlass[i] |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_produce_select(?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj); |
|---|
| | | loadAjxs('产åæ¥è¯¢',sql,2,"produceData"); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // let sql="{call AXJ_a_produce_select_into()}"; |
|---|
| | | // let flag=2; |
|---|
| | | // loadAjxs('产ååå§æ¥è¯¢',sql,flag,"produceData"); |
|---|
| | | |
|---|
| | | // sql="{call AXJ_a_produceHeader_select()}"; |
|---|
| | | // loadAjxs('产å表头',sql,flag,"tableHead"); |
|---|
| | | |
|---|
| | | // sql="{call AXJ_a_optFile_select()}"; |
|---|
| | | // loadAjxs('产åoptç¼ç æ¥è¯¢',sql,flag,"optList"); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%> |
|---|
| | | |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | html,body{ |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | #header1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 5%; |
|---|
| | | background-color: white; |
|---|
| | | display: inline-block; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 40px; |
|---|
| | | } |
|---|
| | | #header { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | background-color: white; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | #footer { |
|---|
| | | width: 100%; |
|---|
| | | height: 70%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main1 { |
|---|
| | | width: 15%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | #main2 { |
|---|
| | | width: 20%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | #main4 { |
|---|
| | | width: 20%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | #main3 { |
|---|
| | | width: 45%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | #main1-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 50%; |
|---|
| | | } |
|---|
| | | #main1-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 50%; |
|---|
| | | } |
|---|
| | | #main3-1 { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | #main3-2 { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main4-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main4-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main4-3 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #main1-1-1 { |
|---|
| | | font-size: 35px; |
|---|
| | | margin-top: 10%; |
|---|
| | | } |
|---|
| | | #main1-2-1 { |
|---|
| | | font-size: 35px; |
|---|
| | | margin-top: 10%; |
|---|
| | | } |
|---|
| | | #main3-1-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | #main3-1-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 80%; |
|---|
| | | } |
|---|
| | | #main3-2-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | } |
|---|
| | | #main3-2-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 80%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .boli { |
|---|
| | | opacity:0.5; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #cangchu { |
|---|
| | | width: 75px; |
|---|
| | | height: 25px; |
|---|
| | | position: absolute; |
|---|
| | | top: 820px; |
|---|
| | | left: 1507px; |
|---|
| | | } |
|---|
| | | /* -45 |
|---|
| | | -50 |
|---|
| | | */ |
|---|
| | | #A4 { |
|---|
| | | width: 65px; |
|---|
| | | height: 55px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 775px; |
|---|
| | | left: 1250px |
|---|
| | | } |
|---|
| | | #A7 { |
|---|
| | | width: 15px; |
|---|
| | | height: 45px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 785px; |
|---|
| | | left: 1185px |
|---|
| | | } |
|---|
| | | #A9 { |
|---|
| | | width: 15px; |
|---|
| | | height: 45px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 785px; |
|---|
| | | left: 1139px |
|---|
| | | } |
|---|
| | | #A10 { |
|---|
| | | width: 15px; |
|---|
| | | height: 45px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 840px; |
|---|
| | | left: 1139px |
|---|
| | | } |
|---|
| | | #A11 { |
|---|
| | | width: 15px; |
|---|
| | | height: 45px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 840px; |
|---|
| | | left: 1185px |
|---|
| | | } |
|---|
| | | #A14 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 922px; |
|---|
| | | left: 1140px |
|---|
| | | } |
|---|
| | | #A15 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 922px; |
|---|
| | | left: 1183px |
|---|
| | | } |
|---|
| | | #A16 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 951px; |
|---|
| | | left: 1183px |
|---|
| | | } |
|---|
| | | #A17 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 951px; |
|---|
| | | left: 1163px |
|---|
| | | } |
|---|
| | | #A18 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 951px; |
|---|
| | | left: 1140px |
|---|
| | | } |
|---|
| | | #A20 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 951px; |
|---|
| | | left: 1122px |
|---|
| | | } |
|---|
| | | #A21 { |
|---|
| | | width: 45px; |
|---|
| | | height: 65px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 918px; |
|---|
| | | left: 1075px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | #A22 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 953px; |
|---|
| | | left: 1061px; |
|---|
| | | } |
|---|
| | | #A23 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 953px; |
|---|
| | | left: 1047px; |
|---|
| | | } |
|---|
| | | #A24 { |
|---|
| | | width: 45px; |
|---|
| | | height: 65px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 918px; |
|---|
| | | left: 1000px; |
|---|
| | | } |
|---|
| | | #A25 { |
|---|
| | | width: 35px; |
|---|
| | | height: 50px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 932px; |
|---|
| | | left: 945px; |
|---|
| | | } |
|---|
| | | #A26 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 953px; |
|---|
| | | left: 926px; |
|---|
| | | } |
|---|
| | | #A28 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 953px; |
|---|
| | | left: 912px; |
|---|
| | | } |
|---|
| | | #A29 { |
|---|
| | | width: 25px; |
|---|
| | | height: 25px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 949px; |
|---|
| | | left: 885px; |
|---|
| | | } |
|---|
| | | #A30 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 871px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | #A31 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 851px; |
|---|
| | | } |
|---|
| | | #A32 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 832px; |
|---|
| | | } |
|---|
| | | #A33 { |
|---|
| | | width: 22px; |
|---|
| | | height: 52px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 923px; |
|---|
| | | left: 804px; |
|---|
| | | } |
|---|
| | | #A34 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 956px; |
|---|
| | | left: 775px; |
|---|
| | | } |
|---|
| | | #A35 { |
|---|
| | | width: 57px; |
|---|
| | | height: 55px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 920px; |
|---|
| | | left: 705px; |
|---|
| | | } |
|---|
| | | #A37 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 956px; |
|---|
| | | left: 680px; |
|---|
| | | } |
|---|
| | | #A38 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 956px; |
|---|
| | | left: 642px; |
|---|
| | | } |
|---|
| | | #A39 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 956px; |
|---|
| | | left: 606px; |
|---|
| | | } |
|---|
| | | #A40 { |
|---|
| | | width: 37px; |
|---|
| | | height: 44px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 931px; |
|---|
| | | left: 556px; |
|---|
| | | } |
|---|
| | | #A41 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 538px; |
|---|
| | | } |
|---|
| | | #A42 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 517px; |
|---|
| | | } |
|---|
| | | #B31 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 884px; |
|---|
| | | left: 850px; |
|---|
| | | } |
|---|
| | | #B32 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 884px; |
|---|
| | | left: 832px; |
|---|
| | | } |
|---|
| | | #B33 { |
|---|
| | | width: 22px; |
|---|
| | | height: 52px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 853px; |
|---|
| | | left: 804px; |
|---|
| | | } |
|---|
| | | #B34 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 886px; |
|---|
| | | left: 775px; |
|---|
| | | } |
|---|
| | | #B35 { |
|---|
| | | width: 57px; |
|---|
| | | height: 55px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 850px; |
|---|
| | | left: 705px; |
|---|
| | | } |
|---|
| | | #B37 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 886px; |
|---|
| | | left: 680px; |
|---|
| | | } |
|---|
| | | #B38 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 886px; |
|---|
| | | left: 642px; |
|---|
| | | } |
|---|
| | | #B39 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 886px; |
|---|
| | | left: 606px; |
|---|
| | | } |
|---|
| | | #B40 { |
|---|
| | | width: 37px; |
|---|
| | | height: 44px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 861px; |
|---|
| | | left: 556px; |
|---|
| | | } |
|---|
| | | #B41 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 884px; |
|---|
| | | left: 538px; |
|---|
| | | } |
|---|
| | | #B42 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 884px; |
|---|
| | | left: 517px; |
|---|
| | | } |
|---|
| | | #C31 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 814px; |
|---|
| | | left: 850px; |
|---|
| | | } |
|---|
| | | #C32 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 814px; |
|---|
| | | left: 832px; |
|---|
| | | } |
|---|
| | | #C33 { |
|---|
| | | width: 22px; |
|---|
| | | height: 52px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 785px; |
|---|
| | | left: 804px; |
|---|
| | | } |
|---|
| | | #C34 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 817px; |
|---|
| | | left: 775px; |
|---|
| | | } |
|---|
| | | #C35 { |
|---|
| | | width: 57px; |
|---|
| | | height: 55px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 780px; |
|---|
| | | left: 705px; |
|---|
| | | } |
|---|
| | | #C37 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 817px; |
|---|
| | | left: 680px; |
|---|
| | | } |
|---|
| | | #C38 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 817px; |
|---|
| | | left: 642px; |
|---|
| | | } |
|---|
| | | #C39 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 817px; |
|---|
| | | left: 606px; |
|---|
| | | } |
|---|
| | | #C40 { |
|---|
| | | width: 37px; |
|---|
| | | height: 44px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 791px; |
|---|
| | | left: 556px; |
|---|
| | | } |
|---|
| | | #C41 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 814px; |
|---|
| | | left: 538px; |
|---|
| | | } |
|---|
| | | #C42 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 814px; |
|---|
| | | left: 517px; |
|---|
| | | } |
|---|
| | | #D31 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 746px; |
|---|
| | | left: 850px; |
|---|
| | | } |
|---|
| | | #D32 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 746px; |
|---|
| | | left: 832px; |
|---|
| | | } |
|---|
| | | #D33 { |
|---|
| | | width: 22px; |
|---|
| | | height: 52px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 715px; |
|---|
| | | left: 804px; |
|---|
| | | } |
|---|
| | | #D34 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 748px; |
|---|
| | | left: 775px; |
|---|
| | | } |
|---|
| | | #D35 { |
|---|
| | | width: 57px; |
|---|
| | | height: 55px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 711px; |
|---|
| | | left: 705px; |
|---|
| | | } |
|---|
| | | #D37 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 748px; |
|---|
| | | left: 680px; |
|---|
| | | } |
|---|
| | | #D38 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 748px; |
|---|
| | | left: 642px; |
|---|
| | | } |
|---|
| | | #D39 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 748px; |
|---|
| | | left: 606px; |
|---|
| | | } |
|---|
| | | #D40 { |
|---|
| | | width: 37px; |
|---|
| | | height: 44px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 723px; |
|---|
| | | left: 556px; |
|---|
| | | } |
|---|
| | | #D41 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 746px; |
|---|
| | | left: 538px; |
|---|
| | | } |
|---|
| | | #D42 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 746px; |
|---|
| | | left: 517px; |
|---|
| | | } |
|---|
| | | #s1 { |
|---|
| | | width: 15px; |
|---|
| | | height: 40px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 906px; |
|---|
| | | left: 850px; |
|---|
| | | } |
|---|
| | | #s2 { |
|---|
| | | width: 15px; |
|---|
| | | height: 40px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 838px; |
|---|
| | | left: 850px; |
|---|
| | | } |
|---|
| | | #s3 { |
|---|
| | | width: 15px; |
|---|
| | | height: 40px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 769px; |
|---|
| | | left: 850px; |
|---|
| | | } |
|---|
| | | #s6 { |
|---|
| | | width: 15px; |
|---|
| | | height: 40px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 906px; |
|---|
| | | left: 515px; |
|---|
| | | } |
|---|
| | | #s5 { |
|---|
| | | width: 15px; |
|---|
| | | height: 40px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 838px; |
|---|
| | | left: 515px; |
|---|
| | | } |
|---|
| | | #s4 { |
|---|
| | | width: 15px; |
|---|
| | | height: 40px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 769px; |
|---|
| | | left: 515px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #A43 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 498px; |
|---|
| | | } |
|---|
| | | #A44 { |
|---|
| | | width: 190px; |
|---|
| | | height: 26px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 949px; |
|---|
| | | left: 297px; |
|---|
| | | } |
|---|
| | | #A45 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 277px; |
|---|
| | | } |
|---|
| | | #A47 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 258px; |
|---|
| | | } |
|---|
| | | #A49 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 240px; |
|---|
| | | } |
|---|
| | | #A49-1 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 223px; |
|---|
| | | } |
|---|
| | | #A50 { |
|---|
| | | width: 25px; |
|---|
| | | height: 25px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 950px; |
|---|
| | | left: 197px; |
|---|
| | | } |
|---|
| | | #A51-1 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 954px; |
|---|
| | | left: 183px; |
|---|
| | | } |
|---|
| | | #A51-2 { |
|---|
| | | width: 69px; |
|---|
| | | height: 34px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 945px; |
|---|
| | | left: 110px; |
|---|
| | | } |
|---|
| | | #A51-3 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 955px; |
|---|
| | | left: 95px; |
|---|
| | | } |
|---|
| | | #A52-1 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 955px; |
|---|
| | | left: 75px; |
|---|
| | | } |
|---|
| | | #A52-2 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 955px; |
|---|
| | | left: 55px; |
|---|
| | | } |
|---|
| | | #A52-3 { |
|---|
| | | width: 23px; |
|---|
| | | height: 125px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 820px; |
|---|
| | | left: 50px; |
|---|
| | | } |
|---|
| | | #A52-4 { |
|---|
| | | width: 17px; |
|---|
| | | height: 30px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 787px; |
|---|
| | | left: 52px; |
|---|
| | | } |
|---|
| | | #A52-5 { |
|---|
| | | width: 17px; |
|---|
| | | height: 75px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 703px; |
|---|
| | | left: 52px; |
|---|
| | | } |
|---|
| | | #A52-6 { |
|---|
| | | width: 17px; |
|---|
| | | height: 75px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 618px; |
|---|
| | | left: 52px; |
|---|
| | | } |
|---|
| | | #A55-1 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 603px; |
|---|
| | | left: 55px; |
|---|
| | | } |
|---|
| | | #A55-2 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 585px; |
|---|
| | | left: 55px; |
|---|
| | | } |
|---|
| | | #A55-3 { |
|---|
| | | width: 17px; |
|---|
| | | height: 30px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 546px; |
|---|
| | | left: 52px; |
|---|
| | | } |
|---|
| | | #A55-4 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 522px; |
|---|
| | | left: 55px; |
|---|
| | | } |
|---|
| | | #A55-5 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 522px; |
|---|
| | | left: 73px; |
|---|
| | | } |
|---|
| | | #A55-6 { |
|---|
| | | width: 70px; |
|---|
| | | height: 40px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 507px; |
|---|
| | | left: 89px; |
|---|
| | | } |
|---|
| | | #A55-7 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 522px; |
|---|
| | | left: 162px; |
|---|
| | | } |
|---|
| | | #A56-1 { |
|---|
| | | width: 148px; |
|---|
| | | height: 26px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 516px; |
|---|
| | | left: 179px; |
|---|
| | | } |
|---|
| | | #A56-2 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 522px; |
|---|
| | | left: 332px; |
|---|
| | | } |
|---|
| | | #A56-3 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 522px; |
|---|
| | | left: 349px; |
|---|
| | | } |
|---|
| | | #A56-4 { |
|---|
| | | width: 22px; |
|---|
| | | height: 22px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 516px; |
|---|
| | | left: 364px; |
|---|
| | | } |
|---|
| | | #A56-5 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 521px; |
|---|
| | | left: 390px; |
|---|
| | | } |
|---|
| | | #A59 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 548px; |
|---|
| | | left: 390px; |
|---|
| | | } |
|---|
| | | #A61 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 572px; |
|---|
| | | left: 390px; |
|---|
| | | } |
|---|
| | | #A63 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 592px; |
|---|
| | | left: 390px; |
|---|
| | | } |
|---|
| | | #A64 { |
|---|
| | | width: 12px; |
|---|
| | | height: 20px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 614px; |
|---|
| | | left: 390px; |
|---|
| | | } |
|---|
| | | #A65 { |
|---|
| | | width: 12px; |
|---|
| | | height: 20px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 614px; |
|---|
| | | left: 405px; |
|---|
| | | } |
|---|
| | | #A66 { |
|---|
| | | width: 684px; |
|---|
| | | height: 50px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 600px; |
|---|
| | | left: 438px; |
|---|
| | | } |
|---|
| | | #A67 { |
|---|
| | | width: 12px; |
|---|
| | | height: 20px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 617px; |
|---|
| | | left: 1140px; |
|---|
| | | } |
|---|
| | | #A68 { |
|---|
| | | width: 12px; |
|---|
| | | height: 20px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 617px; |
|---|
| | | left: 1158px; |
|---|
| | | } |
|---|
| | | #A69 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 581px; |
|---|
| | | left: 1157px; |
|---|
| | | } |
|---|
| | | #A70 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 545px; |
|---|
| | | left: 1157px; |
|---|
| | | } |
|---|
| | | #A71 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 508px; |
|---|
| | | left: 1157px; |
|---|
| | | } |
|---|
| | | #A72 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 466px; |
|---|
| | | left: 1157px; |
|---|
| | | } |
|---|
| | | #A73 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 430px; |
|---|
| | | left: 1157px; |
|---|
| | | } |
|---|
| | | #A74 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 430px; |
|---|
| | | left: 1175px; |
|---|
| | | } |
|---|
| | | #A75 { |
|---|
| | | width: 76px; |
|---|
| | | height: 32px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 416px; |
|---|
| | | left: 1190px; |
|---|
| | | } |
|---|
| | | #A76 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 430px; |
|---|
| | | left: 1268px; |
|---|
| | | } |
|---|
| | | #A78 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 430px; |
|---|
| | | left: 1284px; |
|---|
| | | } |
|---|
| | | #A78-1 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 430px; |
|---|
| | | left: 1299px; |
|---|
| | | } |
|---|
| | | #A79 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 432px; |
|---|
| | | left: 1333px; |
|---|
| | | } |
|---|
| | | #A80 { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 429px; |
|---|
| | | left: 1312px; |
|---|
| | | } |
|---|
| | | #A81 { |
|---|
| | | width: 130px; |
|---|
| | | height: 18px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 429px; |
|---|
| | | left: 1349px; |
|---|
| | | } |
|---|
| | | #A82 { |
|---|
| | | width: 82px; |
|---|
| | | height: 18px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 429px; |
|---|
| | | left: 1485px; |
|---|
| | | } |
|---|
| | | #A83-1 { |
|---|
| | | width: 22px; |
|---|
| | | height: 38px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 415px; |
|---|
| | | left: 1575px; |
|---|
| | | } |
|---|
| | | #A83-2 { |
|---|
| | | width: 22px; |
|---|
| | | height: 38px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 415px; |
|---|
| | | left: 1616px; |
|---|
| | | } |
|---|
| | | #A84 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 432px; |
|---|
| | | left: 1655px; |
|---|
| | | } |
|---|
| | | #A85 { |
|---|
| | | width: 145px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 432px; |
|---|
| | | left: 1675px; |
|---|
| | | } |
|---|
| | | #A89 { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | |
|---|
| | | position: Absolute; |
|---|
| | | top: 432px; |
|---|
| | | left: 1832px; |
|---|
| | | } |
|---|
| | | .divGrenn{ |
|---|
| | | background-color:green; |
|---|
| | | display:block |
|---|
| | | } |
|---|
| | | .divRed{ |
|---|
| | | background-color:red; |
|---|
| | | display:block |
|---|
| | | } |
|---|
| | | .divYellow{ |
|---|
| | | background-color:yellow; |
|---|
| | | display:block |
|---|
| | | } |
|---|
| | | .divnull{ |
|---|
| | | display:none |
|---|
| | | } |
|---|
| | | #A3 { |
|---|
| | | width: 65px; |
|---|
| | | height: 55px; |
|---|
| | | position: Absolute; |
|---|
| | | top: 775px; |
|---|
| | | left: 1335px; |
|---|
| | | background-color:green; |
|---|
| | | display:block |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <title>大å±æ¾ç¤º</title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" style="width: 1920px;height: 1080px;background-color: #7f817cdd;"> |
|---|
| | | <div id="header1"><span>æµ·å°æºå®¶å¨çµè±é³å·¥åç»ç产线æ°ååæ¾ç¤º</span></div> |
|---|
| | | <div id="header"> |
|---|
| | | <div id="main1" v-for='items1 in shuzu1'> |
|---|
| | | <div id="main1-1">å½å订åå·ï¼ |
|---|
| | | <div id="main1-1-1" >{{items1['0_order_id']}}</div> |
|---|
| | | </div> |
|---|
| | | <div id="main1-2">å½å产åå·ï¼ |
|---|
| | | <div id="main1-2-1">{{items1['1_recipe_no']}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="main4"></div> |
|---|
| | | <div id="main2"></div> |
|---|
| | | <div id="main3"> |
|---|
| | | <div id="main3-1"> |
|---|
| | | <div id="main3-1-1">æ»èçµï¼<span>{{shuzu2[0]['0_@jiqidianliang']}}kw</span></div> |
|---|
| | | <div id="main3-1-2"></div> |
|---|
| | | </div> |
|---|
| | | <div id="main3-2"> |
|---|
| | | <div id="main3-2-1">æ»èæ°´ï¼<span>{{shuzu2[0]['1_@jiqidianliang1']}}m³</span></div> |
|---|
| | | <div id="main3-2-2"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="footer"> |
|---|
| | | <img style="width: 100%;height: 100%;" src="../img/大å±.png"> |
|---|
| | | </div> |
|---|
| | | <div id="cangchu" > |
|---|
| | | <img style="width: 100%;height: 100%;" src="../img/cangchu.png"> |
|---|
| | | </div> |
|---|
| | | <div id='A3' class='boli '></div> |
|---|
| | | <div v-for="items in shuzu" :class="items['6_class']" :id="items['3_class_html']" v-if="Object.keys(shuzu[0]).length!=0" class="boli" ></div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
|---|
| | | <script src="../js/vue.min.js"></script> |
|---|
| | | <script src="../js/axios.min.js"></script> |
|---|
| | | <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:[{}], |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'çµè', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgb(180, 180, 180)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | val1: { |
|---|
| | | borderColor:'#082352', |
|---|
| | | title: { |
|---|
| | | // text: 'æååºå', |
|---|
| | | // left: '290px', |
|---|
| | | // top: '0px' |
|---|
| | | text:'åæ ¼ç',//主æ é¢ææ¬ |
|---|
| | | left:'center', |
|---|
| | | top:'45%', |
|---|
| | | left:'40%', |
|---|
| | | 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'} } |
|---|
| | | ], |
|---|
| | | // emphasis: { |
|---|
| | | // itemStyle: { |
|---|
| | | // shadowBlur: 10, |
|---|
| | | // shadowOffsetX: 0, |
|---|
| | | // shadowColor: 'rgba(0, 0, 0, 0.5)' |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | itemStyle: { |
|---|
| | | normal:{ |
|---|
| | | label:{ |
|---|
| | | show:true, |
|---|
| | | //formatter: "{b} :\n {c} \n ({d}%)", |
|---|
| | | formatter: "{b} :\n ({d}%)", |
|---|
| | | position:"inner" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | echarsInit() { |
|---|
| | | |
|---|
| | | let HisArr=""; |
|---|
| | | let dianhao=[]; |
|---|
| | | let shijian=[]; |
|---|
| | | |
|---|
| | | |
|---|
| | | HisArr = this.$echarts.init(document.getElementById('main3-1-2')); |
|---|
| | | |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw.h)' |
|---|
| | | for(let i in this.machineElectric){ |
|---|
| | | dianhao.push(this.machineElectric[i]["0_jiqidianliang"]); |
|---|
| | | shijian.push(this.machineElectric[i]["1_date"]); |
|---|
| | | } |
|---|
| | | console.log(dianhao); |
|---|
| | | this.val.title.text="æ»èçµ(kw.h)" |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | this.val.xAxis[0].data=shijian; |
|---|
| | | this.val.series[0].data=dianhao; |
|---|
| | | HisArr.setOption(this.val); |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | echarsInit1(){ |
|---|
| | | let HisArr=""; |
|---|
| | | let dianhao=[]; |
|---|
| | | let shijian=[]; |
|---|
| | | HisArr = this.$echarts.init(document.getElementById('main3-2-2')); |
|---|
| | | this.val.yAxis[0].name="æ°´è"; |
|---|
| | | this.val.series[0].name='æ°´è(m³)' |
|---|
| | | for(let i in this.machineWater){ |
|---|
| | | dianhao.push(this.machineWater[i]["0_jiqidianliang"]); |
|---|
| | | shijian.push(this.machineWater[i]["1_date"]); |
|---|
| | | } |
|---|
| | | this.val.title.text="æ»èæ°´(m³)" |
|---|
| | | this.val.series[0].itemStyle.color='#00ff00' |
|---|
| | | this.val.xAxis[0].data=shijian; |
|---|
| | | this.val.series[0].data=dianhao; |
|---|
| | | HisArr.setOption(this.val); |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | dingdanxiangqing(){ |
|---|
| | | let HisArr=""; |
|---|
| | | HisArr = this.$echarts.init(document.getElementById('main2')); |
|---|
| | | let a = { |
|---|
| | | value: this.shuzu1[0]['2_smallglass_completed'], |
|---|
| | | |
|---|
| | | name: "æå", |
|---|
| | | itemStyle: { color: '#53a2ff' } |
|---|
| | | |
|---|
| | | } |
|---|
| | | let b = { |
|---|
| | | value: this.shuzu1[0]['4_smallglass_worn'], |
|---|
| | | name: "次å", |
|---|
| | | itemStyle: { color: 'darkseagreen' } |
|---|
| | | |
|---|
| | | } |
|---|
| | | this.val1.title.text="åæ ¼ç" |
|---|
| | | this.val1.title.top="45%" |
|---|
| | | this.val1.title.left="40%" |
|---|
| | | 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' } |
|---|
| | | |
|---|
| | | } |
|---|
| | | let b = { |
|---|
| | | value: this.shuzu1[0]['3_smallglass_processing'], |
|---|
| | | name: "æªå®æ", |
|---|
| | | itemStyle: { color: 'darkseagreen' } |
|---|
| | | |
|---|
| | | } |
|---|
| | | this.val1.title.text="订åå å·¥" |
|---|
| | | this.val1.title.top="45%" |
|---|
| | | this.val1.title.left="40%" |
|---|
| | | this.val1.series[0].data[0]=a |
|---|
| | | this.val1.series[0].data[1]=b |
|---|
| | | |
|---|
| | | HisArr.setOption(this.val1); |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | shuzu(){ |
|---|
| | | for(item of this.shuzu){ |
|---|
| | | |
|---|
| | | if((item["3_class_html"].indexOf("33")>-1) || (item["3_class_html"].indexOf("35")>-1) || (item["3_class_html"].indexOf("40")>-1)){ |
|---|
| | | if(item["1_connect_state"]=="å·²è¿æ¥"){ |
|---|
| | | if(item["5_baojin"]>0){ |
|---|
| | | //æ°´å |
|---|
| | | if(item["3_class_html"].indexOf("35")>-1){ |
|---|
| | | if(item["5_baojin"]>1){ |
|---|
| | | item["6_class"]='divYellow'; |
|---|
| | | }else{ |
|---|
| | | item["4_shuliang"]==4?item["6_class"]='divGrenn':item["6_class"]='divnull'; |
|---|
| | | } |
|---|
| | | |
|---|
| | | }else{ |
|---|
| | | item["6_class"]='divYellow'; |
|---|
| | | } |
|---|
| | | |
|---|
| | | }else{ |
|---|
| | | |
|---|
| | | //é»å å å·¥ä¸å¿ |
|---|
| | | item["4_shuliang"]==2?item["6_class"]='divGrenn':item["6_class"]='divnull'; |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | item["6_class"]='divRed'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | else{ |
|---|
| | | if(item["1_connect_state"]=="å·²è¿æ¥"){ |
|---|
| | | if(item["5_baojin"]>0){ |
|---|
| | | item["6_class"]='divYellow'; |
|---|
| | | }else{ |
|---|
| | | if((item["0_machine_id"]==76)||(item["0_machine_id"]==77)||(item["0_machine_id"]==26)||(item["0_machine_id"]==53)){ |
|---|
| | | |
|---|
| | | item["6_class"]='divGrenn'; |
|---|
| | | }else{ |
|---|
| | | item["4_shuliang"]>0?item["6_class"]='divGrenn':item["6_class"]='divnull';} |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | item["6_class"]='divRed'; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | machineElectric(){ |
|---|
| | | this.echarsInit() |
|---|
| | | }, |
|---|
| | | machineWater(){ |
|---|
| | | this.echarsInit1() |
|---|
| | | }, |
|---|
| | | shuzu1(){ |
|---|
| | | this.dingdanxiangqing(), |
|---|
| | | this.dingdanxiangqing1() |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | async mounted(){ |
|---|
| | | // let canshu={ |
|---|
| | | // sql:"{call AXJ_dapingxianshijiqishuju()}", |
|---|
| | | // flag:2, |
|---|
| | | // vals:"shuzu" |
|---|
| | | // } |
|---|
| | | // let canshu1={ |
|---|
| | | // sql:"{call AXJ_dapingxianshi_dingdanshuju()}", |
|---|
| | | // flag:2, |
|---|
| | | // vals:"shuzu1" |
|---|
| | | // } |
|---|
| | | // this.shuzu1=await this.returnloadAjxss(canshu1); |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | sql="{call AXJ_dapingxianshijiqishuju()}" |
|---|
| | | this.loadAjxss('大å±æ¾ç¤º',sql,flag,"shuzu") |
|---|
| | | sql="{call AXJ_dapingxianshi_dingdanshuju()}" |
|---|
| | | this.loadAjxss('大å±æ»è®¢åæ°æ®',sql,flag,"shuzu1") |
|---|
| | | sql="{call AXJ_a_largeScreen_sumelectric_select()}" |
|---|
| | | this.loadAjxss('大å±æ»çµèæ°æ®',sql,flag,"machineElectric") |
|---|
| | | sql="{call AXJ_a_largeScreen_sumselect()}" |
|---|
| | | this.loadAjxss('大å±æ»è½èæ»æ°æ®',sql,flag,"shuzu2") |
|---|
| | | sql="{call AXJ_a_largeScreen_sumwater_select()}" |
|---|
| | | this.loadAjxss('大å±æ»æ°´èæ°æ®',sql,flag,"machineWater") |
|---|
| | | |
|---|
| | | |
|---|
| | | await setInterval(()=>{ |
|---|
| | | |
|---|
| | | sql="{call AXJ_dapingxianshijiqishuju()}" |
|---|
| | | this.interValLoadAjxs('大å±æ¾ç¤º',sql,flag,"shuzu") |
|---|
| | | },5000) |
|---|
| | | await setInterval(()=>{ |
|---|
| | | |
|---|
| | | sql="{call AXJ_dapingxianshi_dingdanshuju()}" |
|---|
| | | this.interValLoadAjxs('大å±æ»è®¢åæ°æ®',sql,flag,"shuzu1") |
|---|
| | | },5000) |
|---|
| | | await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_sumelectric_select()}" |
|---|
| | | this.interValLoadAjxs('大å±æ»çµèæ°æ®',sql,flag,"machineElectric") |
|---|
| | | },5000) |
|---|
| | | await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_sumselect()}" |
|---|
| | | this.interValLoadAjxs('大å±æ»è½èæ»æ°æ®',sql,flag,"shuzu2") |
|---|
| | | },5000) |
|---|
| | | await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_sumwater_select()}" |
|---|
| | | this.interValLoadAjxs('大å±æ»æ°´èæ°æ®',sql,flag,"machineWater") |
|---|
| | | },5000) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | var datashijian=[]; |
|---|
| | | function shijian() { |
|---|
| | | datashijian=[]; |
|---|
| | | var s=14; |
|---|
| | | while(s>0){ |
|---|
| | | s=s-1; |
|---|
| | | |
|---|
| | | var date_day7=new Date(Date.parse(new Date())-s*24*60*60*1000); |
|---|
| | | |
|---|
| | | var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate(); |
|---|
| | | datashijian.push(day7); |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // function drawLine2(){ |
|---|
| | | |
|---|
| | | // var chartDom = document.getElementById('main2'); |
|---|
| | | // var myChart = echarts.init(chartDom); |
|---|
| | | // var option; |
|---|
| | | // alert(app.$data.shuzu1[0]['2_smallglass_completed']); |
|---|
| | | // option = { |
|---|
| | | |
|---|
| | | |
|---|
| | | // borderColor:'#082352', |
|---|
| | | // title: { |
|---|
| | | // // text: 'æååºå', |
|---|
| | | // // left: '290px', |
|---|
| | | // // top: '0px' |
|---|
| | | // text:'åæ ¼ç',//主æ é¢ææ¬ |
|---|
| | | // left:'center', |
|---|
| | | // top:'45%', |
|---|
| | | // left:'40%', |
|---|
| | | // 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: app.$data.shuzu1[0]['2_smallglass_completed'], name: 'æå',itemStyle:{color:'#53a2ff'} }, |
|---|
| | | // { value: app.$data.shuzu1[0]['3_smallglass_processing'], name: '次å',itemStyle:{color:'darkseagreen'} } |
|---|
| | | // ], |
|---|
| | | // // emphasis: { |
|---|
| | | // // itemStyle: { |
|---|
| | | // // shadowBlur: 10, |
|---|
| | | // // shadowOffsetX: 0, |
|---|
| | | // // shadowColor: 'rgba(0, 0, 0, 0.5)' |
|---|
| | | // // } |
|---|
| | | // // } |
|---|
| | | // itemStyle: { |
|---|
| | | // normal:{ |
|---|
| | | // label:{ |
|---|
| | | // show:true, |
|---|
| | | // //formatter: "{b} :\n {c} \n ({d}%)", |
|---|
| | | // formatter: "{b} :\n ({d}%)", |
|---|
| | | // position:"inner" |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // ] |
|---|
| | | // }; |
|---|
| | | |
|---|
| | | // option && myChart.setOption(option); |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | // var chartDom4 = document.getElementById('main4'); |
|---|
| | | // var myChart4 = echarts.init(chartDom4); |
|---|
| | | // var option4; |
|---|
| | | // option4 = { |
|---|
| | | |
|---|
| | | |
|---|
| | | // borderColor:'#082352', |
|---|
| | | // title: { |
|---|
| | | // // text: 'æååºå', |
|---|
| | | // // left: '290px', |
|---|
| | | // // top: '0px' |
|---|
| | | // text:'订åå å·¥',//主æ é¢ææ¬ |
|---|
| | | // left:'center', |
|---|
| | | // top:'45%', |
|---|
| | | // left:'40%', |
|---|
| | | // textStyle:{ |
|---|
| | | // color:'#454c5c', |
|---|
| | | // align:'center' |
|---|
| | | // }, |
|---|
| | | // subtextStyle:{ |
|---|
| | | // fontFamily : "微软é
é»", |
|---|
| | | // color:'#6c7a89', |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // }, |
|---|
| | | |
|---|
| | | // tooltip: { |
|---|
| | | // trigger: 'item', |
|---|
| | | // textStyle:{ |
|---|
| | | // fontsize: 12, |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // legend: { |
|---|
| | | // // orient: 'vertical', |
|---|
| | | // left: 'left', |
|---|
| | | // textStyle:{ |
|---|
| | | // fontsize: 12, |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // textStyle:{ |
|---|
| | | // fontsize: 12, |
|---|
| | | // }, |
|---|
| | | // 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: 700, name: 'å·²å®æ',itemStyle:{color:'#53a2ff'} }, |
|---|
| | | // { value: 300, name: 'æªå®æ',itemStyle:{color:'darkseagreen'} } |
|---|
| | | // ], |
|---|
| | | // // emphasis: { |
|---|
| | | // // itemStyle: { |
|---|
| | | // // shadowBlur: 10, |
|---|
| | | // // shadowOffsetX: 0, |
|---|
| | | // // shadowColor: 'rgba(0, 0, 0, 0.5)' |
|---|
| | | // // } |
|---|
| | | // // } |
|---|
| | | // itemStyle: { |
|---|
| | | // normal:{ |
|---|
| | | // label:{ |
|---|
| | | // show:true, |
|---|
| | | // //formatter: "{b} :\n {c} \n ({d}%)", |
|---|
| | | // formatter: "{b} :\n ({d}%)", |
|---|
| | | // position:"inner" |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // ] |
|---|
| | | // }; |
|---|
| | | |
|---|
| | | // option4 && myChart4.setOption(option4); |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | // var chartDom1 = document.getElementById('main3-1-2'); |
|---|
| | | // var myChart1 = echarts.init(chartDom1); |
|---|
| | | // var option1; |
|---|
| | | |
|---|
| | | // option1 = { |
|---|
| | | // title: { |
|---|
| | | // text: 'èçµç»è®¡å¾', |
|---|
| | | // right: '0px', |
|---|
| | | // textStyle:{ |
|---|
| | | |
|---|
| | | |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // }, |
|---|
| | | // tooltip: { |
|---|
| | | // trigger: 'axis', |
|---|
| | | // axisPointer: { |
|---|
| | | // type: 'shadow' |
|---|
| | | // }, |
|---|
| | | // textStyle:{ |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // grid: { |
|---|
| | | // left: '3%', |
|---|
| | | // right: '4%', |
|---|
| | | // bottom: '3%', |
|---|
| | | // containLabel: true |
|---|
| | | // }, |
|---|
| | | // xAxis: [ |
|---|
| | | // { |
|---|
| | | // type: 'category', |
|---|
| | | // data: datashijian, |
|---|
| | | // axisTick: { |
|---|
| | | // alignWithLabel: true |
|---|
| | | // }, |
|---|
| | | // axisLabel:{ |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | // yAxis: [ |
|---|
| | | // { |
|---|
| | | // type: 'value', |
|---|
| | | // axisLabel:{ |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | // series: [ |
|---|
| | | // { |
|---|
| | | // name: '产é', |
|---|
| | | // type: 'bar', |
|---|
| | | // barWidth: '40%', |
|---|
| | | // data: [100, 52, 200, 334, 330, 220, 80, 460, 310, 120, 430, 260, 250], |
|---|
| | | // itemStyle:{color:'#53a2ff'} |
|---|
| | | // } |
|---|
| | | // ] |
|---|
| | | // }; |
|---|
| | | |
|---|
| | | // option1 && myChart1.setOption(option1); |
|---|
| | | |
|---|
| | | |
|---|
| | | // var chartDom2 = document.getElementById('main3-2-2'); |
|---|
| | | // var myChart2 = echarts.init(chartDom2); |
|---|
| | | // var option2; |
|---|
| | | |
|---|
| | | // option2 = { |
|---|
| | | // title: { |
|---|
| | | // text: 'èæ°´ç»è®¡å¾', |
|---|
| | | // right: '0px', |
|---|
| | | // textStyle:{ |
|---|
| | | |
|---|
| | | |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // }, |
|---|
| | | // tooltip: { |
|---|
| | | // trigger: 'axis', |
|---|
| | | // axisPointer: { |
|---|
| | | // type: 'shadow' |
|---|
| | | // }, |
|---|
| | | // textStyle:{ |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // grid: { |
|---|
| | | // left: '3%', |
|---|
| | | // right: '4%', |
|---|
| | | // bottom: '3%', |
|---|
| | | // containLabel: true |
|---|
| | | // }, |
|---|
| | | // xAxis: [ |
|---|
| | | // { |
|---|
| | | // type: 'category', |
|---|
| | | // data: datashijian, |
|---|
| | | // axisTick: { |
|---|
| | | // alignWithLabel: true |
|---|
| | | // }, |
|---|
| | | // axisLabel:{ |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | // yAxis: [ |
|---|
| | | // { |
|---|
| | | // type: 'value', |
|---|
| | | // axisLabel:{ |
|---|
| | | |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | // series: [ |
|---|
| | | // { |
|---|
| | | // name: '产é', |
|---|
| | | // type: 'bar', |
|---|
| | | // barWidth: '40%', |
|---|
| | | // data: [100, 52, 200, 334, 330, 220, 80, 460, 310, 120, 430, 260, 250], |
|---|
| | | // itemStyle:{color:'#53a2ff'} |
|---|
| | | // } |
|---|
| | | // ] |
|---|
| | | // }; |
|---|
| | | |
|---|
| | | // option2 && myChart2.setOption(option2); |
|---|
| | | //} |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| | | <title>大å±å¯å±</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" > |
|---|
| | | <screen-photo :id="15" :intime="this.global.timer" |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | let app= new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | |
|---|
| | | <%@ page language="java" import="java.sql.*" contentType="text/html; charset=UTF-8" |
|---|
| | | pageEncoding="UTF-8"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | |
|---|
| | | <link rel="shortcut icon" href="../img/3.ico" /> |
|---|
| | | <title>æå大å±</title> |
|---|
| | | |
|---|
| | | <!-- Font Awesome --> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css"> |
|---|
| | | <!-- Ionicons --> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css"> |
|---|
| | | <!-- Theme style --> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css"> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css"> |
|---|
| | | <link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css"> |
|---|
| | | <style type="text/css"> |
|---|
| | | @IMPORT url("../static/global/showtask/showtask.css"); |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | var contextPath = "${pageContext.request.contextPath}"; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <link type="text/css" rel="stylesheet" |
|---|
| | | href="../static/css/dataTables.bootstrap.css" /> |
|---|
| | | <link type="text/css" rel="stylesheet" |
|---|
| | | href="../static/css/dataTables.tableTools.css" /> |
|---|
| | | |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/moment.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/sucaijiayuan.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/laydate/laydate.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/util/utilAlert.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | *{ |
|---|
| | | margin:0; |
|---|
| | | padding:0; |
|---|
| | | } |
|---|
| | | #top{ |
|---|
| | | height:30%; |
|---|
| | | display:flex; |
|---|
| | | } |
|---|
| | | #center{ |
|---|
| | | height:40%; |
|---|
| | | display:flex; |
|---|
| | | } |
|---|
| | | #bottom{ |
|---|
| | | height:30%; |
|---|
| | | display:flex; |
|---|
| | | } |
|---|
| | | .top_div{ |
|---|
| | | width:25%; |
|---|
| | | height:100%; |
|---|
| | | } |
|---|
| | | .center_div{ |
|---|
| | | width:25%; |
|---|
| | | height:100%; |
|---|
| | | display:flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | .center_divs{ |
|---|
| | | width:50%; |
|---|
| | | height:100%; |
|---|
| | | } |
|---|
| | | .center_div_details{ |
|---|
| | | height:50%; |
|---|
| | | width:100%; |
|---|
| | | } |
|---|
| | | .bottom_div{ |
|---|
| | | width:25%; |
|---|
| | | height:100%; |
|---|
| | | } |
|---|
| | | img{ |
|---|
| | | max-width: 100%; |
|---|
| | | max-height: 100%; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | margin: auto; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white" style='background-color:#D5EAFF;width:100%;height: 100%;'> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="top"> |
|---|
| | | <div class="top_div"> |
|---|
| | | <!-- <img :src="arr[0]"> --> |
|---|
| | | <h2>æå大å±</h2> |
|---|
| | | </div> |
|---|
| | | <div class="top_div" id="Histogram1"></div> |
|---|
| | | <div class="top_div" id="Histogram2"></div> |
|---|
| | | <div class="top_div"></div> |
|---|
| | | </div> |
|---|
| | | <div id="center"> |
|---|
| | | <div class="center_div"> |
|---|
| | | <div class="center_div_details" id="Histogram5"></div> |
|---|
| | | <div class="center_div_details" id="Histogram6"></div> |
|---|
| | | </div> |
|---|
| | | <div style="width:100%;" class="center_divs"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | <div class="center_div"> |
|---|
| | | <div class="center_div_details" id="Histogram7"></div> |
|---|
| | | <div class="center_div_details" id="Histogram8"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="bottom"> |
|---|
| | | <div class="bottom_div"></div> |
|---|
| | | <div class="bottom_div" id="Histogram3"></div> |
|---|
| | | <div class="bottom_div" id="Histogram4"></div> |
|---|
| | | <div class="bottom_div"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="4" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | > |
|---|
| | | </screen-photo> |
|---|
| | | <parts-change-all |
|---|
| | | :machinetype="'é»å'" |
|---|
| | | v-show="this.global.pollingIndex==2"> |
|---|
| | | </parts-change-all> |
|---|
| | | </div> |
|---|
| | | <script> |
|---|
| | | Vue.prototype.$echarts = echarts |
|---|
| | | Vue.prototype.$http= axios |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins: [mixin], |
|---|
| | | data: { |
|---|
| | | storage: null, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'çµè', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgb(180, 180, 180)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | tableHead: [{}], |
|---|
| | | selectdate1: '', |
|---|
| | | selectdate2: '', |
|---|
| | | tableData: [{}], |
|---|
| | | show: true, |
|---|
| | | showGlassType: '', |
|---|
| | | showGlassIndex: 0, |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | loading:true, |
|---|
| | | arr:[] |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit() { |
|---|
| | | |
|---|
| | | let HisArr=[] |
|---|
| | | |
|---|
| | | for(let i=0;i<4;i++){ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i+1))); |
|---|
| | | } |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw·h)' |
|---|
| | | for(let i in this.machineElectric){ |
|---|
| | | this.val.title.text=this.machineElectric[i]["0_machine_name"]+"(kw·h)" |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | this.val.xAxis[0].data=this.machineElectric[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=this.machineElectric[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | echarsInit1(){ |
|---|
| | | let HisArr=[] |
|---|
| | | |
|---|
| | | for(let i=0;i<4;i++){ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i+5))); |
|---|
| | | } |
|---|
| | | this.val.yAxis[0].name="æ°´è"; |
|---|
| | | this.val.series[0].name='æ°´è(m³)' |
|---|
| | | for(let i in this.machineWater){ |
|---|
| | | this.val.title.text=this.machineWater[i]["0_machine_name"]+"(m³)" |
|---|
| | | this.val.series[0].itemStyle.color='#00ff00' |
|---|
| | | this.val.xAxis[0].data=this.machineWater[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=this.machineWater[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | tableData(newVal){ |
|---|
| | | newVal.forEach(element => { |
|---|
| | | this.arr.push(element['11_route']) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | machineElectric(){ |
|---|
| | | this.echarsInit() |
|---|
| | | }, |
|---|
| | | machineWater(){ |
|---|
| | | this.echarsInit1() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±æ¾ç¤ºé»åæºå¨è®¢åæ¥è¯¢',sql,flag,"tableHead") |
|---|
| | | |
|---|
| | | await this.getTableData('é»å') |
|---|
| | | await this.getMachineElectric('é»å','3') |
|---|
| | | await this.getMachineWater('é»å','1') |
|---|
| | | this.onmouseMove2(); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%> |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <title>é¢å</title> |
|---|
| | | |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | | |
|---|
| | | body { |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | } |
|---|
| | | #divhead{ |
|---|
| | | float: left; |
|---|
| | | margin-top: 3%; |
|---|
| | | width: 98%; |
|---|
| | | margin-left: 1%; |
|---|
| | | } |
|---|
| | | #divBody{ |
|---|
| | | margin-top: 4%; |
|---|
| | | float: left; |
|---|
| | | width: 100%; |
|---|
| | | height: 60%; |
|---|
| | | } |
|---|
| | | #orderData{ |
|---|
| | | float: left; |
|---|
| | | height: 98%; |
|---|
| | | width: 55%; |
|---|
| | | background-color: blanchedalmond; |
|---|
| | | } |
|---|
| | | #chart-wrap{ |
|---|
| | | float: left; |
|---|
| | | margin-left: 0; |
|---|
| | | height: 98%; |
|---|
| | | width: 44%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white" style="height: 99%;"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0" > |
|---|
| | | <h3>é¢å</h3> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="divhead"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | <div id="divBody"> |
|---|
| | | <div id="orderData"> |
|---|
| | | <screen-order :tablehead="orderHead" :tabledata="orderData"></screen-order> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="chart-wrap"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="11" :intime="this.global.timer" v-show="this.global.pollingIndex==1"></screen-photo> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableHead: [{}], |
|---|
| | | tableData: [{}], |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | orderHead:[{}], |
|---|
| | | orderData:[{}], |
|---|
| | | loading:true, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'çµè', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgb(180, 180, 180)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=this.machineElectric |
|---|
| | | HisArr[0] = this.$echarts.init(document.getElementById('chart-wrap')); |
|---|
| | | |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw·h)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | danwei="(kw·h)" |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | this.val.title.text='é¢å'+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±æ¾ç¤ºæºå¨è¡¨å¤´',sql,flag,"tableHead") |
|---|
| | | sql="{call AXJ_a_largeScreen_orderRatio_tableHead_select()}" |
|---|
| | | await this.loadAjxss('è´´èæ£æµä»¥åé¢å大å±æ¯ä¾è¡¨å¤´',sql,flag,"orderHead") |
|---|
| | | await this.getTableData('é¢å') |
|---|
| | | await this.getMachineElectric('é¢å',7) |
|---|
| | | let getOrderData=await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_orderRatio_tableData_select()}" |
|---|
| | | this.interValLoadAjxs('è´´èæ£æµä»¥åé¢å大å±æ¯ä¾æ°æ®',sql,flag,"orderData",getOrderData) |
|---|
| | | },5000) |
|---|
| | | this.onmouseMove() |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" import="java.sql.*" contentType="text/html; charset=UTF-8" |
|---|
| | | pageEncoding="UTF-8"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <title>åå²å¤§å±</title> |
|---|
| | | <!-- <link rel="stylesheet" href="../js/static/css/element.css"> |
|---|
| | | <link rel="stylesheet" href="../js/static/css/style.css"> |
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script> |
|---|
| | | <script src="../js/static/js/vue.js"></script> |
|---|
| | | <script src="../js/axios.min.js"></script> |
|---|
| | | <script src="../js/mixins.js"></script> |
|---|
| | | <script src="../js/static/js/element.js"></script> |
|---|
| | | <script src="../js/static/js/echarts.min.js"></script> --> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | <style > |
|---|
| | | .page-scroll { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-scroll .el-scrollbar__wrap { |
|---|
| | | overflow-x: hidden; |
|---|
| | | } |
|---|
| | | .imgs{ |
|---|
| | | width: auto; |
|---|
| | | height: auto; |
|---|
| | | max-width: 80%; |
|---|
| | | max-height: 80%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="left" style="width:69%;height: 100%;float: left;margin-right: 1%;"> |
|---|
| | | <div style="width: 100%;height: 15%;margin-top: 1%;"> |
|---|
| | | <h3 style="text-align: left;font-size: larger;margin: 0;">ç»çåå²:</h3> |
|---|
| | | <!-- <h3 style="text-align: left;font-size: small;margin: 0;">å·¥ä½ç¶æ: |
|---|
| | | <el-tag v-if="order['9_work_state']!='æ£å¨å·¥ä½'">空é²</el-tag> |
|---|
| | | <el-tag v-else= type="success">æ£å¨å·¥ä½</el-tag> |
|---|
| | | </h3> --> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div style="width:100%;height: 85%;float: left;position: relative;"> |
|---|
| | | <!-- <el-image |
|---|
| | | |
|---|
| | | src="../static/imgs/test.jpg" |
|---|
| | | ></el-image> --> |
|---|
| | | <img class="imgs" :src="picture" alt=""> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div v-if="Object.keys(order).length!=0" id="main" style="width:30%;height: 100%;float: left;"> |
|---|
| | | <el-descriptions style="height: 50%;width: 98%;margin-top: 5%;" title="ç»çå±æ§ï¼åä½ï¼mmï¼" :column="1" border > |
|---|
| | | <el-descriptions-item colon label="订åç¼å·/åºå·ï¼">{{order['1_order_id']}}</el-descriptions-item> |
|---|
| | | <el-descriptions-item colon label="ç»çå度ï¼" label-class-name="my-label" content-class-name="my-content">{{order['2_thickness']}}</el-descriptions-item> |
|---|
| | | <el-descriptions-item colon label="ç»çè²ç§ï¼">{{order['3_color']}}</el-descriptions-item> |
|---|
| | | <el-descriptions-item colon label="å°ç宽é«ï¼">{{order['4_width']+'*'+order['5_height']}}</el-descriptions-item> |
|---|
| | | <el-descriptions-item colon label="åç宽é«ï¼"> |
|---|
| | | {{order['7_original_width']+'*'+order['8_original_height']}} |
|---|
| | | </el-descriptions-item> |
|---|
| | | |
|---|
| | | <!-- <el-descriptions-item colon label="æç¨è½èï¼"> |
|---|
| | | {{order['13_electric']}} (kw·h) |
|---|
| | | </el-descriptions-item> --> |
|---|
| | | |
|---|
| | | <!-- <el-descriptions-item colon label="æ»æ°/å·²å®æ/ç ´æï¼"> |
|---|
| | | {{order['10_smallglass_no']+'/'+order['11_smallglass_completed']+'/'+order['12_smallglass_worn']}} |
|---|
| | | </el-descriptions-item> --> |
|---|
| | | <el-descriptions-item colon label="èææ´æ¢ï¼"> |
|---|
| | | <el-button type="text" @click="openParts" :style="order['14_parts_count']==1?textColor:null" >æ´æ¢</el-button> |
|---|
| | | </el-descriptions-item> |
|---|
| | | <!-- <el-descriptions-item colon label="æå¨ç ´æï¼"> |
|---|
| | | |
|---|
| | | <el-button type="text">ç ´æ</el-button> |
|---|
| | | </el-descriptions-item> --> |
|---|
| | | </el-descriptions> |
|---|
| | | <div class="top_div" style="width: 100%;height: 30vh;" id="Histogram1"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="2" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | ></screen-photo> |
|---|
| | | <parts-change-all |
|---|
| | | :machinetype="'åå²'" |
|---|
| | | v-show="this.global.pollingIndex==2"> |
|---|
| | | </parts-change-all> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let app= new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data:{ |
|---|
| | | machineElectric:[{}], |
|---|
| | | glassCutInfo:{}, |
|---|
| | | picture:null, |
|---|
| | | order:{}, |
|---|
| | | loading:true, |
|---|
| | | textColor:{ |
|---|
| | | color:'orange' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | openParts(){ |
|---|
| | | this.$emit('dialogvisible', |
|---|
| | | { |
|---|
| | | 'show':true, |
|---|
| | | 'machineid':4 |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | }, |
|---|
| | | echarsInit() { |
|---|
| | | |
|---|
| | | let HisArr=[] |
|---|
| | | |
|---|
| | | for(let i=0;i<1;i++){ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram1')); |
|---|
| | | } |
|---|
| | | let val=this.global.val |
|---|
| | | val.yAxis[0].name="çµè"; |
|---|
| | | val.series[0].name='çµè(kw·h)' |
|---|
| | | |
|---|
| | | |
|---|
| | | for(let i in this.machineElectric){ |
|---|
| | | val.title.text=this.machineElectric[i]["0_machine_name"]+"(kw·h)" |
|---|
| | | val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | val.xAxis[0].data=this.machineElectric[i]["6_shijian"].split(','); |
|---|
| | | val.series[0].data=this.machineElectric[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | computed:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | glassCutInfo(){ |
|---|
| | | this.picture=this.glassCutInfo[0]['6_route'] |
|---|
| | | this.order=this.glassCutInfo[0] |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | machineElectric(){ |
|---|
| | | this.echarsInit() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="{call AXJ_a_largeScreen_glassCut_select()}" |
|---|
| | | let flag=2 |
|---|
| | | let glassCutInfoTimer=await setInterval(()=>{ |
|---|
| | | this.interValLoadAjxs('大å±æ¾ç¤ºåå²',sql,flag,"glassCutInfo",glassCutInfoTimer) |
|---|
| | | },3000) |
|---|
| | | |
|---|
| | | await this.getMachineElectric('åå²','2') |
|---|
| | | this.onmouseMove2() |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" import="java.sql.*" contentType="text/html; charset=UTF-8" |
|---|
| | | pageEncoding="UTF-8"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <title>ä»å¨å¤§å±</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <div id="divHead" style="width: 100%;height:19.5%;float: left;margin-bottom: 0.5%;position: relative;"> |
|---|
| | | <!-- <el-scrollbar class="page-scroll" style="width: 100%;height: 70%;overflow-y: auto;"> --> |
|---|
| | | <div v-for="(items,index) in storage" style="width:6.9% ;height: 35%;margin-top: 1.5%;margin-left: 1.3%;float: left;"> |
|---|
| | | <div |
|---|
| | | class="shelf" |
|---|
| | | :title="items['2_raw_thickness']+items['3_color']+' '+items['4_raw_width']+'*'+items['5_raw_height'] " |
|---|
| | | style="background-color: #909399;width: 100%;height: 40%;float: left;position: relative;"> |
|---|
| | | |
|---|
| | | <div v-if="index<=23" |
|---|
| | | :style="{ |
|---|
| | | width:(items['7_left_pieces']/items['6_pieces']*100)+'%', |
|---|
| | | position: 'absolute', |
|---|
| | | left: 0, |
|---|
| | | height: 100+'%', |
|---|
| | | float: 'left', |
|---|
| | | 'background-image':`url('../js/static/imgs/101.png')` |
|---|
| | | }" |
|---|
| | | |
|---|
| | | |
|---|
| | | > |
|---|
| | | <span style="position: absolute;left: 0;color:white;font-size:small;height: 100%;width: 100%;">{{items['7_left_pieces']+'/'+items['6_pieces']}}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div v-if="index==24" |
|---|
| | | style="background-image:url('../static/imgs/103.png');width: 0%;height: 100%;float: left;position: absolute; left: 0;"> |
|---|
| | | <span style="position: absolute;left: 0;color:white;font-size: small;height: 100%;width: 100%;">0/50</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | {{items['0_id']}} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- <el-progress |
|---|
| | | width="80" |
|---|
| | | percentage="50" |
|---|
| | | :color="customColors" |
|---|
| | | :format="setItemText" |
|---|
| | | ></el-progress> --> |
|---|
| | | |
|---|
| | | |
|---|
| | | <div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="left" style="width: 19.5%;height:80%;float: left;padding: 0; margin-right: 0.5%;"> |
|---|
| | | <div style="width:100%;height: 20%;"> |
|---|
| | | <transition name="el-fade-in"> |
|---|
| | | <div v-show="show" |
|---|
| | | style="float: left;width: 100%;height: 20%;margin-top: 4%;"> |
|---|
| | | |
|---|
| | | <div |
|---|
| | | style="background-image:url('../js/static/imgs/101.png');height: 20px;width: 20px;padding: 0%;float: left;" |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <p style="float: left;margin: 0;margin-left: 1.3%;">{{showGlassType}}</p> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </transition> |
|---|
| | | <!-- <div style="float: left;width: 100%;height: 46%;margin-top: 4%;"> |
|---|
| | | |
|---|
| | | <el-alert style="width: 80%;margin-left: 10%;background-color: transparent;" |
|---|
| | | title="24å·æ¶å空æ¶ï¼åè£
空é²" |
|---|
| | | type="warning" |
|---|
| | | :closable="false" |
|---|
| | | show-icon> |
|---|
| | | <el-button @click="show1" type="warning" style="float: left;">è°ç¨åè£
ä½</el-button> |
|---|
| | | </el-alert> |
|---|
| | | |
|---|
| | | </div> --> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="picture" style="width:100%;height: 40%;"></div> |
|---|
| | | <div id="Histogram1" style="width:100%;height: 40%;"></div> |
|---|
| | | </div> |
|---|
| | | <div id="main" style="width: 80%;height:80%;float: right;padding: 0;background-color: white;"> |
|---|
| | | <el-date-picker style="float: left;margin-bottom: 0.3%;" |
|---|
| | | v-model="selectdate" |
|---|
| | | type="daterange" |
|---|
| | | range-separator="è³" |
|---|
| | | start-placeholder="å¼å§æ¥æ" |
|---|
| | | end-placeholder="ç»ææ¥æ" |
|---|
| | | value-format="yyyy-MM-dd" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | |
|---|
| | | <el-button type="primary" icon="el-icon-search" |
|---|
| | | style="float: left;margin-left: 0.2%;margin-bottom: 0.3%;" |
|---|
| | | @click="selectSub(1)" |
|---|
| | | >æç´¢</el-button> |
|---|
| | | |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | height="92%" |
|---|
| | | |
|---|
| | | style="width: 100%"> |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item,keys,index) in tableHead[0]" |
|---|
| | | :key="index" |
|---|
| | | :label="item" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | :prop="keys" |
|---|
| | | > |
|---|
| | | <template slot="header" slot-scope="scope" > |
|---|
| | | <el-input v-model="selectstorage[index]" @keyup.enter.native="selectSub(1)" type="text" size="mini" /> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | |
|---|
| | | </el-table> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="1" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | > |
|---|
| | | </screen-photo> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | |
|---|
| | | <script > |
|---|
| | | let app =new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data:{ |
|---|
| | | machineElectric:[{}], |
|---|
| | | storage:null, |
|---|
| | | glassNumGraph:{ |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | top: '5%', |
|---|
| | | left: 'center' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'æ°é', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | avoidLabelOverlap: true, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 10, |
|---|
| | | borderColor: '#fff', |
|---|
| | | borderWidth: 2 |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | formatter:null, |
|---|
| | | fontSize: 20, |
|---|
| | | fontWeight: 'bold',show: true, |
|---|
| | | position: 'center' |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | label: { |
|---|
| | | formatter:null, |
|---|
| | | show: true, |
|---|
| | | fontSize: 20, |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | data:[ |
|---|
| | | { value: null, name: 'æªä½¿ç¨',itemStyle: {color:'#409EFF'} }, |
|---|
| | | { value: null, name: '计åä¸',itemStyle: {color:'#67C23A'} }, |
|---|
| | | { value: null, name: '已使ç¨',itemStyle: {color:'#C0C4CC'} } |
|---|
| | | ], |
|---|
| | | |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | tableHead:[{}], |
|---|
| | | tableData:null, |
|---|
| | | show:true, |
|---|
| | | showGlassType:'', |
|---|
| | | showGlassIndex:0, |
|---|
| | | storageNum:null, |
|---|
| | | selectstorage:["","","","","","","","","",""],//çéåæ° |
|---|
| | | selectdate:["",""],//æ¥æåæ° |
|---|
| | | loading:true, |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(){ |
|---|
| | | let a = this.$echarts.init( document.getElementById('picture')) |
|---|
| | | this.glassNumGraph.series[0].data[0]['value']=this.storageNum[0]['2_weishiyong'] |
|---|
| | | this.glassNumGraph.series[0].data[1]['value']=this.storageNum[0]['1_jihuashuliang'] |
|---|
| | | this.glassNumGraph.series[0].data[2]['value']=this.storageNum[0]['0_yishiyong'] |
|---|
| | | |
|---|
| | | this.glassNumGraph.series[0].label.formatter=this.storageNum[0]['2_weishiyong']+'/' |
|---|
| | | +this.storageNum[0]['1_jihuashuliang']+'/' |
|---|
| | | +this.storageNum[0]['0_yishiyong'] |
|---|
| | | console.log(this.glassNumGraph.series[0].data); |
|---|
| | | a.setOption(this.glassNumGraph) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | showGlass(){ |
|---|
| | | this.showGlassIndex=this.showGlassIndex<this.storage.length?this.showGlassIndex+1:1 |
|---|
| | | this.show=false |
|---|
| | | this.showGlassType=this.storage[this.showGlassIndex-1]['0_id']+ |
|---|
| | | 'å·æ¶ï¼'+ |
|---|
| | | this.storage[this.showGlassIndex-1]['2_raw_thickness']+ |
|---|
| | | this.storage[this.showGlassIndex-1]['3_color']+' '+ |
|---|
| | | this.storage[this.showGlassIndex-1]['4_raw_width']+ |
|---|
| | | '*'+ |
|---|
| | | this.storage[this.showGlassIndex-1]['5_raw_height'] |
|---|
| | | this.show=true |
|---|
| | | |
|---|
| | | }, |
|---|
| | | async selectSub(type){//è¾å
¥æ¡çé |
|---|
| | | let arrObj={} |
|---|
| | | for(let i in this.selectstorage){ |
|---|
| | | |
|---|
| | | arrObj[i]=this.selectstorage[i]==''?"n*":this.selectstorage[i] |
|---|
| | | } |
|---|
| | | if(this.selectdate!=null){ |
|---|
| | | arrObj.starttime=this.selectdate[0] |
|---|
| | | arrObj.endtime=this.selectdate[1] |
|---|
| | | }else{ |
|---|
| | | arrObj.starttime='' |
|---|
| | | arrObj.endtime='' |
|---|
| | | } |
|---|
| | | arrObj.types=type |
|---|
| | | let sql="{call AXJ_a_largeScreen_storageLog_select(?,?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj) |
|---|
| | | this.loading=true |
|---|
| | | await this.loadAjxss('订åæ¥è¯¢',sql,2,"tableData") |
|---|
| | | |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | echarsInit1() { |
|---|
| | | |
|---|
| | | let HisArr=[] |
|---|
| | | HisArr[0] = this.$echarts.init(document.getElementById('Histogram1')); |
|---|
| | | let val=this.global.val |
|---|
| | | val.yAxis[0].name="çµè"; |
|---|
| | | val.series[0].name='çµè(kw·h)' |
|---|
| | | for(let i in this.machineElectric){ |
|---|
| | | val.title.text=this.machineElectric[i]["0_machine_name"]+"(kw·h)" |
|---|
| | | val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | val.xAxis[0].data=this.machineElectric[i]["6_shijian"].split(','); |
|---|
| | | val.series[0].data=this.machineElectric[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | watch:{ |
|---|
| | | storageNum(){ |
|---|
| | | this.loading=false, |
|---|
| | | this.echarsInit() |
|---|
| | | }, |
|---|
| | | machineElectric(){ |
|---|
| | | this.echarsInit1() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | async mounted() { |
|---|
| | | |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | sql="{call AXJ_a_largeScreen_storageLog__headselect()}" |
|---|
| | | await this.loadAjxss('大å±æ¾ç¤ºä»å¨è¡¨å¤´',sql,flag,"tableHead") |
|---|
| | | |
|---|
| | | let timer1=await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_storageRack_select()}" |
|---|
| | | this.interValLoadAjxs('大å±æ¾ç¤ºä»å¨æ¶å',sql,flag,"storage",timer1) |
|---|
| | | },3000) |
|---|
| | | let timer2=await setInterval(() => { |
|---|
| | | sql="{call AXJ_a_largeScreen_storageGlassNum_select()}" |
|---|
| | | this.interValLoadAjxs('大å±æ¾ç¤ºä»å¨å©ä½æ°é',sql,flag,"storageNum",timer2) |
|---|
| | | this.showGlass() |
|---|
| | | }, 3000); |
|---|
| | | await this.selectSub(0) |
|---|
| | | await this.getMachineElectric('ä»å¨','1') |
|---|
| | | this.onmouseMove() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | |
|---|
| | | <title>å å·¥ä¸å¿</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | </head> |
|---|
| | | <style> |
|---|
| | | * { |
|---|
| | | margin: 0px; |
|---|
| | | padding: 0px; |
|---|
| | | font-size: 14px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | body, |
|---|
| | | html { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | #wai { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | position: relative; |
|---|
| | | margin: 0px; |
|---|
| | | padding: 0px; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_zs { |
|---|
| | | width: 50%; |
|---|
| | | height: 49%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | border-right: 1px solid white; |
|---|
| | | border-bottom: 1px solid white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_ys { |
|---|
| | | width: 49%; |
|---|
| | | height: 49%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | border-bottom: 1px solid white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_zx { |
|---|
| | | width: 50%; |
|---|
| | | height: 50%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | border-right: 1px solid white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_yx { |
|---|
| | | width: 49%; |
|---|
| | | height: 50%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .msgtab { |
|---|
| | | width: 50%; |
|---|
| | | height: 35%; |
|---|
| | | border: 1px solid white; |
|---|
| | | border-collapse: collapse; |
|---|
| | | position: absolute; |
|---|
| | | top: 33%; |
|---|
| | | left: 25%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* |
|---|
| | | |
|---|
| | | .one1, |
|---|
| | | .one1 input { |
|---|
| | | background-color: #F0FFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .double1, |
|---|
| | | .double1 input { |
|---|
| | | background-color: #e1f0fd; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .msgtab tr th { |
|---|
| | | color: white; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-align: center; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .msgtab tr td { |
|---|
| | | |
|---|
| | | white-space: nowrap; |
|---|
| | | text-align: center; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | } */ |
|---|
| | | |
|---|
| | | #container { |
|---|
| | | width: 50%; |
|---|
| | | position: absolute; |
|---|
| | | top: 17%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | #Histogram1 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: 39%; |
|---|
| | | left: 0% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram2 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: -60%; |
|---|
| | | left: 50% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram4{ |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: -60%; |
|---|
| | | left: 0% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram3 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: 39%; |
|---|
| | | left: 50% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram6 { |
|---|
| | | |
|---|
| | | width: 50%; |
|---|
| | | height: 58%; |
|---|
| | | position: relative; |
|---|
| | | top: 42%; |
|---|
| | | left: 50%; |
|---|
| | | top: -19%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram5 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | left: 0% |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | #Histogram7 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | left: 50% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram8 { |
|---|
| | | width: 50%; |
|---|
| | | height: 58%; |
|---|
| | | position: relative; |
|---|
| | | top: -19%; |
|---|
| | | left: 0%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centdv_time { |
|---|
| | | color: white; |
|---|
| | | width: 50%; |
|---|
| | | height: 30%; |
|---|
| | | position: relative; |
|---|
| | | top: -71%; |
|---|
| | | left: 0%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centdv_time input { |
|---|
| | | height: 25px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .btn { |
|---|
| | | text-align: center; |
|---|
| | | width: 100px; |
|---|
| | | height: 29px; |
|---|
| | | /* outline: none; */ |
|---|
| | | border: none; |
|---|
| | | background-color: #5CADFE; |
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="wai"> |
|---|
| | | <div class="wai_zs"> |
|---|
| | | <div id="Histogram1"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram2"></div> |
|---|
| | | </div> |
|---|
| | | <div class="wai_ys"> |
|---|
| | | <div id="Histogram3"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram4"></div> |
|---|
| | | </div> |
|---|
| | | <div class="wai_zx"> |
|---|
| | | <div id="Histogram5"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram6"></div> |
|---|
| | | </div> |
|---|
| | | <div class="wai_yx"> |
|---|
| | | <div id="Histogram7"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram8"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="centdv_time"> |
|---|
| | | <el-date-picker style="float: center;margin-bottom: 0.3%;" |
|---|
| | | v-model="selectDate" |
|---|
| | | type="daterange" |
|---|
| | | range-separator="è³" |
|---|
| | | start-placeholder="å¼å§æ¥æ" |
|---|
| | | end-placeholder="ç»ææ¥æ"> |
|---|
| | | </el-date-picker> |
|---|
| | | |
|---|
| | | <el-button type="primary" icon="el-icon-search" |
|---|
| | | style="float: center;margin-left: 0.2%;margin-bottom: 0.3%;" |
|---|
| | | >æç´¢</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div class="msgtab"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="6" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | > |
|---|
| | | </screen-photo> |
|---|
| | | <parts-change-all |
|---|
| | | :machinetype="'å å·¥ä¸å¿'" |
|---|
| | | v-show="this.global.pollingIndex==2"> |
|---|
| | | </parts-change-all> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins: [mixin], |
|---|
| | | data: { |
|---|
| | | storage: null, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } }, |
|---|
| | | axisLabel: { color: '#5CADFE' }, |
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: "value", |
|---|
| | | name: "æ°´è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "#5CADFE", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: true, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "#5CADFE", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "#5CADFE", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'æ°´è', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { color: '#5CADFE' } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | tableHead: [{}], |
|---|
| | | selectDate: '', |
|---|
| | | tableData: [{}], |
|---|
| | | show: true, |
|---|
| | | showGlassType: '', |
|---|
| | | showGlassIndex: 0, |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | loading:true |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=type==0?this.machineElectric:this.machineWater |
|---|
| | | for(let i=0;i<datas.length;i++){ |
|---|
| | | if(type==0){ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+2))); |
|---|
| | | }else{ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+1))); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if(type==0){ |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw·h)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | }else{ |
|---|
| | | this.val.yAxis[0].name="æ°´è"; |
|---|
| | | this.val.series[0].name='æ°´è(m³)' |
|---|
| | | this.val.series[0].itemStyle.color='#00ff00' |
|---|
| | | } |
|---|
| | | let danwei=type==0?"(kw·h)":'(m³)' |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | this.val.title.text=datas[i]["0_machine_name"]+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | machineWater(){ |
|---|
| | | if(Object.keys(this.machineWater[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(1) |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±å å·¥ä¸å¿è®¢åæ¥è¯¢',sql,flag,"tableHead") |
|---|
| | | await this.getTableData('å å·¥ä¸å¿') // 磨边åè§ |
|---|
| | | await this.getMachineElectric('å å·¥ä¸å¿','1') |
|---|
| | | await this.getMachineWater('å å·¥ä¸å¿','1') |
|---|
| | | this.onmouseMove2() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" import="java.sql.*" contentType="text/html; charset=UTF-8" |
|---|
| | | pageEncoding="UTF-8"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <link rel="shortcut icon" href="../img/3.ico" /> |
|---|
| | | <title>磨边åè§</title> |
|---|
| | | <!-- Font Awesome --> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css"> |
|---|
| | | <!-- Ionicons --> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css"> |
|---|
| | | <!-- Theme style --> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css"> |
|---|
| | | <link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css"> |
|---|
| | | <link rel="stylesheet" href="..//static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css"> |
|---|
| | | <style type="text/css"> |
|---|
| | | @IMPORT url("../static/global/showtask/showtask.css"); |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | var contextPath = "${pageContext.request.contextPath}"; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <link type="text/css" rel="stylesheet" |
|---|
| | | href="../static/css/dataTables.bootstrap.css" /> |
|---|
| | | <link type="text/css" rel="stylesheet" |
|---|
| | | href="../static/css/dataTables.tableTools.css" /> |
|---|
| | | |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../static/js/jquery.dataTables.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/dataTables.bootstrap.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/dataTables.tableTools.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/moment.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/sucaijiayuan.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/laydate/laydate.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/util/utilAlert.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | *{ |
|---|
| | | margin:0; |
|---|
| | | padding:0; |
|---|
| | | } |
|---|
| | | #top{ |
|---|
| | | height:37%; |
|---|
| | | display:flex; |
|---|
| | | } |
|---|
| | | #center{ |
|---|
| | | height:26%; |
|---|
| | | display:flex; |
|---|
| | | } |
|---|
| | | #bottom{ |
|---|
| | | height:37%; |
|---|
| | | display:flex; |
|---|
| | | } |
|---|
| | | .top_div{ |
|---|
| | | width:33%; |
|---|
| | | height:100%; |
|---|
| | | } |
|---|
| | | .center_divs{ |
|---|
| | | width:100%; |
|---|
| | | height:100%; |
|---|
| | | } |
|---|
| | | .center_div_details{ |
|---|
| | | height:50%; |
|---|
| | | width:100%; |
|---|
| | | } |
|---|
| | | .bottom_div{ |
|---|
| | | width:33%; |
|---|
| | | height:100%; |
|---|
| | | } |
|---|
| | | img{ |
|---|
| | | max-width: 100%; |
|---|
| | | max-height: 100%; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | margin: auto; |
|---|
| | | } |
|---|
| | | .photo{ |
|---|
| | | max-width: 80%; |
|---|
| | | max-height: 80%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .imga{ |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | #mains{ |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white" style='background-color:#D5EAFF;width:100%;height: 100%;'> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="top"> |
|---|
| | | <div class="top_div imga"><img class="photo" :src="arr[0]"></div> |
|---|
| | | <div class="top_div" id="Histogram1">æåæº1æ°´è</div> |
|---|
| | | <div class="top_div" id="Histogram2">æåæº1çµè</div> |
|---|
| | | </div> |
|---|
| | | <div id="center"> |
|---|
| | | <div style="width:100%;" class="center_divs"> |
|---|
| | | |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="bottom"> |
|---|
| | | <div class="bottom_div imga"><img class="photo" :src="arr[0]"></div> |
|---|
| | | <div class="bottom_div" id="Histogram3">æåæº2æ°´è</div> |
|---|
| | | <div class="bottom_div" id="Histogram4">æåæº2çµè</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="3" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | > |
|---|
| | | <parts-change-all |
|---|
| | | :machinetype="'磨边åè§'" |
|---|
| | | v-show="this.global.pollingIndex==2"> |
|---|
| | | </parts-change-all> |
|---|
| | | </screen-photo> |
|---|
| | | </div> |
|---|
| | | <script> |
|---|
| | | Vue.prototype.$echarts = echarts |
|---|
| | | Vue.prototype.$http= axios |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins: [mixin], |
|---|
| | | data: { |
|---|
| | | |
|---|
| | | storage: null, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'çµè', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'white' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | tableHead: [{}], |
|---|
| | | selectdate1: '', |
|---|
| | | selectdate2: '', |
|---|
| | | tableData: [{}], |
|---|
| | | show: true, |
|---|
| | | showGlassType: '', |
|---|
| | | showGlassIndex: 0, |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | loading:true, |
|---|
| | | arr:[] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=type==0?this.machineElectric:this.machineWater |
|---|
| | | for(let i=0;i<2;i++){ |
|---|
| | | if(type==0){ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+2))); |
|---|
| | | }else{ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+1))); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | if(type==0){ |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw·h)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | }else{ |
|---|
| | | this.val.yAxis[0].name="æ°´è"; |
|---|
| | | this.val.series[0].name='æ°´è(m³)' |
|---|
| | | this.val.series[0].itemStyle.color='#00ff00' |
|---|
| | | } |
|---|
| | | let danwei=type==0?"(kw·h)":'(m³)' |
|---|
| | | for(let i in datas){ |
|---|
| | | if(i>1){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.val.title.text=datas[i]["0_machine_name"]+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | tableData(newVal){ |
|---|
| | | newVal.forEach(element => { |
|---|
| | | this.arr.push(element['11_route']) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | machineWater(){ |
|---|
| | | if(Object.keys(this.machineWater[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(1) |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±æ¾ç¤ºç£¨è¾¹æºå¨è®¢åæ¥è¯¢',sql,flag,"tableHead") |
|---|
| | | await this.getTableData('磨边åè§') // 磨边åè§ |
|---|
| | | await this.getMachineElectric('磨边åè§','2') |
|---|
| | | await this.getMachineWater('磨边åè§','1') |
|---|
| | | this.onmouseMove2() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <title>æ°´å</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | </head> |
|---|
| | | <style> |
|---|
| | | * { |
|---|
| | | margin: 0px; |
|---|
| | | padding: 0px; |
|---|
| | | font-size: 14px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | body, |
|---|
| | | html { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | #wai { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | position: relative; |
|---|
| | | margin: 0px; |
|---|
| | | padding: 0px; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_zs { |
|---|
| | | width: 50%; |
|---|
| | | height: 49%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | border-right: 1px solid white; |
|---|
| | | border-bottom: 1px solid white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_ys { |
|---|
| | | width: 49%; |
|---|
| | | height: 49%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | border-bottom: 1px solid white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_zx { |
|---|
| | | width: 50%; |
|---|
| | | height: 50%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | border-right: 1px solid white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wai_yx { |
|---|
| | | width: 49%; |
|---|
| | | height: 50%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .msgtab { |
|---|
| | | width: 50%; |
|---|
| | | height: 35%; |
|---|
| | | border: 1px solid white; |
|---|
| | | border-collapse: collapse; |
|---|
| | | position: absolute; |
|---|
| | | top: 33%; |
|---|
| | | left: 25%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* |
|---|
| | | |
|---|
| | | .one1, |
|---|
| | | .one1 input { |
|---|
| | | background-color: #F0FFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .double1, |
|---|
| | | .double1 input { |
|---|
| | | background-color: #e1f0fd; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .msgtab tr th { |
|---|
| | | color: white; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-align: center; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .msgtab tr td { |
|---|
| | | |
|---|
| | | white-space: nowrap; |
|---|
| | | text-align: center; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | } */ |
|---|
| | | |
|---|
| | | #container { |
|---|
| | | width: 50%; |
|---|
| | | position: absolute; |
|---|
| | | top: 17%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | #Histogram1 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: 39%; |
|---|
| | | left: 0% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram2 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: -60%; |
|---|
| | | left: 50% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram4{ |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: -60%; |
|---|
| | | left: 0% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram3 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | top: 39%; |
|---|
| | | left: 50% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram6 { |
|---|
| | | |
|---|
| | | width: 50%; |
|---|
| | | height: 58%; |
|---|
| | | position: relative; |
|---|
| | | top: 42%; |
|---|
| | | left: 50%; |
|---|
| | | top: -19%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram5 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | left: 0% |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | #Histogram7 { |
|---|
| | | width: 50%; |
|---|
| | | height: 60%; |
|---|
| | | position: relative; |
|---|
| | | left: 50% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #Histogram8 { |
|---|
| | | width: 50%; |
|---|
| | | height: 58%; |
|---|
| | | position: relative; |
|---|
| | | top: -19%; |
|---|
| | | left: 0%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centdv_time { |
|---|
| | | color: white; |
|---|
| | | width: 50%; |
|---|
| | | height: 30%; |
|---|
| | | position: relative; |
|---|
| | | top: -71%; |
|---|
| | | left: 0%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centdv_time input { |
|---|
| | | height: 25px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .btn { |
|---|
| | | text-align: center; |
|---|
| | | width: 100px; |
|---|
| | | height: 29px; |
|---|
| | | /* outline: none; */ |
|---|
| | | border: none; |
|---|
| | | background-color: #5CADFE; |
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="wai"> |
|---|
| | | <div class="wai_zs"> |
|---|
| | | <div id="Histogram1"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram2"></div> |
|---|
| | | </div> |
|---|
| | | <div class="wai_ys"> |
|---|
| | | <div id="Histogram3"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram4"></div> |
|---|
| | | </div> |
|---|
| | | <div class="wai_zx"> |
|---|
| | | <div id="Histogram5"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram6"></div> |
|---|
| | | </div> |
|---|
| | | <div class="wai_yx"> |
|---|
| | | <div id="Histogram7"></div> |
|---|
| | | |
|---|
| | | <div id="Histogram8"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="centdv_time"> |
|---|
| | | <el-date-picker style="float: center;margin-bottom: 0.3%;" |
|---|
| | | v-model="selectDate" |
|---|
| | | type="daterange" |
|---|
| | | range-separator="è³" |
|---|
| | | start-placeholder="å¼å§æ¥æ" |
|---|
| | | end-placeholder="ç»ææ¥æ"> |
|---|
| | | </el-date-picker> |
|---|
| | | |
|---|
| | | <el-button type="primary" icon="el-icon-search" |
|---|
| | | style="float: center;margin-left: 0.2%;margin-bottom: 0.3%;" |
|---|
| | | >æç´¢</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div class="msgtab"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <screen-photo :id="5" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | > |
|---|
| | | </screen-photo> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins: [mixin], |
|---|
| | | data: { |
|---|
| | | storage: null, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } }, |
|---|
| | | axisLabel: { color: '#5CADFE' }, |
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: "value", |
|---|
| | | name: "æ°´è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "#5CADFE", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: true, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "#5CADFE", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "#5CADFE", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'æ°´è', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { color: '#5CADFE' } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | tableHead: [{}], |
|---|
| | | selectDate: '', |
|---|
| | | tableData: [{}], |
|---|
| | | show: true, |
|---|
| | | showGlassType: '', |
|---|
| | | showGlassIndex: 0, |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | loading:true |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=type==0?this.machineElectric:this.machineWater |
|---|
| | | for(let i=0;i<datas.length;i++){ |
|---|
| | | if(type==0){ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+2))); |
|---|
| | | }else{ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('Histogram'+(i*2+1))); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if(type==0){ |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw·h)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | }else{ |
|---|
| | | this.val.yAxis[0].name="æ°´è"; |
|---|
| | | this.val.series[0].name='æ°´è(m³)' |
|---|
| | | this.val.series[0].itemStyle.color='#00ff00' |
|---|
| | | } |
|---|
| | | let danwei=type==0?"(kw·h)":'(m³)' |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | this.val.title.text=datas[i]["0_machine_name"]+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | machineWater(){ |
|---|
| | | if(Object.keys(this.machineWater[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(1) |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±æ¾ç¤ºæ°´åæºå¨è®¢åæ¥è¯¢',sql,flag,"tableHead") |
|---|
| | | await this.getTableData('æ°´å') // 磨边åè§ |
|---|
| | | await this.getMachineElectric('æ°´å','3') |
|---|
| | | await this.getMachineWater('æ°´å','1') |
|---|
| | | this.onmouseMove() |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" |
|---|
| | | pageEncoding="UTF-8"%> |
|---|
| | | <%@page import="builder.Manager"%> |
|---|
| | | <%@page import="ng.db.*"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | |
|---|
| | | <title>ä¸å°çº¿</title> |
|---|
| | | </head> |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-scroll { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-scroll .el-scrollbar__wrap { |
|---|
| | | overflow-x: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-table__header { |
|---|
| | | height: 20%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app1 { |
|---|
| | | width: 60%; |
|---|
| | | position: absolute; |
|---|
| | | left: 2%; |
|---|
| | | top: 3%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #youtu { |
|---|
| | | height: 50%; |
|---|
| | | width: 30%; |
|---|
| | | position: absolute; |
|---|
| | | right: 2%; |
|---|
| | | top: 2%; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 275px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #time { |
|---|
| | | height: 50%; |
|---|
| | | width: 30%; |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #har { |
|---|
| | | width: 99%; |
|---|
| | | position: absolute; |
|---|
| | | height: 2%; |
|---|
| | | top: 53%; |
|---|
| | | background-color: darkgrey; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app2 { |
|---|
| | | width: 96%; |
|---|
| | | height: 36%; |
|---|
| | | position: absolute; |
|---|
| | | left: 2%; |
|---|
| | | top: 62%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .chart-wrap { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #time { |
|---|
| | | width: 50%; |
|---|
| | | height: 5%; |
|---|
| | | position: absolute; |
|---|
| | | left: 2%; |
|---|
| | | top: 35%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #time2 { |
|---|
| | | width: 50%; |
|---|
| | | height: 10%; |
|---|
| | | position: absolute; |
|---|
| | | left: 2%; |
|---|
| | | top: 42%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <div id='app1' style="width: 60%;height:33%;float: right;padding: 0;background-color: white;"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div id='time'> |
|---|
| | | <div style="margin-top: 5%;height: 3%;"> |
|---|
| | | å½åè¿åº¦ï¼<el-progress :text-inside="true" :stroke-width="26" :percentage="ratio"></el-progress> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div id='youtu'> |
|---|
| | | <img class="imgCenter" alt="" :src="tableData[0]['11_route']"> |
|---|
| | | </div> |
|---|
| | | <div id='har'></div> |
|---|
| | | <div id='app2' > |
|---|
| | | <!-- <show-table :tablehead="tableHead2" :tabledata="tableData2"></show-table> --> |
|---|
| | | <div id="chart-wrap0" class="chart-wrap"></div> |
|---|
| | | <div id="chart-wrap1" class="chart-wrap"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="this.machineScreen" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | > |
|---|
| | | </screen-photo> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins: [mixin], |
|---|
| | | data: { |
|---|
| | | storage: null, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'è½è', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgb(180, 180, 180)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | machineLocal:<%= request.getParameter("local")%>, |
|---|
| | | machineScreen:null, |
|---|
| | | |
|---|
| | | tableHead: [{}], |
|---|
| | | selectdate1: '', |
|---|
| | | selectdate2: '', |
|---|
| | | tableData: [{}], |
|---|
| | | show: true, |
|---|
| | | showGlassType: '', |
|---|
| | | showGlassIndex: 0, |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | loading:true, |
|---|
| | | ratio:0 |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=type==0?this.machineElectric:this.machineWater |
|---|
| | | for(let i=0;i<datas.length;i++){ |
|---|
| | | if(i>1){ |
|---|
| | | break |
|---|
| | | } |
|---|
| | | if(type==0){ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('chart-wrap'+i)); |
|---|
| | | }else{ |
|---|
| | | HisArr[i] = this.$echarts.init(document.getElementById('chart-wrap')); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if(type==0){ |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw·h)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | }else{ |
|---|
| | | this.val.yAxis[0].name="æ°´è"; |
|---|
| | | this.val.series[0].name='æ°´è(m³)' |
|---|
| | | this.val.series[0].itemStyle.color='#00ff00' |
|---|
| | | } |
|---|
| | | let danwei=type==0?"(kw·h)":'(m³)' |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | if(i>1){ |
|---|
| | | break |
|---|
| | | } |
|---|
| | | this.val.title.text=datas[i]["0_machine_name"]+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | tableHead(newVal,oldVal){ |
|---|
| | | delete newVal[0]['7_parts_change'] |
|---|
| | | delete newVal[0]['0_machine_name'] |
|---|
| | | |
|---|
| | | newVal[0]['8_ratio']='ç´éç' |
|---|
| | | //newVal[0]['9_work_state']='ç¶æ' |
|---|
| | | }, |
|---|
| | | tableData(){ |
|---|
| | | this.ratio=this.tableData[0]['8_ratio']*1 |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±ä¸å°è¡¨å¤´æ¥è¯¢',sql,flag,"tableHead") |
|---|
| | | await this.getTableData('ä¸å°') // ä¸å° |
|---|
| | | await this.getMachineElectric('ä¸å°','5') |
|---|
| | | this.onmouseMove() |
|---|
| | | |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | switch (this.machineLocal) { |
|---|
| | | case 0: |
|---|
| | | this.machineScreen=8 |
|---|
| | | break; |
|---|
| | | case 1: |
|---|
| | | this.machineScreen=8 |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%> |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <title>è´´èå°ç»</title> |
|---|
| | | |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | | |
|---|
| | | body { |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | } |
|---|
| | | #divhead{ |
|---|
| | | float: left; |
|---|
| | | margin-top: 3%; |
|---|
| | | width: 98%; |
|---|
| | | margin-left: 1%; |
|---|
| | | } |
|---|
| | | #divBody{ |
|---|
| | | margin-top: 4%; |
|---|
| | | float: left; |
|---|
| | | width: 100%; |
|---|
| | | height: 60%; |
|---|
| | | } |
|---|
| | | #orderData{ |
|---|
| | | float: left; |
|---|
| | | height: 98%; |
|---|
| | | width: 55%; |
|---|
| | | background-color: blanchedalmond; |
|---|
| | | } |
|---|
| | | #chart-wrap{ |
|---|
| | | float: left; |
|---|
| | | margin-left: 0; |
|---|
| | | height: 98%; |
|---|
| | | width: 44%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white" style="height: 99%;"> |
|---|
| | | <div v-show="this.global.pollingIndex==0" id="mains"> |
|---|
| | | <h3>è´´èå°ç»</h3> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id="divhead"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | <div id="divBody"> |
|---|
| | | <div id="orderData"> |
|---|
| | | <screen-order :tablehead="orderHead" :tabledata="orderData"></screen-order> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="chart-wrap"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="13" :intime="this.global.timer" v-show="this.global.pollingIndex==1"></screen-photo> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableHead: [{}], |
|---|
| | | tableData: [{}], |
|---|
| | | machineElectric:[{}], |
|---|
| | | machineWater:[{}], |
|---|
| | | orderHead:[{}], |
|---|
| | | orderData:[{}], |
|---|
| | | loading:true, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'çµè', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgb(180, 180, 180)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=this.machineElectric |
|---|
| | | HisArr[0] = this.$echarts.init(document.getElementById('chart-wrap')); |
|---|
| | | |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw·h)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | danwei="(kw·h)" |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | this.val.title.text=this.machineElectric[i]["0_machine_name"]+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±æ¾ç¤ºæºå¨è¡¨å¤´',sql,flag,"tableHead") |
|---|
| | | sql="{call AXJ_a_largeScreen_orderRatio_tableHead_select()}" |
|---|
| | | await this.loadAjxss('è´´èæ£æµä»¥åé¢å大å±æ¯ä¾è¡¨å¤´',sql,flag,"orderHead") |
|---|
| | | await this.getTableData('è´´è') // 磨边åè§ |
|---|
| | | await this.getMachineElectric('è´´è','6') |
|---|
| | | let timer1=await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_orderRatio_tableData_select()}" |
|---|
| | | this.interValLoadAjxs('è´´è以åé¢å大å±æ¯ä¾æ°æ®',sql,flag,"orderData",timer1) |
|---|
| | | },5000) |
|---|
| | | this.onmouseMove() |
|---|
| | | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> |
|---|
| | | <%@page import="builder.Manager" %> |
|---|
| | | <%@page import="ng.db.*" %> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | |
|---|
| | | <title>ççµæ£æµ</title> |
|---|
| | | </head> |
|---|
| | | <style> |
|---|
| | | *{ |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | body { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-scroll { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-scroll .el-scrollbar__wrap { |
|---|
| | | overflow-x: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-table__header { |
|---|
| | | height: 20%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app1 { |
|---|
| | | width: 60%; |
|---|
| | | position: absolute; |
|---|
| | | left: 2%; |
|---|
| | | top: 3%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #chart-wrap { |
|---|
| | | height: 40%; |
|---|
| | | width: 30%; |
|---|
| | | position: absolute; |
|---|
| | | right: 2%; |
|---|
| | | top: 2%; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 275px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #har { |
|---|
| | | width: 99%; |
|---|
| | | position: absolute; |
|---|
| | | height: 2%; |
|---|
| | | top: 43%; |
|---|
| | | background-color: darkgrey; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #picture1 { |
|---|
| | | width: 50%; |
|---|
| | | position: absolute; |
|---|
| | | height:100%; |
|---|
| | | |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #picture2 { |
|---|
| | | width: 50%; |
|---|
| | | height:100%; |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | #pictue{ |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | width: 99%; |
|---|
| | | height:48vh; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | img{ |
|---|
| | | max-width: 100%; |
|---|
| | | max-height: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <parts-change></parts-change> |
|---|
| | | <div id='app1' style="width: 60%;height:30%;float: right;padding: 0;background-color: white;"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData1"></show-table> |
|---|
| | | </div> |
|---|
| | | <div id='chart-wrap'> |
|---|
| | | </div> |
|---|
| | | <div id='har'></div> |
|---|
| | | <div id="pictue"> |
|---|
| | | <div id='picture1' > |
|---|
| | | <img class="imgCenter" style="float: right;" :src="pictures[0]" alt=""> |
|---|
| | | </div> |
|---|
| | | <div id="picture2" style="float:right"> |
|---|
| | | <img class="imgCenter" style="float: left;" :src="pictures[1]" alt=""> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <screen-photo :id="this.machineScreen" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1 " |
|---|
| | | > |
|---|
| | | </screen-photo> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins: [mixin], |
|---|
| | | data: { |
|---|
| | | storage: null, |
|---|
| | | val:{ |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|---|
| | | axisLine: { lineStyle: { color: '#5CADFE' } }, |
|---|
| | | axisLabel: { color: '#5CADFE' }, |
|---|
| | | splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: "value", |
|---|
| | | name: "æ°´è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "#5CADFE", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: true, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "#5CADFE", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "#5CADFE", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'æ°´è', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [10, 52, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { color: '#5CADFE' } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | |
|---|
| | | tableHead: [{}], |
|---|
| | | selectdate1: '', |
|---|
| | | selectdate2: '', |
|---|
| | | tableData: [{}], |
|---|
| | | tableData1:[{}], |
|---|
| | | tableHead2: [{}], |
|---|
| | | tableData2: [{}], |
|---|
| | | show: true, |
|---|
| | | showGlassType: '', |
|---|
| | | showGlassIndex: 0, |
|---|
| | | machineLocal:<%= request.getParameter("local")%>, |
|---|
| | | machineScreen:null, |
|---|
| | | machineElectric:[{}], |
|---|
| | | loading:true, |
|---|
| | | machineIp:null, |
|---|
| | | picture:[{}], |
|---|
| | | pictures:['',''], |
|---|
| | | getPhoto:null |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=this.machineElectric |
|---|
| | | datas=[datas[this.machineLocal]] |
|---|
| | | HisArr[0] = this.$echarts.init(document.getElementById('chart-wrap')); |
|---|
| | | |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | danwei="(kw)" |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | this.val.title.text=datas[i]["0_machine_name"]+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | tableData(newdate,olddate){ |
|---|
| | | this.tableData1=[this.tableData[this.machineLocal]] |
|---|
| | | }, |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | picture(newval){ |
|---|
| | | this.pictures[0]=newval[0]['A0'] |
|---|
| | | this.pictures[1]=newval[0]['A1'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | sql="{call AXJ_a_largeScreen_order_tableHead_select()}" |
|---|
| | | await this.loadAjxss('大å±æ¾ç¤ºæºå¨è¡¨å¤´æ¥è¯¢',sql,flag,"tableHead") |
|---|
| | | await this.getTableData('ççµæ£æµ') |
|---|
| | | await this.getMachineElectric('ççµæ£æµ','4') |
|---|
| | | |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("ip",this.machineIp); |
|---|
| | | this.getPhoto = await setInterval(()=>{ |
|---|
| | | this.$http.post( '../mysqlInsert/getPicture.jsp',param) |
|---|
| | | .then(function (response) { |
|---|
| | | app.$data.picture= response.data |
|---|
| | | }).catch(function (error) { |
|---|
| | | clearInterval(this.getPhoto); |
|---|
| | | //alert('Error: ' + "æåå¾çåçé误,请å
³éçé¢éæ°æå¼ï¼"); |
|---|
| | | |
|---|
| | | }); |
|---|
| | | },30000) |
|---|
| | | |
|---|
| | | |
|---|
| | | this.onmouseMove() |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | switch (this.machineLocal) { |
|---|
| | | case 0: |
|---|
| | | this.machineScreen=7*1 |
|---|
| | | this.machineIp="192.168.10.196" |
|---|
| | | break; |
|---|
| | | case 1: |
|---|
| | | this.machineScreen=10*1 |
|---|
| | | this.machineIp="192.168.20.51" |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | this.machineScreen=12*1 |
|---|
| | | this.machineIp="192.168.20.107" |
|---|
| | | break; |
|---|
| | | // |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|---|
| | | <meta http-equiv="expires" content="0"> |
|---|
| | | <meta http-equiv="pragma" content="no-cache"> |
|---|
| | | <meta http-equiv="cache-control" content="no-cache"> |
|---|
| | | <title>ä¸çå å</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | </head> |
|---|
| | | <style> |
|---|
| | | * { |
|---|
| | | margin: 0px; |
|---|
| | | padding: 0px; |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | body, |
|---|
| | | html { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #wai { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | position: relative; |
|---|
| | | margin: 0px; |
|---|
| | | padding: 0px; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #wai_shang { |
|---|
| | | width: 100%; |
|---|
| | | height: 48%; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #wai_xia { |
|---|
| | | width: 100%; |
|---|
| | | height: 50%; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: nowrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .shang_zuo { |
|---|
| | | height: 100%; |
|---|
| | | width: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .shang_you { |
|---|
| | | height: 100%; |
|---|
| | | width: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centdv_time { |
|---|
| | | width: 70%; |
|---|
| | | height: 10%; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centdv_time input { |
|---|
| | | height: 25px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .btn { |
|---|
| | | text-align: center; |
|---|
| | | width: 100px; |
|---|
| | | height: 29px; |
|---|
| | | /* outline: none; */ |
|---|
| | | border: none; |
|---|
| | | background-color: #5CADFE; |
|---|
| | | box-shadow: 15 8px 16px 15 rgba(0, 0, 0, 0), 15 6px 5px 15 rgba(0, 0, 0, 0.19); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .msgtab { |
|---|
| | | width: 99%; |
|---|
| | | height: 90%; |
|---|
| | | /* border: 1px solid white; */ |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .msgtab1 { |
|---|
| | | width: 99%; |
|---|
| | | height: 88%; |
|---|
| | | /* border: 1px solid white; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .xia_zuo { |
|---|
| | | height: 100%; |
|---|
| | | width: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .xia_you { |
|---|
| | | height: 100%; |
|---|
| | | width: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #chart-wrap { |
|---|
| | | width: 90%; |
|---|
| | | height: 80%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | color: black; |
|---|
| | | height: 10%; |
|---|
| | | font-size: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centdv_time { |
|---|
| | | font-size: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #tuopan { |
|---|
| | | width: 80%; |
|---|
| | | height: 90%; |
|---|
| | | background-color: #696969; |
|---|
| | | border-radius: 25px 25px 0 0; |
|---|
| | | margin: 0 auto; |
|---|
| | | transform: rotate(180deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | #tuopan_jindu { |
|---|
| | | border-radius: 0 0 25px 25px; |
|---|
| | | width: 100%; |
|---|
| | | /* height: 75%; */ |
|---|
| | | background-color: #5CADFE; |
|---|
| | | transform: rotate(180deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .xptile { |
|---|
| | | height: 10%; |
|---|
| | | font-size: 18px; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .jindu { |
|---|
| | | color: black; |
|---|
| | | width: 100px; |
|---|
| | | height: 5%; |
|---|
| | | font-size: 18px; |
|---|
| | | position: relative; |
|---|
| | | top: -55%; |
|---|
| | | left: 36% |
|---|
| | | } |
|---|
| | | |
|---|
| | | #jindu_zhi { |
|---|
| | | border: none; |
|---|
| | | background-color: transparent; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 18px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white"> |
|---|
| | | <div id="mains" v-show="this.global.pollingIndex==0"> |
|---|
| | | <div id="wai"> |
|---|
| | | <div id="wai_shang"> |
|---|
| | | <div class="shang_zuo"> |
|---|
| | | <div class="title"> |
|---|
| | | å½åç产信æ¯ï¼ |
|---|
| | | |
|---|
| | | çå¾
æçæ°ï¼ |
|---|
| | | |
|---|
| | | å·²å®å·¥æçæ°ï¼ |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="msgtab"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="shang_you"> |
|---|
| | | <div class="centdv_time"> |
|---|
| | | <el-date-picker style="float: left;margin-bottom: 0.3%;" |
|---|
| | | v-model="selectDate" |
|---|
| | | type="daterange" |
|---|
| | | value-format="yyyy-MM-dd" |
|---|
| | | range-separator="è³" |
|---|
| | | start-placeholder="å¼å§æ¥æ" |
|---|
| | | end-placeholder="ç»ææ¥æ"> |
|---|
| | | </el-date-picker> |
|---|
| | | |
|---|
| | | <el-button type="primary" icon="el-icon-search" |
|---|
| | | style="float: left;margin-left: 0.2%;margin-bottom: 0.3%;" |
|---|
| | | @click="selectSub()" |
|---|
| | | >åå²è®¢åæç´¢</el-button> |
|---|
| | | </div> |
|---|
| | | <div class="msgtab1"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableDatas"></show-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div id="wai_xia"> |
|---|
| | | <div class="xia_zuo"> |
|---|
| | | <div id="chart-wrap"></div> |
|---|
| | | </div> |
|---|
| | | <div class="xia_you"> |
|---|
| | | |
|---|
| | | <div id="tuopan"> |
|---|
| | | <div id="tuopan_jindu"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="xptile">å½åä¸çè¿åº¦{{bar}}%</div> |
|---|
| | | <div class="jindu"><input type="text" id="jindu_zhi" :value="GlassNum+'/'+150"></div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <screen-photo :id="14" :intime="this.global.timer" |
|---|
| | | v-show="this.global.pollingIndex==1" |
|---|
| | | > |
|---|
| | | </screen-photo> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | let app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins: [mixin], |
|---|
| | | data: { |
|---|
| | | storage: null, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'çµè', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgb(180, 180, 180)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | tableHead: [{ |
|---|
| | | 0:'订åå·', 1:'产åä¿¡æ¯', 2:'å·²å å·¥æ°', 3:'å¾
å å·¥æ°', 4:'ç ´ææ°' |
|---|
| | | }], |
|---|
| | | selectDate:['',''], |
|---|
| | | tableData: [{}], |
|---|
| | | tableDatas: [{}], |
|---|
| | | show: true, |
|---|
| | | showGlassType: '', |
|---|
| | | showGlassIndex: 0, |
|---|
| | | gao: 50, |
|---|
| | | machineElectric:[{}], |
|---|
| | | getGlassNum:null, |
|---|
| | | GlassNum:null, |
|---|
| | | bar:null, |
|---|
| | | loading:true |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | echarsInit(type) { |
|---|
| | | let HisArr=[] |
|---|
| | | let datas=this.machineElectric |
|---|
| | | HisArr[0] = this.$echarts.init(document.getElementById('chart-wrap')); |
|---|
| | | |
|---|
| | | this.val.yAxis[0].name="çµè"; |
|---|
| | | this.val.series[0].name='çµè(kw)' |
|---|
| | | this.val.series[0].itemStyle.color='rgb(84,112,198)' |
|---|
| | | danwei="(kw)" |
|---|
| | | |
|---|
| | | for(let i in datas){ |
|---|
| | | this.val.title.text=this.machineElectric[i]["0_machine_name"]+danwei |
|---|
| | | this.val.xAxis[0].data=datas[i]["6_shijian"].split(','); |
|---|
| | | this.val.series[0].data=datas[i]["5_jiqidianliang"].split(','); |
|---|
| | | HisArr[i].setOption(this.val); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | jindu () { |
|---|
| | | let myDiv = document.getElementById("tuopan_jindu"); |
|---|
| | | myDiv.style.height = this.bar+"%"; |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | selectSub(){ |
|---|
| | | let arrObj={ |
|---|
| | | type:1, |
|---|
| | | stateData:this.selectDate[0], |
|---|
| | | endeData:this.selectDate[1] |
|---|
| | | } |
|---|
| | | sql="{call AXJ_a_largeScreen_batchOffData_select(?,?,?,?)}~"+JSON.stringify(arrObj) |
|---|
| | | this.loadAjxss('ä¸ç订ååæ°',sql,2,"tableDatas") |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | machineElectric(){ |
|---|
| | | if(Object.keys(this.machineElectric[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | //this.echarsInit(0) |
|---|
| | | this.loading=false |
|---|
| | | }, |
|---|
| | | getGlassNum(newval){ |
|---|
| | | this.GlassNum=newval[0]['0_content_value']%150 |
|---|
| | | this.bar=parseInt(parseInt(this.GlassNum/150*100)) |
|---|
| | | this.jindu() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted () { |
|---|
| | | let sql="" |
|---|
| | | let flag=2 |
|---|
| | | sql="{call AXJ_a_largeScreen_batchOffHead_select()}" |
|---|
| | | await this.loadAjxss('ä¸çå å订å',sql,flag,"tableHead") |
|---|
| | | await this.getMachineElectric('ä¸ç',7) |
|---|
| | | //this.jindu(); |
|---|
| | | |
|---|
| | | let timer1=await setInterval(()=>{ |
|---|
| | | let arrObj={ |
|---|
| | | type:0, |
|---|
| | | stateData:'', |
|---|
| | | endeData:'' |
|---|
| | | } |
|---|
| | | sql="{call AXJ_a_largeScreen_batchOffData_select(?,?,?,?)}~"+JSON.stringify(arrObj) |
|---|
| | | this.interValLoadAjxs('ä¸ç订ååæ°',sql,flag,"tableData",timer1) |
|---|
| | | },5000) |
|---|
| | | let arrObj={ |
|---|
| | | type:1, |
|---|
| | | stateData:'', |
|---|
| | | endeData:'' |
|---|
| | | } |
|---|
| | | sql="{call AXJ_a_largeScreen_batchOffData_select(?,?,?,?)}~"+JSON.stringify(arrObj) |
|---|
| | | this.loadAjxss('ä¸ç订ååæ°',sql,flag,"tableDatas") |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_batchOffHandNum_select()}" |
|---|
| | | this.loadAjxss() |
|---|
| | | |
|---|
| | | let timer2=await setInterval(()=>{ |
|---|
| | | sql="{call AXJ_a_largeScreen_batchOffHandNum_select()}" |
|---|
| | | this.interValLoadAjxs('ä¸çæºæ¢°ææ°é',sql,flag,"getGlassNum",timer2) |
|---|
| | | },5000) |
|---|
| | | this.onmouseMove() |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | Vue.component('show-table', { |
|---|
| | | // 声æ props |
|---|
| | | props: ['tablehead','tabledata'], |
|---|
| | | // åæ ·ä¹å¯ä»¥å¨ vm å®ä¾ä¸å "this.message" è¿æ ·ä½¿ç¨ |
|---|
| | | template: `<el-table |
|---|
| | | :data="tabledata" |
|---|
| | | height="100%" |
|---|
| | | style="width: 100%"> |
|---|
| | | <el-table-column |
|---|
| | | v-if='index!=4' |
|---|
| | | v-for="(item,keys,index) in tablehead[0]" |
|---|
| | | :key="index" |
|---|
| | | :label="item" |
|---|
| | | :prop="keys.toString()" |
|---|
| | | > |
|---|
| | | <template v-slot="scope" v-if=" keys=='6_parts_change' "> |
|---|
| | | <el-button |
|---|
| | | :style="tabledata[scope.$index]['6_parts_change']==1?textColor:null" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | @click='openParts(scope.$index,tabledata)' |
|---|
| | | > |
|---|
| | | æ´æ¢ |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | </el-table>` |
|---|
| | | , |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | textColor:{ |
|---|
| | | color:'orange' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | methods:{ |
|---|
| | | openParts(index,machineData){ |
|---|
| | | this.$parent.$emit('dialogvisible', |
|---|
| | | { |
|---|
| | | 'show':true, |
|---|
| | | 'machineid':machineData[index]['10_id'] |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | Vue.component('parts-change', { |
|---|
| | | // 声æ props |
|---|
| | | props: ['machine'], |
|---|
| | | // åæ ·ä¹å¯ä»¥å¨ vm å®ä¾ä¸å "this.message" è¿æ ·ä½¿ç¨ |
|---|
| | | template: `<el-dialog |
|---|
| | | title="æ´æ¢è®¾å¤é¶é¨ä»¶å表" |
|---|
| | | :visible.sync="centerDialogVisible" |
|---|
| | | width="55%" |
|---|
| | | center |
|---|
| | | > |
|---|
| | | <el-table :data="machineChange" width="100%" height='100%'> |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item,keys,index) in machineChangeHead[0]" |
|---|
| | | :prop="keys" |
|---|
| | | :label="item" |
|---|
| | | |
|---|
| | | > |
|---|
| | | <template v-slot="scope" v-if="keys=='5_surpass' && Object.keys(machineChange[0]).length!=0"> |
|---|
| | | <el-button |
|---|
| | | :style="machineChange[scope.$index]['5_surpass']==1?textColor:null" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | v-preventreclick |
|---|
| | | @click="partsChange(scope.$index, machineChange,0)" |
|---|
| | | > |
|---|
| | | æ´æ¢ |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <span slot="footer" class="dialog-footer"> |
|---|
| | | <el-button @click="centerDialogVisible = false">å æ¶</el-button> |
|---|
| | | <el-button type="primary" v-if="Object.keys(machineChange[0]).length!=0" v-preventreclick @click="partsChange(0,0,1)">ä¸é®æ´æ¢</el-button> |
|---|
| | | </span> |
|---|
| | | </el-dialog>` |
|---|
| | | , |
|---|
| | | mixins: [mixin], |
|---|
| | | data(){ |
|---|
| | | return{ |
|---|
| | | centerDialogVisible:false, |
|---|
| | | machineChange:[{}], |
|---|
| | | machineChangeHead:[{}], |
|---|
| | | machineId:null, |
|---|
| | | textColor:{ |
|---|
| | | color:'orange' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | partsChange(index,data,type){//ä¿®æ¹é¶é¨ä»¶æ´æ¢å¨æï¼typeï¼ 0代表å个é¶é¨ä»¶ï¼1代表æ¤æºå¨ææé¶é¨ä»¶ |
|---|
| | | |
|---|
| | | let para |
|---|
| | | if(type==0){ |
|---|
| | | para={ |
|---|
| | | id:data[index]['7_id'], |
|---|
| | | machineId:data[index]['6_machine_id'], |
|---|
| | | type:type |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | para={ |
|---|
| | | id:0, |
|---|
| | | machineId:this.machineId, |
|---|
| | | type:type |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_largeScreen_machinePartsChange_update(?,?,?,?)}~"+JSON.stringify(para); |
|---|
| | | this.connects("æ´æ°èæï¼",sql,1,1); |
|---|
| | | this.centerDialogVisible = false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | async machineId(){ |
|---|
| | | let machine={ |
|---|
| | | id:this.machineId |
|---|
| | | } |
|---|
| | | let canshu={ |
|---|
| | | gongneng:'大å±æ´æ¢å¨ææºå¨é¶é¨ä»¶æ¥è¯¢ï¼æºå¨å·ï¼'+this.machineId, |
|---|
| | | sql:"{call AXJ_a_largeScreen_machinePartsChange_select(?,?)}~"+JSON.stringify(machine), |
|---|
| | | flag:2, |
|---|
| | | vals:"machineChange" |
|---|
| | | } |
|---|
| | | this.machineChange=await this.returnloadAjxss(canshu) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let parameter={ |
|---|
| | | gongneng:'大å±æ´æ¢å¨æ表头æ¥è¯¢', |
|---|
| | | sql:"{call AXJ_a_largeScreen_machinePartsChangeHead_select()}", |
|---|
| | | flag:2, |
|---|
| | | vals:"machineChangeHead" |
|---|
| | | } |
|---|
| | | this.machineChangeHead=await this.returnloadAjxss(parameter) |
|---|
| | | |
|---|
| | | this.$parent.$on("dialogvisible",val=>{ |
|---|
| | | //è¿æ¯äºä»¶å½æ° ä¸æ¦changeBgcäºä»¶è¢«è§¦å,å°±ä¼æ§è¡è¿éç代ç |
|---|
| | | this.centerDialogVisible = val.show |
|---|
| | | this.machineId=val.machineid |
|---|
| | | |
|---|
| | | |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | Vue.component('screen-order', {//é¢åè´´èä¸ç订åç»ä»¶ |
|---|
| | | // 声æ props |
|---|
| | | props: ['tablehead','tabledata'], |
|---|
| | | // åæ ·ä¹å¯ä»¥å¨ vm å®ä¾ä¸å "this.message" è¿æ ·ä½¿ç¨ |
|---|
| | | template: `<el-table |
|---|
| | | :data="tabledata" |
|---|
| | | height="100%" |
|---|
| | | style="width: 100%"> |
|---|
| | | <el-table-column |
|---|
| | | |
|---|
| | | v-for="(item,keys,index) in tablehead[0]" |
|---|
| | | :key="index" |
|---|
| | | :label="item" |
|---|
| | | :prop="keys.toString()" |
|---|
| | | > |
|---|
| | | <template v-slot="scope" v-if=" keys=='3_ratio' && Object.keys(tabledata[0]).length!=0"> |
|---|
| | | <el-progress :text-inside="true" :stroke-width="26" |
|---|
| | | :percentage="tabledata[scope.$index]['3_ratio']==null?0*1:tabledata[scope.$index]['3_ratio']*1" |
|---|
| | | > |
|---|
| | | </el-progress> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | </el-table>` |
|---|
| | | |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | Vue.component('screen-photo', {//ç°åºä½ä¸å¾è½®æ¢ |
|---|
| | | // 声æ props |
|---|
| | | props: ['id','intime'], |
|---|
| | | // åæ ·ä¹å¯ä»¥å¨ vm å®ä¾ä¸å "this.message" è¿æ ·ä½¿ç¨ |
|---|
| | | template: `<div style='width:100%;height:100%;max-width=100%;max-height=100%;position: relative;'> |
|---|
| | | <img class="imgCenter" :src="url"/> |
|---|
| | | </div>`, |
|---|
| | | mixins: [mixin], |
|---|
| | | data(){ |
|---|
| | | return{ |
|---|
| | | photoList:[{}], |
|---|
| | | indexs:-1, |
|---|
| | | url:null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | photoList(newVal){ |
|---|
| | | if(Object.keys(this.photoList[0]).length==0){ |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.url=newVal[0]['0_route'] |
|---|
| | | setInterval(()=>{ |
|---|
| | | |
|---|
| | | this.indexs>=newVal.length-1?this.indexs=0:this.indexs++ |
|---|
| | | this.url=newVal[this.indexs]['0_route'] |
|---|
| | | },parseInt(this.intime/newVal.length)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let para={ |
|---|
| | | id:this.id |
|---|
| | | } |
|---|
| | | let canshu={ |
|---|
| | | gongneng:'ç»ä»¶å¾çæ¥è¯¢ï¼', |
|---|
| | | sql:"{call AXJ_a_largeScreen_phtot_select(?,?)}~"+JSON.stringify(para), |
|---|
| | | flag:2, |
|---|
| | | vals:"photoList" |
|---|
| | | } |
|---|
| | | this.photoList=await this.returnloadAjxss(canshu) |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | Vue.component('parts-change-all', { |
|---|
| | | // 声æ props |
|---|
| | | props: ['machinetype'], |
|---|
| | | // åæ ·ä¹å¯ä»¥å¨ vm å®ä¾ä¸å "this.message" è¿æ ·ä½¿ç¨ |
|---|
| | | template: ` |
|---|
| | | <el-table :data="machineChange" width="100%" height='100%'> |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item,keys,index) in machineChangeHead[0]" |
|---|
| | | :prop="keys" |
|---|
| | | :label="item" |
|---|
| | | |
|---|
| | | > |
|---|
| | | <template v-slot="scope" v-if="keys=='5_surpass' && Object.keys(machineChange[0]).length!=0"> |
|---|
| | | <el-button |
|---|
| | | :style="machineChange[scope.$index]['5_surpass']==1?textColor:null" |
|---|
| | | type="text" |
|---|
| | | size="small" |
|---|
| | | v-preventreclick |
|---|
| | | @click="partsChange(scope.$index, machineChange,0)" |
|---|
| | | > |
|---|
| | | æ´æ¢ |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table>` |
|---|
| | | , |
|---|
| | | mixins: [mixin], |
|---|
| | | data(){ |
|---|
| | | return{ |
|---|
| | | centerDialogVisible:true, |
|---|
| | | machineChange:[{}], |
|---|
| | | machineChangeHead:[{}], |
|---|
| | | machineId:null, |
|---|
| | | textColor:{ |
|---|
| | | color:'orange' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | partsChange(index,data,type){//ä¿®æ¹é¶é¨ä»¶æ´æ¢å¨æï¼typeï¼ 0代表å个é¶é¨ä»¶ï¼1代表æ¤æºå¨ææé¶é¨ä»¶ |
|---|
| | | |
|---|
| | | let para |
|---|
| | | if(type==0){ |
|---|
| | | para={ |
|---|
| | | id:data[index]['7_id'], |
|---|
| | | machineId:data[index]['6_machine_id'], |
|---|
| | | type:type |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | para={ |
|---|
| | | id:0, |
|---|
| | | machineId:this.machineId, |
|---|
| | | type:type |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_largeScreen_machinePartsChange_update(?,?,?,?)}~"+JSON.stringify(para); |
|---|
| | | this.connects("æ´æ°èæï¼",sql,1,1); |
|---|
| | | this.centerDialogVisible = false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | async machineId(){ |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let parameter={ |
|---|
| | | gongneng:'大å±æ´æ¢å¨æ表头æ¥è¯¢', |
|---|
| | | sql:"{call AXJ_a_largeScreen_machinePartsChangeHead_select()}", |
|---|
| | | flag:2, |
|---|
| | | vals:"machineChangeHead" |
|---|
| | | } |
|---|
| | | this.machineChangeHead=await this.returnloadAjxss(parameter) |
|---|
| | | |
|---|
| | | let machine={ |
|---|
| | | type:this.machinetype |
|---|
| | | } |
|---|
| | | let canshu={ |
|---|
| | | gongneng:'大å±æ´æ¢å¨ææºå¨é¶é¨ä»¶æ¥è¯¢ï¼æºå¨ç±»åï¼'+this.machinetype, |
|---|
| | | sql:"{call AXJ_a_largeScreen_machinePartsChange_type_select(?,?)}~"+JSON.stringify(machine), |
|---|
| | | flag:2, |
|---|
| | | vals:"machineChange" |
|---|
| | | } |
|---|
| | | //this.machineChange= |
|---|
| | | await setInterval(async () => { |
|---|
| | | this.machineChange= await app.returnloadAjxss(canshu); |
|---|
| | | },5000) |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| New file |
| | |
|---|
| | | Vue.prototype.global={ |
|---|
| | | polling:null, |
|---|
| | | pollingIndex:0, |
|---|
| | | timer:5000,//触åå®æ¶å¨æ¶é´ |
|---|
| | | errorFlag:0, |
|---|
| | | val: { |
|---|
| | | title:{ |
|---|
| | | text:'', |
|---|
| | | left:'center' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: 'rgb(30, 144, 255)' |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgb(30, 144, 255)', |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | type: "value", |
|---|
| | | name: "è½è", |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | padding: [0, 0, 0, -30], //nameæåä½ç½® å¯¹åº ä¸å³ä¸å·¦ |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | // ç½æ ¼çº¿ |
|---|
| | | show: false, |
|---|
| | | lineStyle: { //åå²çº¿ |
|---|
| | | color: "rgb(180, 180, 180)", |
|---|
| | | width: 1, |
|---|
| | | type: "dashed" //dottedï¼è线 solid:å®çº¿ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | // è½´æå |
|---|
| | | color: "rgb(30, 144, 255)", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | series: [{ |
|---|
| | | name: 'çµè', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '80%', |
|---|
| | | data: [220, 152, 200, 334, 390, 330, 220], |
|---|
| | | itemStyle: { |
|---|
| | | color: 'rgb(180, 180, 180)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | // getMachineElectricTimer:null, |
|---|
| | | // getTableDataTimer:null, |
|---|
| | | // getMachineWaterTimer:null, |
|---|
| | | |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | with(document){ |
|---|
| | | write('<link rel="shortcut icon" href="../img/3.ico" />'); |
|---|
| | | write('<link rel="stylesheet" href="../js/static/css/element.css">'); |
|---|
| | | write('<link rel="stylesheet" href="../js/static/css/style.css">'); |
|---|
| | | |
|---|
| | | write('<script src="../js/static/js/vue.js"></script>'); |
|---|
| | | write('<script src="../js/global.js"></script>'); |
|---|
| | | write('<script src="../js/jquery-3.4.1.min.js"></script>'); |
|---|
| | | write('<script src="../js/axios.min.js"></script>'); |
|---|
| | | |
|---|
| | | |
|---|
| | | write('<script src="../js/mixins.js"></script>'); |
|---|
| | | |
|---|
| | | write('<script src="../js/components.js"></script>'); |
|---|
| | | write('<script src="../js/static/js/element.js"></script>'); |
|---|
| | | write('<script src="../js/static/js/echarts.min.js"></script>'); |
|---|
| | | write('<script >Vue.prototype.$echarts = echarts;Vue.prototype.$http= axios</script>'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| New file |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | let str = window.location.href.substr(window.location.href.indexOf('?') + 1) |
|---|
| | | let json = new Object() |
|---|
| | | const arr = str.split('&') |
|---|
| | | for(let i = 0; i < arr.length; i++) { |
|---|
| | | let item = arr[i].split('=') |
|---|
| | | json[item[0]] = item[1] |
|---|
| | | } |
|---|
| | | |
|---|
| | | var mixin={ |
|---|
| | | methods:{ |
|---|
| | | onmouseMove(){//å±å¹é¼ æ 移å¨å¾ªç¯ææ¾ |
|---|
| | | clearInterval(this.global.polling); |
|---|
| | | |
|---|
| | | this.global.polling=setInterval(()=>{ |
|---|
| | | |
|---|
| | | this.global.pollingIndex>=1?this.global.pollingIndex=0:this.global.pollingIndex++ |
|---|
| | | this.$forceUpdate(); |
|---|
| | | },this.global.timer)//æ ¹æ®èªå®ä¹Vueå
¨å±åéè¿è¡æä½ |
|---|
| | | }, |
|---|
| | | onmouseMove2(){//å±å¹é¼ æ 移å¨å¾ªç¯ææ¾ |
|---|
| | | clearInterval(this.global.polling); |
|---|
| | | this.global.polling=setInterval(()=>{ |
|---|
| | | this.global.pollingIndex>=2?this.global.pollingIndex=0:this.global.pollingIndex++ |
|---|
| | | this.$forceUpdate(); |
|---|
| | | },this.global.timer)//æ ¹æ®èªå®ä¹Vueå
¨å±åéè¿è¡æä½ |
|---|
| | | }, |
|---|
| | | async connects(gongneng,sql,flag,num){ |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("gongneng",gongneng); |
|---|
| | | param.append("sql",sql); |
|---|
| | | param.append("flag",flag); |
|---|
| | | param.append("anquanma","anquanma1"); |
|---|
| | | |
|---|
| | | await this.$http.post( '../mysqlInsert/mysql.jsp',param) |
|---|
| | | .then(function (response) { |
|---|
| | | if(num==1){ |
|---|
| | | result=response.data; |
|---|
| | | index = result.indexOf("[["); |
|---|
| | | if(index>-1){ |
|---|
| | | if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | }else{ |
|---|
| | | result=result.substring(index).trim() |
|---|
| | | alert(result); |
|---|
| | | window.location.reload(); |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | alert(gongneng+"æåï¼") |
|---|
| | | window.location.reload(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(function (error) { |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼"); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | async loadAjxss(gongneng,sql,flag,vals){ |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("yemian","123"); |
|---|
| | | param.append("gongneng",gongneng); |
|---|
| | | param.append("sql",sql); |
|---|
| | | param.append("flag",flag); |
|---|
| | | param.append("anquanma","anquanma1"); |
|---|
| | | await this.$http.post( '../mysqlInsert/mysql.jsp',param) |
|---|
| | | .then(function (response) { |
|---|
| | | if(flag==2){ |
|---|
| | | let result=response.data; |
|---|
| | | let index = result.indexOf("[{"); |
|---|
| | | if(index>-1){ |
|---|
| | | result=result.substring(index).trim(); |
|---|
| | | app.$data[vals]=JSON.parse(result); |
|---|
| | | console.log(vals+":"); |
|---|
| | | console.log(app.$data[vals]); |
|---|
| | | }else if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(function (error) { |
|---|
| | | if(this.global.errorFlag==0){ |
|---|
| | | this.global.errorFlag=1 |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼") |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | async returnloadAjxss(parameter){//fa |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("yemian","123"); |
|---|
| | | param.append("gongneng",parameter.gongneng); |
|---|
| | | param.append("sql",parameter.sql); |
|---|
| | | param.append("flag",parameter.flag); |
|---|
| | | param.append("anquanma","anquanma1"); |
|---|
| | | |
|---|
| | | let results='' |
|---|
| | | await this.$http.post( '../mysqlInsert/mysql.jsp',param) |
|---|
| | | .then(function (response) { |
|---|
| | | let result=response.data; |
|---|
| | | let index = result.indexOf("[{"); |
|---|
| | | if(index>-1){ |
|---|
| | | result=result.substring(index).trim(); |
|---|
| | | results=JSON.parse(result); |
|---|
| | | console.log(parameter.vals+":"); |
|---|
| | | console.log(results); |
|---|
| | | }else if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(function (error) { |
|---|
| | | if(this.global.errorFlag==0){ |
|---|
| | | this.global.errorFlag=1 |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼") |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | return results |
|---|
| | | }, |
|---|
| | | async interValLoadAjxs(gongneng,sql,flag,vals,timer){//å®æ¶å¨æ¿æ°æ®æ¥éåæ¸
é¤å®æ¶å¨ |
|---|
| | | let param = new URLSearchParams(); |
|---|
| | | param.append("yemian","循ç¯æ°æ®"); |
|---|
| | | param.append("gongneng",gongneng); |
|---|
| | | param.append("sql",sql); |
|---|
| | | param.append("flag",flag); |
|---|
| | | param.append("anquanma","anquanma1"); |
|---|
| | | await this.$http.post( '../mysqlInsert/mysql.jsp',param) |
|---|
| | | .then(function (response) { |
|---|
| | | if(flag==2){ |
|---|
| | | let result=response.data |
|---|
| | | let index = result.indexOf("[{"); |
|---|
| | | if(index>-1){ |
|---|
| | | result=result.substring(index).trim(); |
|---|
| | | app.$data[vals]=JSON.parse(result); |
|---|
| | | //console.log(vals+":"); |
|---|
| | | //console.log(app.$data[vals]); |
|---|
| | | }else if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch( (error)=> { |
|---|
| | | clearInterval(timer) |
|---|
| | | if(this.global.errorFlag==0){ |
|---|
| | | this.global.errorFlag=1 |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼") |
|---|
| | | window.location.reload() |
|---|
| | | } |
|---|
| | | // if(this.global.getTableDataTimer){ |
|---|
| | | // clearInterval(this.global.getTableDataTimer) |
|---|
| | | // } |
|---|
| | | // if(this.global.getMachineElectricTimer){ |
|---|
| | | // clearInterval(this.global.getMachineElectricTimer) |
|---|
| | | // } |
|---|
| | | // if(this.global.getMachineWaterTimer){ |
|---|
| | | // clearInterval(this.global.getMachineWaterTimer) |
|---|
| | | // } |
|---|
| | | //alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼") |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | async getTableData(machineType){//大å±æ¾ç¤º æ¥è¯¢è®¢åæ°æ® |
|---|
| | | //this.global.getTableDataTimer= |
|---|
| | | let getTableDataTimer=await setInterval(()=>{ |
|---|
| | | let canshu={ |
|---|
| | | machineType:machineType,//æºå¨ç±»å |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_largeScreen_order_machineType_select(?,?)}~"+JSON.stringify(canshu); |
|---|
| | | this.interValLoadAjxs('表æ°æ®æ¥è¯¢',sql,2,"tableData",getTableDataTimer) |
|---|
| | | },5000) |
|---|
| | | }, |
|---|
| | | async getMachineElectric(machineType,group){//大å±æ¾ç¤º æ¥è¯¢æºå¨ç¨çµé |
|---|
| | | //this.global.getMachineElectricTimer= |
|---|
| | | let getMachineElectricTimer=await setInterval(()=>{ |
|---|
| | | let canshu={ |
|---|
| | | machineType:machineType,//æºå¨ç±»å |
|---|
| | | group:group //çµè¡¨ç»å« |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_largeScreen_electric_select(?,?,?)}~"+JSON.stringify(canshu); |
|---|
| | | this.interValLoadAjxs('大å±æ¾ç¤ºé»åæ¥è¯¢',sql,2,"machineElectric",getMachineElectricTimer) |
|---|
| | | },5000) |
|---|
| | | }, |
|---|
| | | async getMachineWater(machineType,group){ |
|---|
| | | //this.global.getMachineWaterTimer= |
|---|
| | | let getMachineWaterTimer=await setInterval(()=>{ |
|---|
| | | let canshu={ |
|---|
| | | machineType:machineType,//æºå¨ç±»å |
|---|
| | | group:group //水表ç»å« |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_largeScreen_water_select(?,?,?)}~"+JSON.stringify(canshu); |
|---|
| | | this.interValLoadAjxs('大å±æ¾ç¤ºé»å水表æ¥è¯¢',sql,2,"machineWater",getMachineWaterTimer) |
|---|
| | | },5000) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //gongneng:èªå®ä¹ï¼sqlåå¨è¿ç¨ï¼flagæ å¿(0,æ¯ç¨å¼ å·¥ä¹ååè½æå
¥ï¼1åå¨è¿ç¨æ¥è¯¢ï¼2åå¨è¿ç¨æå
¥)ï¼valsï¼vueédataåæ° |
|---|
| | | function loadAjxs(gongneng,sql,flag,vals){ |
|---|
| | | $.post("../mysqlInsert/mysql.jsp", |
|---|
| | | {"yemian":"123","gongneng":gongneng,"sql":sql,'flag':flag,'anquanma':"anquanma1"}, |
|---|
| | | function(result){ |
|---|
| | | if(flag==2){ |
|---|
| | | result=$(result).text(); |
|---|
| | | index = result.indexOf("[{"); |
|---|
| | | if(index>-1){ |
|---|
| | | result=result.substring(index).trim(); |
|---|
| | | app.$data[vals]=JSON.parse(result); |
|---|
| | | console.log(vals+":"); |
|---|
| | | console.log(app.$data[vals]); |
|---|
| | | }else if(result.indexOf("[[anquanmaerr]]")>-1){ |
|---|
| | | //alert('请å
ç»å½åæä½'); |
|---|
| | | window.parent.location.href='../login/index.jsp'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | .fail(function(response) { |
|---|
| | | alert('Error: ' + "æå¡å¨æ°æ®åçé误ï¼"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| New file |
| | |
|---|
| | | .el-dialog__body{ |
|---|
| | | height: 40vh; |
|---|
| | | overflow: auto; |
|---|
| | | } |
|---|
| | | #app,#mains{ |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | *{ |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <%@page import="builder.Manager"%> |
|---|
| | | <%@page import="ng.db.*"%> |
|---|
| | | <%@ page language="java" import="java.sql.*" contentType="text/html; charset=UTF-8" |
|---|
| | | pageEncoding="UTF-8"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
|---|
| | | <script src="../static/js/ng/tb-2.0.js"></script> |
|---|
| | | |
|---|
| | | <title>Insert title here</title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="tab" style="display:width:100%"> |
|---|
| | | </div> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var a= |
|---|
| | | <% |
|---|
| | | // Manager.appStart(null); |
|---|
| | | out.print( Manager.getDevice().toString()); |
|---|
| | | |
|---|
| | | %>; |
|---|
| | | console.log(a); |
|---|
| | | |
|---|
| | | var opt={ |
|---|
| | | table:{ |
|---|
| | | trStyles:["background-color:none","background-color:lightblue"], |
|---|
| | | style:"width:100%", |
|---|
| | | border:1, |
|---|
| | | notify:function(message){ |
|---|
| | | if(message.data.st!="å·²è¿æ¥"){ |
|---|
| | | |
|---|
| | | message.tr.children[3].style["color"]="red"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | columns:[ |
|---|
| | | { |
|---|
| | | name:"设å¤å", |
|---|
| | | binding:"name" |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | name:"IP", |
|---|
| | | binding:"ip" |
|---|
| | | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name:"port", |
|---|
| | | binding:"port", |
|---|
| | | } |
|---|
| | | |
|---|
| | | , |
|---|
| | | { |
|---|
| | | name:"ç¶æ", |
|---|
| | | binding:"st" |
|---|
| | | } |
|---|
| | | , |
|---|
| | | { |
|---|
| | | name:"è°ç¨æ¬¡æ°", |
|---|
| | | binding:"count" |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | var tab=createTable(document.getElementById("tab"),opt); |
|---|
| | | tab.update(a); |
|---|
| | | tab.notify(); |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@page import="ng.db.*,java.util.LinkedHashMap,java.util.ArrayList,java.util.LinkedList"%> |
|---|
| | | <%@page import="com.alibaba.fastjson.JSON,com.alibaba.fastjson.JSONObject,com.alibaba.fastjson.JSONArray,com.alibaba.fastjson.parser.Feature"%> |
|---|
| | | <% |
|---|
| | | if(request.getParameter("ip")!=null ){ |
|---|
| | | |
|---|
| | | try{ |
|---|
| | | ArrayList<String> result=getFtpData.getImg(request.getParameter("ip")); |
|---|
| | | LinkedHashMap<String, String> results = new LinkedHashMap<String, String>(); |
|---|
| | | results.put("A0", String.valueOf(result.get(0))); |
|---|
| | | results.put("A1", String.valueOf(result.get(1))); |
|---|
| | | LinkedList<String> resultss = new LinkedList<String>(); |
|---|
| | | resultss.add(JSON.toJSONString(results)); |
|---|
| | | out.print(resultss); |
|---|
| | | }catch(Exception e){ |
|---|
| | | out.print("[{}]"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | %> |
|---|
| New file |
| | |
|---|
| | | |
|---|
| | | <%@include file="mysql_connect.jsp"%> |
|---|
| | | <%@page import="java.util.LinkedHashMap"%> |
|---|
| | | <%@page import="java.util.HashMap"%> |
|---|
| | | <%@page import="java.util.LinkedList"%> |
|---|
| | | <%@page import="com.alibaba.fastjson.JSON,com.alibaba.fastjson.JSONObject,com.alibaba.fastjson.JSONArray,com.alibaba.fastjson.parser.Feature"%> |
|---|
| | | <%@ page import="java.text.SimpleDateFormat,java.util.Date" %> |
|---|
| | | <%@page import="druidConnect.JDBCUtils.*,java.sql.Connection"%> |
|---|
| | | |
|---|
| | | <% |
|---|
| | | String gongneng = request.getParameter("gongneng"); |
|---|
| | | String yemian = request.getParameter("yemian"); |
|---|
| | | String sltcSql =request.getParameter("sql"); |
|---|
| | | String anquanma=request.getParameter("anquanma"); |
|---|
| | | Connection con = druidConnect.JDBCUtils.getConnection(); |
|---|
| | | CallableStatement cs =null; |
|---|
| | | try{ |
|---|
| | | |
|---|
| | | if(true){ |
|---|
| | | String flag=""; |
|---|
| | | //sltcSql="{call AXJ_a_largeScreen_glassCut_select()}"; |
|---|
| | | flag=request.getParameter("flag"); |
|---|
| | | String[] sql=sltcSql.split("~"); |
|---|
| | | cs = con.prepareCall(sql[0]); |
|---|
| | | if(sql.length>1){ |
|---|
| | | HashMap<String ,String> hp = JSON.parseObject(sql[1], LinkedHashMap.class,Feature.OrderedField); |
|---|
| | | int indexNum=1; |
|---|
| | | for(String key : hp.keySet()) { |
|---|
| | | cs.setString(indexNum, String.valueOf(hp.get(key))); |
|---|
| | | //out.print("cs.setString("+indexNum+", "+String.valueOf(hp.get(key))+")"); |
|---|
| | | indexNum++; |
|---|
| | | } |
|---|
| | | cs.registerOutParameter( indexNum , java.sql.Types.LONGNVARCHAR); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | if(flag.equals("2")){ |
|---|
| | | ResultSet rs = cs.executeQuery(); |
|---|
| | | ResultSetMetaData rsmd = rs.getMetaData(); |
|---|
| | | String[] arr; |
|---|
| | | LinkedList<String> results = new LinkedList<String>(); |
|---|
| | | |
|---|
| | | while(rs.next()){ |
|---|
| | | LinkedHashMap<String, String> result = new LinkedHashMap<String, String>(); |
|---|
| | | for(int i=0;i<rsmd.getColumnCount();i++){ |
|---|
| | | // out.println(rsmd.getColumnName(i+1));String.valueOf(i) |
|---|
| | | String val=rs.getString(i+1)!=null?String.valueOf(rs.getString(i+1)):""; |
|---|
| | | result.put(String.valueOf(i+"_"+rsmd.getColumnName(i+1)),val); |
|---|
| | | } |
|---|
| | | String jsonStr = JSON.toJSONString(result); |
|---|
| | | results.add(jsonStr); |
|---|
| | | } |
|---|
| | | if(results.size()<1){ |
|---|
| | | results.add("{}"); |
|---|
| | | } |
|---|
| | | out.print(results); |
|---|
| | | |
|---|
| | | }else{ |
|---|
| | | cs.execute(); |
|---|
| | | String fanhui=(String) cs.getString("fanhui"); |
|---|
| | | // out.print("[["+cs.getString("fanhui").length()+","+cs.getString("fanhui")+"]]"); |
|---|
| | | if(cs.getString("fanhui")!=null){ |
|---|
| | | if(fanhui.length()>0 && !fanhui.equals("null")){ |
|---|
| | | out.print("[["+cs.getString("fanhui")+"]]"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }catch(Exception e){ |
|---|
| | | cs =con.prepareCall("{call AXJ_err(?,?,?)}"); |
|---|
| | | cs.setString(1, e.toString()); |
|---|
| | | cs.setString(2, gongneng); |
|---|
| | | cs.setString(3, sltcSql+','+anquanma); |
|---|
| | | cs.execute(); |
|---|
| | | |
|---|
| | | out.print("[['åçæªç¥é误ï¼è¯·èç³»ç¸å
³äººå']]"); |
|---|
| | | }finally { |
|---|
| | | druidConnect.JDBCUtils.close(cs, con); |
|---|
| | | } |
|---|
| | | %> |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>Document</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app"> |
|---|
| | | <el-container> |
|---|
| | | <el-header> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="dateSelect" |
|---|
| | | type="datetimerange" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | range-separator="è³" |
|---|
| | | start-placeholder="å¼å§æ¥æ" |
|---|
| | | end-placeholder="ç»ææ¥æ" |
|---|
| | | align="right" |
|---|
| | | value-format="yyyy-MM-dd HH:mm:ss" |
|---|
| | | > |
|---|
| | | |
|---|
| | | </el-date-picker> |
|---|
| | | |
|---|
| | | <el-input style="width: 175px;" |
|---|
| | | placeholder="请è¾å
¥æºå¨ID" |
|---|
| | | v-model="machineid" |
|---|
| | | clearable> |
|---|
| | | </el-input> |
|---|
| | | </el-header> |
|---|
| | | <el-main style="height: 90vh;"> |
|---|
| | | <show-table :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | |
|---|
| | | </el-main> |
|---|
| | | </el-container> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | let app= new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data(){ |
|---|
| | | return{ |
|---|
| | | pickerOptions: { |
|---|
| | | shortcuts: [{ |
|---|
| | | text: 'æè¿ä¸å¨', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | text: 'æè¿ä¸ä¸ªæ', |
|---|
| | | onClick(picker) { |
|---|
| | | const end = new Date(); |
|---|
| | | const start = new Date(); |
|---|
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|---|
| | | picker.$emit('pick', [start, end]); |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | dateSelect:["",""], |
|---|
| | | machineid:"", |
|---|
| | | tableData:[{}], |
|---|
| | | tableHead:[{ |
|---|
| | | "0_machine_id":'æºå¨ID', |
|---|
| | | "1_machine_name":'æºå¨å称', |
|---|
| | | "2_jishu":'产é', |
|---|
| | | "3_tingji":'åæºæ¶é´' |
|---|
| | | }] |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | }, |
|---|
| | | async mounted() { |
|---|
| | | let timer1=await setInterval(()=>{ |
|---|
| | | let arrObj={ |
|---|
| | | machineid:this.machineid, |
|---|
| | | stateData:this.dateSelect[0], |
|---|
| | | endeData:this.dateSelect[1] |
|---|
| | | } |
|---|
| | | sql="{call glog.datetimeMachineGlassSum(?,?,?,?)}~"+JSON.stringify(arrObj) |
|---|
| | | this.interValLoadAjxs('产éæ¥è¯¢',sql,2,"tableData",timer1) |
|---|
| | | },5000) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>Document</title> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app"> |
|---|
| | | <button type="button" @click="test0()" class="btn btn-primary " |
|---|
| | | style="height:30px;width:90px;background-color: #5CADFE;">导åºè¡¨æ ¼</button> |
|---|
| | | |
|---|
| | | <el-container> |
|---|
| | | |
|---|
| | | <el-main style="height: 90vh;"> |
|---|
| | | <show-table :id="table" :tablehead="tableHead" :tabledata="tableData"></show-table> |
|---|
| | | |
|---|
| | | </el-main> |
|---|
| | | </el-container> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | let app= new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data(){ |
|---|
| | | return{ |
|---|
| | | |
|---|
| | | |
|---|
| | | machineid:"", |
|---|
| | | table:"table1", |
|---|
| | | tableData:[{}], |
|---|
| | | tableHead:[{ |
|---|
| | | "0_riqi":'æ¶é´æ®µ', |
|---|
| | | "1_baipianchangliang":'æ°ç产é', |
|---|
| | | "2_baipiantingji":'æ°çåæº', |
|---|
| | | "3_qingxichangliang":'æ¸
æ´äº§é', |
|---|
| | | "4_qingxitingji":'æ¸
æ´åæº', |
|---|
| | | "5_siyinchangliang1":'ä¸å°1产é', |
|---|
| | | "6_siyintingji1":'ä¸å°1åæº', |
|---|
| | | "7_siyinchangliang2":'ä¸å°2产é', |
|---|
| | | "8_siyintingji2":'ä¸å°2åæº', |
|---|
| | | "9_zuankongchangliang":'é»å1产é', |
|---|
| | | "10_zuankongtingji":'é»å1åæº', |
|---|
| | | "11_shuidaochangliang":'æ°´å1产é', |
|---|
| | | "12_shuidaotingji":'æ°´å1åæº', |
|---|
| | | "13_jiagongzhongxinchangliang":'å å·¥ä¸å¿1产é', |
|---|
| | | "14_jiagongzhongxintingji":'å å·¥ä¸å¿1åæº' |
|---|
| | | }] |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | //æ¶é´æ ¼å¼å |
|---|
| | | formatDate(objDate,fmt) { |
|---|
| | | var o = { |
|---|
| | | ãããã"M+" : objDate.getMonth()+1, //æ份 |
|---|
| | | ãããã"d+" : objDate.getDate(), //æ¥ |
|---|
| | | ãããã"h+" : objDate.getHours()%12 == 0 ? 12 : objDate.getHours()%12, //å°æ¶ |
|---|
| | | ãããã"H+" : objDate.getHours(), //å°æ¶ |
|---|
| | | ãããã"m+" : objDate.getMinutes(), //å |
|---|
| | | ãããã"s+" : objDate.getSeconds(), //ç§ |
|---|
| | | ãããã"q+" : Math.floor((objDate.getMonth()+3)/3), //å£åº¦ |
|---|
| | | ãããã"S" : objDate.getMilliseconds() //æ¯«ç§ |
|---|
| | | ãã}; |
|---|
| | | ããif(/(y+)/.test(fmt)) |
|---|
| | | ããããfmt=fmt.replace(RegExp.$1, (objDate.getFullYear()+"").substr(4 - RegExp.$1.length)); |
|---|
| | | ããfor(var k in o) |
|---|
| | | ããããif(new RegExp("("+ k +")").test(fmt)) |
|---|
| | | ããfmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); |
|---|
| | | ããreturn fmt; |
|---|
| | | |
|---|
| | | }, |
|---|
| | | //导åºæ¹æ³ |
|---|
| | | test0:function() { |
|---|
| | | let exportFileContent = document.getElementById('table1').outerHTML; |
|---|
| | | let blob = new Blob([exportFileContent], { type: 'text/plain;charset=utf-8' }); // 解å³ä¸æä¹±ç é®é¢ |
|---|
| | | blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type }); |
|---|
| | | // 设置é¾æ¥ |
|---|
| | | let link = window.URL.createObjectURL(blob); |
|---|
| | | let a = document.createElement('a'); // å建aæ ç¾ |
|---|
| | | a.download = ""+this.formatDate(new Date(),"yyyy-MM-dd")+"产éæ¥è¡¨.xls"; // 设置被ä¸è½½çè¶
é¾æ¥ç®æ ï¼æ件åï¼ |
|---|
| | | a.href = link; // 设置aæ ç¾çé¾æ¥ |
|---|
| | | document.body.appendChild(a); // aæ ç¾æ·»å å°é¡µé¢ |
|---|
| | | a.click(); // 设置aæ ç¾è§¦ååå»äºä»¶ |
|---|
| | | document.body.removeChild(a); // 移é¤aæ ç¾ |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | watch:{ |
|---|
| | | tableData(){ |
|---|
| | | for(item of this.tableData){ |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async mounted(){ |
|---|
| | | sql="{call chanliangchaxungroup()}"; |
|---|
| | | this.loadAjxss('产éæ¥è¯¢',sql,2,"tableData"); |
|---|
| | | |
|---|
| | | await setInterval(()=>{ |
|---|
| | | |
|---|
| | | sql="{call chanliangchaxungroup()}"; |
|---|
| | | this.loadAjxss('产éæ¥è¯¢',sql,2,"tableData"); |
|---|
| | | },5000) |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page language="java" contentType="text/html; charset=ISO-8859-1" |
|---|
| | | pageEncoding="ISO-8859-1"%> |
|---|
| | | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
|---|
| | | <title>Insert title here</title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" > |
|---|
| | | <p>{{orderData}}</p>+1 |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <%@ page contentType="text/html;charset=UTF-8"%> |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <!-- import CSS --> |
|---|
| | | <link rel="stylesheet" href="../js/static/css/element.css"> |
|---|
| | | <!-- <link rel="stylesheet" href="../js/static/css/style.css"> --> |
|---|
| | | <style > |
|---|
| | | html,body{ |
|---|
| | | width: 99%; |
|---|
| | | height: 99%; |
|---|
| | | background-color: #D5EAFF; |
|---|
| | | padding: 0%; |
|---|
| | | margin: auto; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | #app{ |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | #divHead,#left,#main,.shelf{ |
|---|
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); |
|---|
| | | } |
|---|
| | | input::-webkit-outer-spin-button, |
|---|
| | | input::-webkit-inner-spin-button { |
|---|
| | | -webkit-appearance: none; |
|---|
| | | } |
|---|
| | | *{ |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | #mains{ |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | .page-scroll { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-scroll .el-scrollbar__wrap { |
|---|
| | | overflow-x: hidden; |
|---|
| | | } |
|---|
| | | img{ |
|---|
| | | width: auto; |
|---|
| | | height: auto; |
|---|
| | | max-width: 100%; |
|---|
| | | max-height: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" v-loading="loading" element-loading-background="white" > |
|---|
| | | <el-container style="width:100%;height:100%" > |
|---|
| | | <el-header style="height: 3%;"> |
|---|
| | | <el-button @click="showFlagFuc" type="primary" round style="float:left;">{{showFlag==false?'è¿å':'æ·»å ä½ä¸å¾'}}</el-button> |
|---|
| | | </el-header> |
|---|
| | | <el-main style="width:100%;height:97%" > |
|---|
| | | <el-table v-show="showFlag" |
|---|
| | | :data="produceData" |
|---|
| | | height="100%" |
|---|
| | | style="width: 100%;"> |
|---|
| | | |
|---|
| | | |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item,keys,index) in tableHead[0]" |
|---|
| | | :key="index" |
|---|
| | | :label="item" |
|---|
| | | |
|---|
| | | > |
|---|
| | | <el-table-column :prop="keys" v-if="index==0" > |
|---|
| | | <template slot-scope="scope" v-if="Object.keys(produceData[0]).length!=0"> |
|---|
| | | <el-button |
|---|
| | | @click.native.prevent="updateRow(scope.$index, produceData)" |
|---|
| | | type="text" |
|---|
| | | size="small"> |
|---|
| | | ä¿®æ¹ |
|---|
| | | </el-button> |
|---|
| | | |
|---|
| | | <el-button |
|---|
| | | @click.native.prevent="updateRow1(scope.$index, produceData)" |
|---|
| | | type="text" |
|---|
| | | size="small"> |
|---|
| | | ä½åº |
|---|
| | | </el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | <el-table-column :prop="keys" v-if="index>0"> |
|---|
| | | |
|---|
| | | </el-table-column> |
|---|
| | | |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <!-- æ°å¢ä¿®æ¹ --> |
|---|
| | | <div v-show="updateShowFlag" style="width: 30%;height: 50vh;float: left;margin-top: 10%;margin-left: 10%; "> |
|---|
| | | <img :src="ruleForm.route" > |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-form v-show="!showFlag" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 25%;float: right;margin-right: 20%;"> |
|---|
| | | <el-form-item> |
|---|
| | | <el-button v-show="updateShowFlag" type="primary" @click="updateGlassSub('ruleForm')" v-preventReClick ='3000'>ä¿®æ¹</el-button> |
|---|
| | | <el-button v-show="!updateShowFlag" type="primary" @click="submitForm('ruleForm')" v-preventReClick='3000'>æ交</el-button> |
|---|
| | | <el-button @click="resetForm('ruleForm')">éç½®</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <el-form-item label="大å±éæ©" prop="optNum"> |
|---|
| | | <template> |
|---|
| | | <el-select v-model="ruleForm.optNum" placeholder="请éæ©" clearable filterable> |
|---|
| | | <el-option |
|---|
| | | v-for="item in optList" |
|---|
| | | :key="item['0_screen_id']" |
|---|
| | | :label="item['2_screen']" |
|---|
| | | :value="item['0_screen_id']"> |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | </template> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item label="ä½ä¸å¾çä¸ä¼ " prop="route" > |
|---|
| | | <el-upload |
|---|
| | | :limit="1" |
|---|
| | | :on-change="changeFile" |
|---|
| | | class="upload-demo" |
|---|
| | | ref="upload" |
|---|
| | | action="https://jsonplaceholder.typicode.com/posts/" |
|---|
| | | :file-list="fileList" |
|---|
| | | :auto-upload="false"> |
|---|
| | | <el-button slot="trigger" size="small" type="primary" >éåæ件</el-button> |
|---|
| | | <div slot="tip" class="el-upload__tip">åªè½ä¸ä¼ jpg/pngæ件ï¼ä¸ä¸è¶
è¿5m</div> |
|---|
| | | </el-upload> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | </el-form> |
|---|
| | | |
|---|
| | | </el-main> |
|---|
| | | <!-- <el-footer style="background-color: azure;"></el-footer> --> |
|---|
| | | </el-container> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <!-- import Vue before Element --> |
|---|
| | | <script src="../js/jquery-3.4.1.min.js"></script> |
|---|
| | | |
|---|
| | | <script src="../js/static/js/vue.js"></script> |
|---|
| | | <script src="../js/axios.min.js"></script> |
|---|
| | | |
|---|
| | | <script src="../js/mixins.js"></script> |
|---|
| | | <script src="../js/global.js"></script> |
|---|
| | | <!-- import JavaScript --> |
|---|
| | | <script src="../js/static/js/element.js"></script> |
|---|
| | | <script src="../js/static/js/echarts.min.js"></script> |
|---|
| | | |
|---|
| | | <script > |
|---|
| | | //import * as echarts from '../js/echarts.min.js'; |
|---|
| | | Vue.prototype.$echarts = echarts |
|---|
| | | Vue.prototype.$http= axios |
|---|
| | | let app =new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data(){ |
|---|
| | | var checkNum = (rule, value, callback) => { |
|---|
| | | if (!value) { |
|---|
| | | return callback(new Error('ä¸è½ä¸ºç©º')); |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | let reg = new RegExp(`^[0-9]{1,4}(\.[0-9]{0,2})?$`) |
|---|
| | | |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('请è¾å
¥0.01-9999.99çæ°å')); |
|---|
| | | }else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, 1000); |
|---|
| | | }; |
|---|
| | | var checkString = (rule, value, callback) => { |
|---|
| | | if (!value) { |
|---|
| | | return callback(new Error('ä¸è½ä¸ºç©º')); |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | // if (value.length>255) { |
|---|
| | | // callback(new Error('æ大é¿åº¦255')); |
|---|
| | | // }else { |
|---|
| | | // callback(); |
|---|
| | | // } |
|---|
| | | callback(); |
|---|
| | | }, 1000); |
|---|
| | | }; |
|---|
| | | var checkThickness = (rule, value, callback) => { |
|---|
| | | if (!value) { |
|---|
| | | return callback(new Error('ä¸è½ä¸ºç©ºæè
0')); |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | | let reg = new RegExp(`^[0-9]*[1-9][0-9]*$`) |
|---|
| | | |
|---|
| | | if (!reg.test(value)) { |
|---|
| | | callback(new Error('请è¾å
¥æ£æ´æ°çå度')); |
|---|
| | | }else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, 1000); |
|---|
| | | }; |
|---|
| | | return { |
|---|
| | | ruleForm: { |
|---|
| | | optNum:'', |
|---|
| | | route:'', |
|---|
| | | photoName:'' |
|---|
| | | }, |
|---|
| | | rules: { |
|---|
| | | optNum: [ |
|---|
| | | { validator: checkString, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | route: [ |
|---|
| | | { validator: checkString, trigger: 'blur' } |
|---|
| | | ], |
|---|
| | | |
|---|
| | | }, |
|---|
| | | tableHead:[], |
|---|
| | | produceData:[], |
|---|
| | | showFlag:true, |
|---|
| | | updateShowFlag:false, |
|---|
| | | updateGlass:{ |
|---|
| | | id:'' |
|---|
| | | }, |
|---|
| | | optList:[], |
|---|
| | | fileList:[], |
|---|
| | | selectGlass:["","","","","","","",""], |
|---|
| | | loading:true, |
|---|
| | | |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | submitForm(formName) { |
|---|
| | | this.$refs[formName].validate((valid) => { |
|---|
| | | if (!valid) { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_largeScreen_phtot_insert(?,?,?,?)}~"+JSON.stringify(this.ruleForm); |
|---|
| | | this.connects("æ°å¢ç°åºä½ä¸å¾",sql,1,1) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | resetForm(formName) { |
|---|
| | | this.$refs[formName].resetFields(); |
|---|
| | | }, |
|---|
| | | showFlagFuc(){ |
|---|
| | | Object.keys(this.ruleForm).forEach((key) => (this.ruleForm[key] = '')); |
|---|
| | | this.showFlag=!this.showFlag |
|---|
| | | this.updateShowFlag=false; |
|---|
| | | }, |
|---|
| | | updateRow(index,row){//ä¿®æ¹äº§åæ°æ®æ¾ç¤º |
|---|
| | | this.showFlag=!this.showFlag |
|---|
| | | this.updateShowFlag=true; |
|---|
| | | let rowObj=row[index] |
|---|
| | | this.ruleForm.optNum=rowObj["1_screen_id"] |
|---|
| | | this.ruleForm.route=rowObj["4_route"] |
|---|
| | | this.ruleForm.photoName=rowObj["3_photo_name"] |
|---|
| | | this.updateGlass.id=rowObj["0_id"] |
|---|
| | | }, |
|---|
| | | updateRow1(index,row){//ä¿®æ¹äº§åæ°æ®æ¾ç¤º |
|---|
| | | |
|---|
| | | if(!confirm("确认ä½åºå¤§å±æ件")){ |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | let rowObj=row[index] |
|---|
| | | this.updateGlass.id=rowObj["0_id"] |
|---|
| | | let sql="{call AXJ_a_largeScreen_phtot_delete(?,?)}~"+JSON.stringify(this.updateGlass); |
|---|
| | | this.connects("大å±ä½ä¸å¾ä½åº",sql,1,1); |
|---|
| | | }, |
|---|
| | | updateGlassSub(formName){ |
|---|
| | | this.$refs[formName].validate((valid) => { |
|---|
| | | if (!valid) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | let updateGlassObj=this.ruleForm |
|---|
| | | updateGlassObj.id=this.updateGlass.id |
|---|
| | | |
|---|
| | | let sql="{call AXJ_a_largeScreen_phtot_update(?,?,?,?,?)}~"+JSON.stringify(updateGlassObj); |
|---|
| | | this.connects("大å±ä½ä¸å¾ä¿®æ¹",sql,1,1); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | changeFile(file){//æ·»å æ件触åçæbase64æ件 |
|---|
| | | const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' ; |
|---|
| | | const isLt2M = file.size / 1024 / 1024 < 5; |
|---|
| | | |
|---|
| | | if (!isJPG) { |
|---|
| | | this.$message.error('ä¸ä¼ 头åå¾çåªè½æ¯ JPGæè
PNG æ ¼å¼!') |
|---|
| | | this.$refs.upload.clearFiles() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (!isLt2M) { |
|---|
| | | this.$message.error('ä¸ä¼ 头åå¾ç大å°ä¸è½è¶
è¿ 5MB!') |
|---|
| | | this.$refs.upload.clearFiles() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | let reader = new FileReader(); |
|---|
| | | console.log(file.raw.name); |
|---|
| | | reader.readAsDataURL(file.raw); |
|---|
| | | reader.onload = (e) => { |
|---|
| | | resolve(e.target.result); |
|---|
| | | |
|---|
| | | this.ruleForm.route=e.target.result; |
|---|
| | | this.ruleForm.photoName=file.raw.name; |
|---|
| | | }; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | selectSub:function(){ |
|---|
| | | let arrObj={} |
|---|
| | | for(let i in this.selectGlass){ |
|---|
| | | arrObj[i]=this.selectGlass[i] |
|---|
| | | } |
|---|
| | | let sql="{call AXJ_a_produce_select(?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj); |
|---|
| | | this.loadAjxss('产åæ¥è¯¢',sql,2,"produceData"); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed:{ |
|---|
| | | |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | produceData(){ |
|---|
| | | this.loading=false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | let sql="{call AXJ_a_largeScreen_phtotList_select()}"; |
|---|
| | | let flag=2; |
|---|
| | | this.loadAjxss('产ååå§æ¥è¯¢',sql,flag,"produceData"); |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_phtotHead_select()}"; |
|---|
| | | this.loadAjxss('产å表头',sql,flag,"tableHead"); |
|---|
| | | |
|---|
| | | sql="{call AXJ_a_largeScreen_phtotScreenList_select()}"; |
|---|
| | | this.loadAjxss('ä½ä¸å¾å¤§å±å表',sql,flag,"optList"); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
