<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/Vue.js "></script>
<script src="js/vue-router.js"></script>
<link rel="stylesheet" href="css/iview.css">
<script src="js/iview.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<!--<input type="button" value="123" id="btn">-->
<div id="app">
<div>
<Row >
<i-col span="3" offset="21">
<i-button icon="md-remove" @click="minimize"></i-button>
<i-button icon="md-square-outline" @click="maximize"></i-button>
<i-button icon="md-close"@click="shutdown"></i-button>
</i-col >
</Row>
</div>
<div style="height: 100px;padding-top: 20px;padding-left: 30px;">
<Row type="flex" align="middle">
<i-col span="21"><div ><h3>Mega Coffee Control System</h3></div></i-col >
<i-col span="3" ><img src="img/flex.jpg" height="40"></i-col >
</Row>
</div>
<Tabs value="name1">
<tab-pane label="Main" name="name1" icon="md-home">
<div style=" height: 700px;background-color: #5cadff">
<Row type="flex" justify="center" align="middle">
<i-col span="6" >
<div style="padding-top: 50px">
<Card :bordered="false">
<p slot="title">Product Information</p>
<Collapse v-model="value1" simple>
<Panel name="1">
Product Number
<p slot="content">{{ Vdata.mydata}}</p>
</Panel>
<Panel name="2">
R-state
<p slot="content">SJH458</p>
</Panel>
<Panel name="3">
Serial Number
<p slot="content">SN8795245</p>
</Panel>
<Panel name="4">
Product Model
<p slot="content">RS213</p>
</Panel>
</Collapse>
<br>
<i-button long size="large" type="success" >Start</i-button>
<br><br>
<i-button long size="large" type="error">Stop</i-button>
</Card>
</div>
</i-col >
<i-col span="16" offset="1">
<br>
<div>
<br> <br>
<img :src="Vdata.img" class="img-rounded" alt="cant find the picture" width="850">
</div>
</i-col >
</Row>
</div>
</tab-pane>
<tab-pane label="Log" name="name2" icon="md-list-box" style="background-color: #5cadff">
<i-table :columns="columns1" :data="data1"></i-table>
</tab-pane>
<tab-pane label="Alarm" name="name3" icon="md-warning">alarm</tab-pane>
<tab-pane label="Control" name="name4" icon="md-settings">
<div style="background:#eee;padding: 20px">
<Card :bordered="false">
<p slot="title">Sensor Status</p>
<div>
<Row >
<i-col span="12" >
<div>
<Row>
<i-col span="2" offset="2"><h5>I0.1</h5></i-col >
<i-col span="2" offset="1">
<Icon type="ios-radio-button-on" size="20" color="red"/>
</i-col >
<i-col span="12" offset="1"><h5>左侧输入按钮</h5></i-col >
</Row>
</div>
<div>
<Row >
<i-col span="2" offset="2"><h5>I0.2</h5></i-col >
<i-col span="2" offset="1">
<Icon type="ios-radio-button-on" size="20" color="green"/>
</i-col >
<i-col span="12" offset="1"><h5>右侧输入按钮</h5></i-col >
</Row>
</div>
</i-col >
<i-col span="12" ></i-col >
</Row>
</div>
</Card>
</div>
</tab-pane>
<tab-pane label="Vision" name="name5" icon="md-camera">vision</tab-pane>
</Tabs>
<div style="height: 30px;padding-top: 10px;">
<h5>Executing:Ready! Current UUT: ePrnd Time:22:26:35</h5>
</div>
</div>
<script>
var Vdata={
mydata:'h1',
mydata1:'h2',
mydata2:'h3',
img:'img/tecnology.jpg'
};
Vue.config.devtools = true;
var vm=new Vue({
el:'#app',
data:{
Vdata:Vdata,
value1: ['1','2','3','4'],
columns1: [
{
title: 'Code',
key: 'code'
},
{
title: 'Description',
key: 'description'
},
{
title: 'EventTime',
key: 'eventTime'
}
],
data1: [
{
code: '35300',
description: 'take off coffee',
eventTime: new Date(),
date: '2016-10-03'
},
{
code: '31800',
description: 'put down the cup',
eventTime:new Date(),
date: '2016-10-01'
},
{
code: '37900',
description: 'robot shaking',
eventTime:new Date(),
date: '2016-10-02'
},
{
code: '31500',
description: 'to do product',
eventTime: new Date(),
date: '2016-10-04'
}
]
},
methods:{
minimize:function () {
Vue.set(productNumber, 'mydata', '12345678');
eoapi.extInvoke("minimize", [window.navigator.appVersion]);
alert('hello')
},
maximize:function () {
eoapi.extInvoke("maximize", [window.navigator.appVersion]);
},
shutdown:function () {
eoapi.extInvoke("shutdown", [window.navigator.appVersion]);
},
}
})
</script>
</body>
</html>