@*
*@
@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">
@{
if (Model.Id !=null && Model.Id =="1")
{
<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/汽轮机厂S.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="./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.value19 === '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="./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.value17 === '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="./pic/hui.svg" alt="Smiley face" width="64" height="64">
</div>
<input name="RichTextBox110" type="text" id="RichTextBox110" v-model="device.value" 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.Name}}</span>
<input name="RichTextBox111" type="text" id="RichTextBox111" v-model="device.value10" 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.Name10}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value11" 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.Name11}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value12" 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.Name12}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value17" 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.Name17}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value18" 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.Name18}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value13" 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.Name15}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value14" 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.value15" 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>
//<input name="RichTextBox110" type="text" id="RichTextBox110" v-model="device.value" style="width:160px;height: 80px;z-index:129;position:absolute;top: 820px;left:191px;font-size:32px; " />
//<span id="Lable123" style="width:162px;height: 13px;z-index:126;position:absolute;top: 800px;left:0px;font-size:32px;">{{device.Name}}</span>
//<input name="RichTextBox111" type="text" id="RichTextBox111" v-model="device.value10" style="width:120px;height: 80px;z-index:129;position:absolute;top: 820px;left:561px;font-size:32px;" />
//<span id="Lable124" style="width:142px;height: 13px;z-index:126;position:absolute;top: 800px;left:380px;font-size:32px;">{{device.Name10}}</span>
//<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value11" style="width:160px;height: 80px;z-index:129;position:absolute;top: 820px;left:871px;font-size:32px;" />
//<span id="Lable125" style="width:152px;height: 13px;z-index:126;position:absolute;top: 800px;left:700px;font-size:32px;">{{device.Name11}}</span>
//<input name="RichTextBox113" type="text" id="RichTextBox113" v-model="device.value12" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1020px;left:191px;font-size:32px;" />
//<span id="Lable126" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1000px;left:0px;font-size:32px;">{{device.Name12}}</span>
//<input name="RichTextBox114" type="text" id="RichTextBox114" v-model="device.value13" style="width:120px;height: 80px;z-index:129;position:absolute;top: 1020px;left:561px;font-size:32px;" />
//<span id="Lable127" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:380px;font-size:32px;">{{device.Name13}}</span>
//<input name="RichTextBox115" type="text" id="RichTextBox115" v-model="device.value14" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1020px;left:871px;font-size:32px;" />
//<span id="Lable128" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:700px;font-size:32px;">{{device.Name14}}</span>
// <input name="RichTextBox116" type="text" id="RichTextBox116" v-model="device.value15" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1220px;left:191px;font-size:32px;" />
//<span id="Lable116" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1200px;left:0px;font-size:32px;">{{device.Name15}}</span>
//<input name="RichTextBox117" type="text" id="RichTextBox117" v-model="device.value16" style="width:120px;height: 80px;z-index:129;position:absolute;top: 1220px;left:561px;font-size:32px;" />
//<span id="Lable117" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:380px;font-size:32px;">{{device.Name16}}</span>
//<input name="RichTextBox118" type="text" id="RichTextBox118" v-model="device.value17" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1220px;left:871px;font-size:32px;" />
//<span id="Lable118" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:700px;font-size:32px;">{{device.Name17}}</span>
}
else
{
<img style="border-width:0px;width:1024px;height:768px; z-index:0; position:absolute;left:25px;top:25px;"
src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/pic/安徽海立S.png"
id="ccb" />
<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:1; position:absolute;left:65px;top:0px;">
<img src="https://shyp.yunzutai.com:22744/Uploads/Files/2021/12/10/3e6ba57ec6ef4c299524094e2e26e4f3.svg" alt="Smiley face" width="64" height="64">
</div>
<input name="RichTextBox110" type="text" id="RichTextBox110" v-model="device.value20" style="width:160px;height: 80px;z-index:129;position:absolute;top: 820px;left:191px;font-size:32px; " />
<span id="Lable123" style="width:162px;height: 13px;z-index:126;position:absolute;top: 800px;left:0px;font-size:32px;">{{device.Name20}}</span>
<input name="RichTextBox111" type="text" id="RichTextBox111" v-model="device.value21" style="width:120px;height: 80px;z-index:129;position:absolute;top: 820px;left:561px;font-size:32px;" />
<span id="Lable124" style="width:142px;height: 13px;z-index:126;position:absolute;top: 800px;left:380px;font-size:32px;">{{device.Name21}}</span>
<input name="RichTextBox112" type="text" id="RichTextBox112" v-model="device.value22" style="width:160px;height: 80px;z-index:129;position:absolute;top: 820px;left:871px;font-size:32px;" />
<span id="Lable125" style="width:152px;height: 13px;z-index:126;position:absolute;top: 800px;left:700px;font-size:32px;">{{device.Name22}}</span>
<input name="RichTextBox113" type="text" id="RichTextBox113" v-model="device.value23" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1020px;left:191px;font-size:32px;" />
<span id="Lable126" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1000px;left:0px;font-size:32px;">{{device.Name23}}</span>
<input name="RichTextBox114" type="text" id="RichTextBox114" v-model="device.value24" style="width:120px;height: 80px;z-index:129;position:absolute;top: 1020px;left:561px;font-size:32px;" />
<span id="Lable127" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:380px;font-size:32px;">{{device.Name24}}</span>
<input name="RichTextBox115" type="text" id="RichTextBox115" v-model="device.value25" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1020px;left:871px;font-size:32px;" />
<span id="Lable128" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:700px;font-size:32px;">{{device.Name25}}</span>
<input name="RichTextBox116" type="text" id="RichTextBox116" v-model="device.value26" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1220px;left:191px;font-size:32px;" />
<span id="Lable116" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1200px;left:0px;font-size:32px;">{{device.Name26}}</span>
<input name="RichTextBox117" type="text" id="RichTextBox117" v-model="device.value27" style="width:120px;height: 80px;z-index:129;position:absolute;top: 1220px;left:561px;font-size:32px;" />
<span id="Lable117" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:380px;font-size:32px;">{{device.Name27}}</span>
<input name="RichTextBox118" type="text" id="RichTextBox118" v-model="device.value28" style="width:160px;height: 80px;z-index:129;position:absolute;top: 1220px;left:871px;font-size:32px;" />
<span id="Lable118" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:700px;font-size:32px;">{{device.Name28}}</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="signalr/signalr.js"></script>
<script src="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: {
value: "123456789", Name: "前处理过滤箱电子差压计D3实际值",
value10: "123456789", Name10: "前处理过滤箱电子差压计D3实际值",
value11: "123456789", Name11: "前处理过滤箱电子差压计D3实际值",
value12: "123456789", Name12: "前处理过滤箱电子差压计D3实际值",
value13: "123456789", Name13: "前处理过滤箱电子差压计D3实际值",
value14: "123456789", Name14: "前处理过滤箱电子差压计D3实际值",
value15: "123456789", Name15: "前处理过滤箱电子差压计D3实际值",
value16: "123456789", Name16: "前处理过滤箱电子差压计D3实际值",
value17: "123456789", Name17: "前处理过滤箱电子差压计D3实际值",
value18: "123456789", Name18: "前处理过滤箱电子差压计D3实际值",
value19: "123456789", Name19: "前处理过滤箱电子差压计D3实际值",
valueB: "123456789", NameB: "前处理过滤箱电子差压计D3实际值",
valueB10: "123456789", NameB10: "前处理过滤箱电子差压计D3实际值",
valueB11: "123456789", NameB11: "前处理过滤箱电子差压计D3实际值",
valueB12: "123456789", NameB12: "前处理过滤箱电子差压计D3实际值",
valueB13: "123456789", NameB13: "前处理过滤箱电子差压计D3实际值",
valueB14: "123456789", NameB14: "前处理过滤箱电子差压计D3实际值",
valueB15: "123456789", NameB15: "前处理过滤箱电子差压计D3实际值",
valueB16: "123456789", NameB16: "前处理过滤箱电子差压计D3实际值",
valueB17: "123456789", NameB17: "前处理过滤箱电子差压计D3实际值",
valueB18: "123456789", NameB18: "前处理过滤箱电子差压计D3实际值",
valueB19: "123456789", NameB19: "前处理过滤箱电子差压计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.value = dataMsg.value;
this.device.Name = dataMsg.name;
this.device.value10 = dataMsg.value10;
this.device.Name10 = dataMsg.name10;
this.device.value11 = dataMsg.value11;
this.device.Name11 = dataMsg.name11;
this.device.value12 = dataMsg.value12;
this.device.Name12 = dataMsg.name12;
this.device.value13 = dataMsg.value13;
this.device.Name13 = dataMsg.name13;
this.device.value14 = dataMsg.value14;
this.device.Name14 = dataMsg.name14;
this.device.value15 = dataMsg.value15;
this.device.Name15 = dataMsg.name15;
this.device.value16 = dataMsg.value16;
this.device.Name16 = dataMsg.name16;
this.device.value17 = dataMsg.value17;
this.device.Name17 = dataMsg.name17;
this.device.value18 = dataMsg.value18;
this.device.Name18 = dataMsg.name18;
this.device.value19 = dataMsg.value19;
this.device.Name19 = dataMsg.name19;
this.device.valueB = dataMsg.valueb;
this.device.NameB = dataMsg.nameb;
this.device.valueB10 = dataMsg.valueb10;
this.device.NameB10 = dataMsg.nameb10;
this.device.valueB11 = dataMsg.valueb11;
this.device.NameB11 = dataMsg.nameb11;
this.device.valueB12 = dataMsg.valueb12;
this.device.NameB12 = dataMsg.nameb12;
this.device.valueB13 = dataMsg.valueb13;
this.device.NameB13 = dataMsg.nameb13;
this.device.valueB14 = dataMsg.valueb14;
this.device.NameB14 = dataMsg.nameb14;
this.device.valueB15 = dataMsg.valueb15;
this.device.NameB15 = dataMsg.nameb15;
this.device.valueB16 = dataMsg.valueb16;
this.device.NameB16 = dataMsg.nameb16;
this.device.valueB17 = dataMsg.valueb17;
this.device.NameB17 = dataMsg.nameb17;
this.device.valueB18 = dataMsg.valueb18;
this.device.NameB18 = dataMsg.nameb18;
this.device.valueB19 = dataMsg.valueb19;
this.device.NameB19 = dataMsg.nameb19;
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>