@*
*@
@model Ropin.Environmentally.WebScada.DeviceValueModel;
@{
}
<body>
<div class="breadcrumb" id="div-canvas" style="position:relative; top:0px;left:0px; background-color:White;">
<div id="app">
@{
<img style="border-width:0px;width:1024px;height:768px; z-index:0; position:absolute;left:0px;top:0px;"
src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/pic/qinengjichang.jpg"
id="ccc" />
//<div v-if="device.value19 === '1'" style="z-index:1; position:absolute;left:0px;top:0px;">
// <img src="https://shyp.yunzutai.com:22744/Uploads/Files/2021/12/10/115e6854e0ac4449ba453714d6d4a2a4.svg" alt="Smiley face" width="64" height="64">
// </div>
// <div v-if="device.value19 === '0'" style="z-index:2; position:absolute;left:0px;top:0px;">
// <img src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/pic/hui.svg" alt="Smiley face" width="64" height="64">
// </div>
<div style="z-index:1; position:absolute;left:0px;top:0px;">
<img v-if="device.valueC19 === '1'" src="https://shyp.yunzutai.com:22744/Uploads/Files/2021/12/10/115e6854e0ac4449ba453714d6d4a2a4.svg" alt="Smiley face" width="64" height="64">
<img v-else src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/pic/hui.svg" alt="Smiley face" width="64" height="64">
</div>
<div style="z-index:1; position:absolute;left:70px;top:0px;">
<img v-if="device.valueC17 === '1'" src="https://shyp.yunzutai.com:22744/Uploads/Files/2021/12/10/3e6ba57ec6ef4c299524094e2e26e4f3.svg" alt="Smiley face" width="64" height="64">
<img v-else src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/pic/hui.svg" alt="Smiley face" width="64" height="64">
</div>
<input name="RichTextBox110" type="text" id="RichTextBox110" v-model="device.valueC" style="width:160px;height: 80px;z-index:129;position:absolute;top: 820px;left:761px;font-size:32px; " />
<span id="Lable123" style="width:700px;height: 63px;z-index:126;position:absolute;top: 840px;left:0px;font-size:32px;">{{device.NameC}}</span>
<input name="RichTextBox111" type="text" id="RichTextBox111" v-model="device.valueC10" style="width:160px;height: 80px;z-index:129;position:absolute;top: 920px;left:761px;font-size:32px;" />
<span id="Lable124" style="width:700px;height: 63px;z-index:126;position:absolute;top: 930px;left:0px;font-size:32px;">{{device.NameC10}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.valueC11" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1020px;left:761px;font-size:32px;" />
<span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1030px;left:0px;font-size:32px;">{{device.NameC11}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.valueC12" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1120px;left:761px;font-size:32px;" />
<span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1130px;left:0px;font-size:32px;">{{device.NameC12}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.valueC17" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1220px;left:761px;font-size:32px;" />
<span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1230px;left:0px;font-size:32px;">{{device.NameC17}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.valueC18" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1320px;left:761px;font-size:32px;" />
<span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1330px;left:0px;font-size:32px;">{{device.NameC18}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.valueC13" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1420px;left:700px;font-size:32px;" />
<span id="Lable125" style="width:300px;height: 63px;z-index:126;position:absolute;top: 1430px;left:0px;font-size:32px;">{{device.NameC15}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.valueC14" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1420px;left:470px;font-size:32px;" />
<span id="Lable125" style="width:40px;height: 63px;z-index:126;position:absolute;top: 1430px;left:390px;font-size:32px;">天</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.valueC15" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1420px;left:200px;font-size:32px;" />
<span id="Lable125" style="width:40px;height: 63px;z-index:126;position:absolute;top: 1430px;left:640px;font-size:32px;">时</span>
<span id="Lable125" style="width:40px;height: 63px;z-index:126;position:absolute;top: 1430px;left:880px;font-size:32px;">分</span>
}
<div style="top: 1600px;">
<div class="button3 btn1" >
<span>巡检</span>
</div>
<div class="button3 btn2" >
<span>维保</span>
</div>
<div class="button3 btn3" >
<span>维修</span>
</div>
</div>
</div>
@*<input type="button" id="sendButton" value="发送消息" />*@
@* <p>模拟推送消息：</p>
<div>
<textarea v-model="pushContent"></textarea>
<button @@click="PushMsg">发布通告</button>
</div>
<span>最新的消息通知：</span>{{message}}
<p>接到的消息通知：</p>
<div>
{{msgs}}
</div>
<p>模拟实时更新数据：</p>
<div>
<span>状态1:</span><span>{{dataInfo.status1}}</span>
<br>
<span>状态2:</span><span>{{dataInfo.status2}}</span>
</div>*@
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../wwwroot/signalr/signalr.js"></script>
<script src="../wwwroot/signalr/hubs"></script>
<script>
var app = new Vue({
el: "#app",
created: function () {
//document.getElementById("sendButton").disabled = true; http://114.115.174.174:80/DigitalEnvironmentallyWebScadaTest/
this.connection = new signalR.HubConnectionBuilder()
.withUrl("https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/myhub",{
skipNegotiation: true, // 关键
transport: signalR.HttpTransportType.WebSockets // 关键
})
//.withUrl("http://localhost:5000/myhub")
.build();
this.connection.on("showmsg", this.ShowMsg);
this.connection.on("updatedata", this.UpdateData);
this.connection.on("updatedevicedata", this.UpdateDeviceData);
this.connection.start();
//this.connection.start().then(function () {
// document.getElementById("sendButton").disabled = false;
//}).catch(function (err) {
// document.getElementById("sendButton").disabled = false;
// return console.error(err.toString());
//});
},
data: {
flageRed:true,
flageGreen:true,
device: {
valueC: "123456789", NameC: "前处理过滤箱电子差压计D3实际值",
valueC10: "123456789", NameC10: "前处理过滤箱电子差压计D3实际值",
valueC11: "123456789", NameC11: "前处理过滤箱电子差压计D3实际值",
valueC12: "123456789", NameC12: "前处理过滤箱电子差压计D3实际值",
valueC13: "123456789", NameC13: "前处理过滤箱电子差压计D3实际值",
valueC14: "123456789", NameC14: "前处理过滤箱电子差压计D3实际值",
valueC15: "123456789", NameC15: "前处理过滤箱电子差压计D3实际值",
valueC16: "123456789", NameC16: "前处理过滤箱电子差压计D3实际值",
valueC17: "123456789", NameC17: "前处理过滤箱电子差压计D3实际值",
valueC18: "123456789", NameC18: "前处理过滤箱电子差压计D3实际值",
valueC19: "123456789", NameC19: "前处理过滤箱电子差压计D3实际值",
value20: "123456789", Name20: "前处理过滤箱电子差压计D3实际值",
value10: "123456789", Name10: "前处理过滤箱电子差压计D3实际值",
value21: "123456789", Name21: "前处理过滤箱电子差压计D3实际值",
value22: "123456789", Name22: "前处理过滤箱电子差压计D3实际值",
value23: "123456789", Name23: "前处理过滤箱电子差压计D3实际值",
value24: "123456789", Name24: "前处理过滤箱电子差压计D3实际值",
value25: "123456789", Name25: "前处理过滤箱电子差压计D3实际值",
value26: "123456789", Name26: "前处理过滤箱电子差压计D3实际值",
value27: "123456789", Name27: "前处理过滤箱电子差压计D3实际值",
value28: "123456789", Name28: "前处理过滤箱电子差压计D3实际值",
value29: "123456789", Name29: "前处理过滤箱电子差压计D3实际值"
},
message: "HelloVue",
connection: null,
msgs: [],
dataInfo: { status1: "off", status2: "off" },
pushContent: ""
},
methods: {
ShowMsg: function (msgInfo) {
//this.message = msgInfo.title + ":" + msgInfo.msgContent;
//this.msgs.push(this.message);
},
PushMsg: function () {
that = this;
axios.get('http://localhost:5000/WeatherForecast/PushMsg',
{ params: { content: that.pushContent } })
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
UpdateDeviceData: function (dataMsg) {
this.device.valueC = dataMsg.valueC;
this.device.NameC = dataMsg.nameC;
this.device.valueC10 = dataMsg.valueC10;
this.device.NameC10 = dataMsg.nameC10;
this.device.valueC11 = dataMsg.valueC11;
this.device.NameC11 = dataMsg.nameC11;
this.device.valueC12 = dataMsg.valueC12;
this.device.NameC12 = dataMsg.nameC12;
this.device.valueC13 = dataMsg.valueC13;
this.device.NameC13 = dataMsg.nameC13;
this.device.valueC14 = dataMsg.valueC14;
this.device.NameC14 = dataMsg.nameC14;
this.device.valueC15 = dataMsg.valueC15;
this.device.NameC15 = dataMsg.nameC15;
this.device.valueC16 = dataMsg.valueC16;
this.device.NameC16 = dataMsg.nameC16;
this.device.valueC17 = dataMsg.valueC17;
this.device.NameC17 = dataMsg.nameC17;
this.device.valueC18 = dataMsg.valueC18;
this.device.NameC18 = dataMsg.nameC18;
this.device.valueC19 = dataMsg.valueC19;
this.device.NameC19 = dataMsg.nameC19;
this.device.value20 = dataMsg.value20;
this.device.Name20 = dataMsg.name20;
this.device.value21 = dataMsg.value21;
this.device.Name21 = dataMsg.name21;
this.device.value22 = dataMsg.value22;
this.device.Name22 = dataMsg.name22;
this.device.value23 = dataMsg.value23;
this.device.Name23 = dataMsg.name23;
this.device.value24 = dataMsg.value24;
this.device.Name24 = dataMsg.name24;
this.device.value25 = dataMsg.value25;
this.device.Name25 = dataMsg.name25;
this.device.value26 = dataMsg.value26;
this.device.Name26 = dataMsg.name26;
this.device.value27 = dataMsg.value27;
this.device.Name27 = dataMsg.name27;
this.device.value28 = dataMsg.value28;
this.device.Name28 = dataMsg.name28;
this.device.value29 = dataMsg.value29;
this.device.Name29 = dataMsg.name29;
},
UpdateData: function (dataMsg) {
//alert(DeviceValueModel);
//this.dataInfo = dataMsg;
//this.device = DeviceValueModel;
//this.device.Value = dataMsg.Value;
//this.device.Name = dataMsg.Name;
//this.message = dataMsg;
}
}
});
</script>
<style>
.breadcrumb{
font-size: 33px;
}
.button3 {
z-index:126;
position:absolute;
top: 1600px;
/*left:0px;*/
width: 200px;
height: 70px;
line-height: 60px;
background-color: #2e82ff;
color: #ffffff;
font-size: 50px;
text-align: center;
border-radius: 27px;
position: relative;
}
.button3::before {
/*left: 0px;*/
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);
background-size: 200%;
animation: wipes 1s infinite;
}
.btn1 { position: absolute;top: 1600px;left:10px; }
.btn2 { position: absolute;top: 1600px;left:380px;}
.btn3 { position: absolute;top: 1600px;left:760px; }
@@keyframes wipes {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
</style>