yandaniu
/
qlhb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							@*
    
*@
@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>