yandaniu
/
qlhb


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