關于項目監控看闆HTML頁面設計

工廠中的房間内各個線體，各個站别會有各項測試特性需要監控，做一個頁面監控，以便發現異常立即顯示不同的顔色，系統并會發現異常警報，看闆，E-mail 等。

1. 先上完成圖檔如下：

     a.灰色表示無異常

     b.紅色表示異常未處理

     c. 黃色表示異常進行中

     d. 綠色表示已經 處理完成

2. HTML 代碼如下：

<div>
	<table  >
		<tr style="background-color:aqua">
			<th style="height:30px;width:90px;">線别</th>
			<th style="height:30px;width:120px;">料号(機種)</th>
			<th style="height:30px;width:90px;">站别</th>
			<th style="height:30px;width:69px;">項目1</th>
			<th style="height:30px;width:69px;">項目2</th>
			<th style="height:30px;width:69px;">項目3</th>
			<th style="height:30px;width:69px;">項目4</th>
			<th style="height:30px;width:69px;">項目5</th>
			<th style="height:30px;width:69px;">項目6</th>
			<th style="height:30px;width:69px;">項目7</th>
			<th style="height:30px;width:69px;">項目8</th>
			<th style="height:30px;width:69px;">項目9</th>
			<th style="height:30px;width:69px;">項目10</th>
			<th style="height:30px;width:69px;">項目11</th>
			<th style="height:30px;width:69px;">項目12</th>
		</tr> 	

		<tr v-for="a in SPCdata" :key="a">

				<td rowspan=a.Hang style="height:50px;width:90px;" >{{a.Line}}</td>
				<td rowspan="a.Hang"  style="height:50px;width:120px">{{a.Part_pro}}</td>
				<td rowspan="a.Hang"  style="height:50px;width:90px">{{a.Sation}}</td>
				<td v-for="c in a.Item" :key="c" style="height:50px;width:69px;vertical-align:top">
					
					<div v-for="d in c.Sitem" :key="d"  >
						<div v-if="d.L===0">
							<button @click="butx(d.btn)" style="height:50px;width:68px;"> {{d.itemx}}</button>
						</div>
						<div v-if="d.L===1">
							<button class="Yichang" @click="butx(d.btn)" style="height:50px;width:68px;"> {{d.itemx}}</button>
						</div>
						<div v-if="d.L===2">
							<button class="Track" @click="butx(d.btn)" style="height:50px;width:68px;"> {{d.itemx}}</button>
						</div>
						<div v-if="d.L===3">
							<button class="Closed" @click="butx(d.btn)" style="height:50px;width:68px;"> {{d.itemx}}</button>
						</div>
						
					</div>
					
				</td>
		</tr>
		

	</table>

	</div>
           

3. CSS 代碼段如下：标示顔色和居中。

td{text-align:center;}
th{text-align:center;}


.Yichang{ /*還未處理的顔色*/ 
	background-color:hotpink
}
.Track{ /* 追蹤中的顔色 */
	background-color: yellow
}
.Closed{ /* 這裡是項目關閉的顔色 */
	background-color:springgreen
}
           

4. SPCdata[] 裡的資料格式是這樣的，因為資料太長了，我隻放一段，其它的每組資料一樣。

    每行展示最多12 個項目，超過 12筆，放在第二行。以下 Sitem 裡有2個值，表示有2行，3個值表示3行，可 根據實際情況在 Sitem裡填加資料。

    【注意】:以下是我的測試資料，

                    a. Sitem ：itemx(項目名稱)；

                    b. L: 表示項目的狀态(0:無異常[無色]，1:未處理[粉色]，2:追蹤中[黃色]，3:完成[綠色])

                    c. btn: 點選事件後，要跳到的頁面，另一個頁面接受位址後根據 url ? 後的鍵值對顯示對應内容的資料趨勢，以下百度為測試網址。

SPCdata:[
			{
				"Line":"BD21",
				"Part_pro":"KK32",
				"Sation":"測試",
				Item:[//每次隻能放12 個，超過12 個就要有合并tabel 的格式。
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0,"btn":"http://www.baidu.com"},
							{"itemx":"電壓精度","L":1},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
							{"itemx":"溫度精準度","L":1},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
							{"itemx":"電壓精度","L":1},
						],
					},
					{
						Sitem:[
							{"itemx":"這裡是黃色","L":3},
							{"itemx":"電壓精度","L":1},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
							{"itemx":"電壓精度","L":1},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
							{"itemx":"電壓精度","L":1},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":2},
							{"itemx":"電壓精度","L":1},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
						],
					},
					{
						Sitem:[
							{"itemx":"溫度精度xxxx","L":0},
						],
					},

				]
			}
  ]
           

5. 點選事件。上文第2條，HTML代碼裡可以看到如下代碼，點選對應 butx()這個函數。 

<button class="Yichang" @click="butx(d.btn)" style="height:50px;width:68px;"> {{d.itemx}}</button>
           

 對應的函數體如下：

butx(x){
		var tempwindow=window.open('_blank');
		tempwindow.location=x;
	},
           

6.另外，像這樣的監控，一般會有定時重新整理，代碼如下，我隻是寫了一個範例。

    各位大神可以拓展來寫，5秒重新整理一次。

settime(){

		window.setInterval(this.showMsgIcon, 5000);

	},

	showMsgIcon(){
		alert("計時成功了");
	},
           

    可以将 settime放到開啟頁 mounted() 下。 

mounted(){
    this.settime();
}