@*
*@
@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">
@{
//<button @@click="change()">点击改变背景颜色</button>
// <div class="nav-tabs">
//<a href="javascript:void(0);" :class="{current: isShowAccountLogin }">帐号登录</a>
//<span class="line"></span>
//<a href="javascript:void(0);" :class="{current: !isShowAccountLogin }">扫码登录</a>
//</div>
}
@* @Html.Raw(Model.Html);*@
<div class="app" style="background-color={{bgc}}"></div>
<div :style="{backgroundColor:bgc}">{{bgc}}</div>
<input name="RichTextBox110" type="text" id="RichTextBox110" v-model="device.valueD" :style="{backgroundColor:device.ColourD}" style="width:160px;height: 80px;z-index:129;position:absolute;top: 820px;left:761px;font-size:32px; " />
<div style="top: 1600px;">
<div class="button3 btn1" >
<span>巡检</span>
</div>
<div class="button3 btn2" >
<span>维保</span>
</div>
<div style="background-color: {{bgc}}">{{bgc}}</div>
<div style="background-color={{bgc}}" class="button3 btn3" >
<span>维修</span>
</div>
</div>
</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="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/signalr/signalr.js"></script>
<script src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/signalr/hubs"></script>
<script>
var app = new Vue({
el: "#app",
created: function () {
//document.getElementById('#demo').style.width = '100%';
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("demo").innerHTML="Hello World";
//document.getElementById("RichTextBox110").disabled = false;
//document.getElementById('RichTextBox110').style.color='#f00';
//document.getElementById('#demo').style.width = '100%';
}).catch(function (err) {
//document.getElementById("sendButton").disabled = false;
return console.error(err.toString());
});
},
data: {
bgc: "red",
isShowAccountLogin: true,
//动态背景图片
leftStyle: { background: "#AF7F3F" },
flageRed:true,
flageGreen:true,
device: {
valueD: "123456789", NameD: "前处理过滤箱电子差压计D3实际值",ColourD:"Red",
valueD10: "123456789", NameD10: "前处理过滤箱电子差压计D3实际值",
valueD11: "123456789", NameD11: "前处理过滤箱电子差压计D3实际值",
valueD12: "123456789", NameD12: "前处理过滤箱电子差压计D3实际值",
valueD13: "123456789", NameD13: "前处理过滤箱电子差压计D3实际值",
valueD14: "123456789", NameD14: "前处理过滤箱电子差压计D3实际值",
valueD15: "123456789", NameD15: "前处理过滤箱电子差压计D3实际值",
valueD16: "123456789", NameD16: "前处理过滤箱电子差压计D3实际值",
valueD17: "123456789", NameD17: "前处理过滤箱电子差压计D3实际值",
valueD18: "123456789", NameD18: "前处理过滤箱电子差压计D3实际值",
valueD19: "123456789", NameD19: "前处理过滤箱电子差压计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: {
change() {
let bgc = this.bgc == "red" ? "blue" : "red";
this.bgc = bgc;
},
click_account_login () {
this.isShowAccountLogin = true;
},
click_code_login () {
this.isShowAccountLogin = false;
},
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.valueD = dataMsg.valueD;
this.device.NameD = dataMsg.nameD;
this.device.valueD10 = dataMsg.valueD10;
this.device.NameD10 = dataMsg.nameD10;
this.device.valueD11 = dataMsg.valueD11;
this.device.NameD11 = dataMsg.nameD11;
this.device.valueD12 = dataMsg.valueD12;
this.device.NameD12 = dataMsg.nameD12;
this.device.valueD13 = dataMsg.valueD13;
this.device.NameD13 = dataMsg.nameD13;
this.device.valueD14 = dataMsg.valueD14;
this.device.NameD14 = dataMsg.nameD14;
this.device.valueD15 = dataMsg.valueD15;
this.device.NameD15 = dataMsg.nameD15;
this.device.valueD16 = dataMsg.valueD16;
this.device.NameD16 = dataMsg.nameD16;
this.device.valueD17 = dataMsg.valueD17;
this.device.NameD17 = dataMsg.nameD17;
this.device.valueD18 = dataMsg.valueD18;
this.device.NameD18 = dataMsg.nameD18;
this.device.valueD19 = dataMsg.valueD19;
this.device.NameD19 = dataMsg.nameD19;
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;
//this.document.getElementById("#RichTextBox110").style.background="blue";
// document.getElementById('#demo').style.width = '100%';
// document.getElementById("demo").innerHTML="Hello World";
let bgc = this.bgc == "red" ? "blue" : "red";
this.bgc = bgc;
},
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>
<style lang="less" scoped>
.app {
width: 100%;
height: 300px;
border:1px soild;
}
</style>