Home Explore Help
Register Sign In
yandaniu
/
qlhb
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 7fcf3ab86e
Branches Tags
qlhb
/
Ropin.Environmentally.WebScada
/
Views
/
Device
/
Index.cshtml

Index.cshtml 23 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385 
  1. @*
    2. 

  2.     
    3. 

  3. *@
    4. 

  4. @model Ropin.Environmentally.WebScada.DeviceValueModel;
    5. 

  5. @{
    6. 

  6. }
    7. 

  7. <body>
    8. 

  8.     <div class="breadcrumb" id="div-canvas" style="position:relative; top:0px;left:0px; background-color:White;">
    9. 

  9.         <div id="app">
    10. 

  10.         @{
    11. 

  11.             if (Model.Id !=null && Model.Id =="1")
    12. 

  12.             {
    13. 

  13. <img style="border-width:0px;width:1024px;height:768px; z-index:0; position:absolute;left:0px;top:0px;"
    14. 

  14.              src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/pic/汽轮机厂S.jpg"
    15. 

  15.              id="ccc" />
    16. 

  16.          //<div v-if="device.value19 === '1'" style="z-index:1; position:absolute;left:0px;top:0px;">
    17. 

  17.          //    <img src="https://shyp.yunzutai.com:22744/Uploads/Files/2021/12/10/115e6854e0ac4449ba453714d6d4a2a4.svg"  alt="Smiley face" width="64" height="64">
    18. 

  18.          //    </div>
    19. 

  19.          //  <div v-if="device.value19 === '0'" style="z-index:2; position:absolute;left:0px;top:0px;">
    20. 

  20.          //  <img src="./pic/hui.svg" alt="Smiley face" width="64" height="64">
    21. 

  21.          //  </div>
    22. 

  22.         <div style="z-index:1; position:absolute;left:0px;top:0px;">
    23. 

  23.              <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">
    24. 

  24.              <img v-else src="./pic/hui.svg" alt="Smiley face" width="64" height="64">
    25. 

  25.          </div>
    26. 

  26.          <div style="z-index:1; position:absolute;left:70px;top:0px;">
    27. 

  27.              <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">
    28. 

  28.              <img v-else src="./pic/hui.svg" alt="Smiley face" width="64" height="64">
    29. 

  29.          </div>
    30. 

  30. 

  31.         <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; " />
    32. 

  32.         <span id="Lable123" style="width:700px;height: 63px;z-index:126;position:absolute;top: 840px;left:0px;font-size:32px;">{{device.Name}}</span>
    33. 

  33.         <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;" />
    34. 

  34.         <span id="Lable124" style="width:700px;height: 63px;z-index:126;position:absolute;top: 930px;left:0px;font-size:32px;">{{device.Name10}}</span>
    35. 

  35.         <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;" />
    36. 

  36.         <span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1030px;left:0px;font-size:32px;">{{device.Name11}}</span>
    37. 

  37. 

  38.         <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;" />
    39. 

  39.         <span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1130px;left:0px;font-size:32px;">{{device.Name12}}</span>
    40. 

  40.         <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;" />
    41. 

  41.         <span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1230px;left:0px;font-size:32px;">{{device.Name17}}</span>
    42. 

  42.         <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;" />
    43. 

  43.         <span id="Lable125" style="width:700px;height: 63px;z-index:126;position:absolute;top: 1330px;left:0px;font-size:32px;">{{device.Name18}}</span>
    44. 

  44.         <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;" />
    45. 

  45.         <span id="Lable125" style="width:300px;height: 63px;z-index:126;position:absolute;top: 1430px;left:0px;font-size:32px;">{{device.Name15}}</span>
    46. 

  46.         <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;" />
    47. 

  47.         <span id="Lable125" style="width:40px;height: 63px;z-index:126;position:absolute;top: 1430px;left:390px;font-size:32px;">天</span>
    48. 

  48.         <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;" />
    49. 

  49.         <span id="Lable125" style="width:40px;height: 63px;z-index:126;position:absolute;top: 1430px;left:640px;font-size:32px;">时</span>
    50. 

  50.                     <span id="Lable125" style="width:40px;height: 63px;z-index:126;position:absolute;top: 1430px;left:880px;font-size:32px;">分</span>
    51. 

  51. 

  52.                     //<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; " />
    53. 

  53.                     //<span id="Lable123" style="width:162px;height: 13px;z-index:126;position:absolute;top: 800px;left:0px;font-size:32px;">{{device.Name}}</span>
    54. 

  54.                     //<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;" />
    55. 

  55.                     //<span id="Lable124" style="width:142px;height: 13px;z-index:126;position:absolute;top: 800px;left:380px;font-size:32px;">{{device.Name10}}</span>
    56. 

  56.                     //<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;" />
    57. 

  57.                     //<span id="Lable125" style="width:152px;height: 13px;z-index:126;position:absolute;top: 800px;left:700px;font-size:32px;">{{device.Name11}}</span>
    58. 

  58. 

  59.                     //<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;" />
    60. 

  60.                     //<span id="Lable126" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1000px;left:0px;font-size:32px;">{{device.Name12}}</span>
    61. 

  61.                     //<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;" />
    62. 

  62.                     //<span id="Lable127" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:380px;font-size:32px;">{{device.Name13}}</span>
    63. 

  63.                     //<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;" />
    64. 

  64.                     //<span id="Lable128" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:700px;font-size:32px;">{{device.Name14}}</span>
    65. 

  65. 

  66.                     // <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;" />
    67. 

  67.                     //<span id="Lable116" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1200px;left:0px;font-size:32px;">{{device.Name15}}</span>
    68. 

  68.                     //<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;" />
    69. 

  69.                     //<span id="Lable117" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:380px;font-size:32px;">{{device.Name16}}</span>
    70. 

  70.                     //<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;" />
    71. 

  71.                     //<span id="Lable118" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:700px;font-size:32px;">{{device.Name17}}</span>
    72. 

  72.                 }
    73. 

  73.             else
    74. 

  74.             {
    75. 

  75.                 <img style="border-width:0px;width:1024px;height:768px; z-index:0; position:absolute;left:25px;top:25px;"
    76. 

  76.              src="https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/wwwroot/pic/安徽海立S.png"
    77. 

  77.              id="ccb" />
    78. 

  78.              <div v-if="device.value19 === 1" style="z-index:1; position:absolute;left:0px;top:0px;">
    79. 

  79.              <img src="https://shyp.yunzutai.com:22744/Uploads/Files/2021/12/10/115e6854e0ac4449ba453714d6d4a2a4.svg"  alt="Smiley face" width="64" height="64">
    80. 

  80.              </div>
    81. 

  81.            <div v-if="device.value19 === 0" style="z-index:1; position:absolute;left:65px;top:0px;">
    82. 

  82.            <img src="https://shyp.yunzutai.com:22744/Uploads/Files/2021/12/10/3e6ba57ec6ef4c299524094e2e26e4f3.svg" alt="Smiley face" width="64" height="64">
    83. 

  83.            </div>
    84. 

  84.           
    85. 

  85.                  <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; " />
    86. 

  86.         <span id="Lable123" style="width:162px;height: 13px;z-index:126;position:absolute;top: 800px;left:0px;font-size:32px;">{{device.Name20}}</span>
    87. 

  87.         <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;" />
    88. 

  88.         <span id="Lable124" style="width:142px;height: 13px;z-index:126;position:absolute;top: 800px;left:380px;font-size:32px;">{{device.Name21}}</span>
    89. 

  89.         <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;" />
    90. 

  90.         <span id="Lable125" style="width:152px;height: 13px;z-index:126;position:absolute;top: 800px;left:700px;font-size:32px;">{{device.Name22}}</span>
    91. 

  91.         
    92. 

  92.         <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;" />
    93. 

  93.         <span id="Lable126" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1000px;left:0px;font-size:32px;">{{device.Name23}}</span>
    94. 

  94.         <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;" />
    95. 

  95.         <span id="Lable127" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:380px;font-size:32px;">{{device.Name24}}</span>
    96. 

  96.         <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;" />
    97. 

  97.         <span id="Lable128" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1000px;left:700px;font-size:32px;">{{device.Name25}}</span>
    98. 

  98. 

  99.          <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;" />
    100. 

  100.         <span id="Lable116" style="width:152px;height: 13px;z-index:126;position:absolute;top: 1200px;left:0px;font-size:32px;">{{device.Name26}}</span>
    101. 

  101.         <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;" />
    102. 

  102.         <span id="Lable117" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:380px;font-size:32px;">{{device.Name27}}</span>
    103. 

  103.         <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;" />
    104. 

  104.         <span id="Lable118" style="width:162px;height: 13px;z-index:126;position:absolute;top: 1200px;left:700px;font-size:32px;">{{device.Name28}}</span>
    105. 

  105.             }
    106. 

  106.         }
    107. 

  107.     <div style="top: 1600px;">
    108. 

  108.     <div class="button3 btn1" >
    109. 

  109.     <span>巡检</span>
    110. 

  110.      </div>
    111. 

  111. 

  112.          <div class="button3 btn2" >
    113. 

  113.     <span>维保</span>
    114. 

  114.      </div>
    115. 

  115. 

  116.          <div class="button3 btn3" >
    117. 

  117.     <span>维修</span>
    118. 

  118.         </div>
    119. 

  119.     </div>
    120. 

  120. 

  121.     </div>
    122. 

  122.     
    123. 

  123.     
    124. 

  124.        
    125. 

  125.        
    126. 

  126. 

  127.      
    128. 

  128.         @*<input type="button" id="sendButton" value="发送消息" />*@
    129. 

  129. 

  130.        @* <p>模拟推送消息：</p>
    131. 

  131.         <div>
    132. 

  132.             <textarea v-model="pushContent"></textarea>
    133. 

  133.             <button @@click="PushMsg">发布通告</button>
    134. 

  134.         </div>
    135. 

  135.         <span>最新的消息通知：</span>{{message}}
    136. 

  136.             <p>接到的消息通知：</p>
    137. 

  137.             <div>
    138. 

  138.                 {{msgs}}
    139. 

  139.             </div>
    140. 

  140. 

  141.             <p>模拟实时更新数据：</p>
    142. 

  142.             <div>
    143. 

  143.                 <span>状态1:</span><span>{{dataInfo.status1}}</span>
    144. 

  144.                 <br>
    145. 

  145.                 <span>状态2:</span><span>{{dataInfo.status2}}</span>
    146. 

  146.             </div>*@
    147. 

  147. </div>
    148. 

  148. </body>
    149. 

  149. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    150. 

  150. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    151. 

  151. <script src="signalr/signalr.js"></script>
    152. 

  152. <script src="signalr/hubs"></script> 
    153. 

  153. 

  154. <script>
    155. 

  155.     var app = new Vue({
    156. 

  156.         el: "#app",
    157. 

  157.         created: function () {
    158. 

  158.             
    159. 

  159.             //document.getElementById("sendButton").disabled = true; http://114.115.174.174:80/DigitalEnvironmentallyWebScadaTest/
    160. 

  160.             this.connection = new signalR.HubConnectionBuilder()
    161. 

  161.                 .withUrl("https://www.ropiniot.com/DigitalEnvironmentallyWebScadaTest/myhub",{
    162. 

  162. 	            skipNegotiation: true,  		// 关键
    163. 

  163. 	            transport: signalR.HttpTransportType.WebSockets		// 关键
    164. 

  164. 	      }) 
    165. 

  165.                 //.withUrl("http://localhost:5000/myhub") 
    166. 

  166.                 .build();
    167. 

  167.             this.connection.on("showmsg", this.ShowMsg);
    168. 

  168.             this.connection.on("updatedata", this.UpdateData);
    169. 

  169.             this.connection.on("updatedevicedata", this.UpdateDeviceData);
    170. 

  170.             this.connection.start();
    171. 

  171.   
    172. 

  172. //this.connection.start().then(function () {
    173. 

  173. //    document.getElementById("sendButton").disabled = false;
    174. 

  174. //}).catch(function (err) {
    175. 

  175. //    document.getElementById("sendButton").disabled = false;
    176. 

  176. //    return console.error(err.toString());
    177. 

  177. //});
    178. 

  178. 

  179.            
    180. 

  180.         },
    181. 

  181.         data: {
    182. 

  182.             flageRed:true,
    183. 

  183.             flageGreen:true,
    184. 

  184.             device: {
    185. 

  185.                 value: "123456789", Name: "前处理过滤箱电子差压计D3实际值",
    186. 

  186.                 value10: "123456789", Name10: "前处理过滤箱电子差压计D3实际值",
    187. 

  187.                 value11: "123456789", Name11: "前处理过滤箱电子差压计D3实际值",
    188. 

  188.                 value12: "123456789", Name12: "前处理过滤箱电子差压计D3实际值",
    189. 

  189.                 value13: "123456789", Name13: "前处理过滤箱电子差压计D3实际值",
    190. 

  190.                 value14: "123456789", Name14: "前处理过滤箱电子差压计D3实际值",
    191. 

  191.                 value15: "123456789", Name15: "前处理过滤箱电子差压计D3实际值",
    192. 

  192.                 value16: "123456789", Name16: "前处理过滤箱电子差压计D3实际值",
    193. 

  193.                 value17: "123456789", Name17: "前处理过滤箱电子差压计D3实际值",
    194. 

  194.                 value18: "123456789", Name18: "前处理过滤箱电子差压计D3实际值",
    195. 

  195.                 value19: "123456789", Name19: "前处理过滤箱电子差压计D3实际值",
    196. 

  196.             
    197. 

  197.                 valueB: "123456789", NameB: "前处理过滤箱电子差压计D3实际值",
    198. 

  198.                 valueB10: "123456789", NameB10: "前处理过滤箱电子差压计D3实际值",
    199. 

  199.                 valueB11: "123456789", NameB11: "前处理过滤箱电子差压计D3实际值",
    200. 

  200.                 valueB12: "123456789", NameB12: "前处理过滤箱电子差压计D3实际值",
    201. 

  201.                 valueB13: "123456789", NameB13: "前处理过滤箱电子差压计D3实际值",
    202. 

  202.                 valueB14: "123456789", NameB14: "前处理过滤箱电子差压计D3实际值",
    203. 

  203.                 valueB15: "123456789", NameB15: "前处理过滤箱电子差压计D3实际值",
    204. 

  204.                 valueB16: "123456789", NameB16: "前处理过滤箱电子差压计D3实际值",
    205. 

  205.                 valueB17: "123456789", NameB17: "前处理过滤箱电子差压计D3实际值",
    206. 

  206.                 valueB18: "123456789", NameB18: "前处理过滤箱电子差压计D3实际值",
    207. 

  207.                 valueB19: "123456789", NameB19: "前处理过滤箱电子差压计D3实际值",
    208. 

  208. 

  209.                 value20: "123456789", Name20: "前处理过滤箱电子差压计D3实际值",
    210. 

  210.                 value10: "123456789", Name10: "前处理过滤箱电子差压计D3实际值",
    211. 

  211.                 value21: "123456789", Name21: "前处理过滤箱电子差压计D3实际值",
    212. 

  212.                 value22: "123456789", Name22: "前处理过滤箱电子差压计D3实际值",
    213. 

  213.                 value23: "123456789", Name23: "前处理过滤箱电子差压计D3实际值",
    214. 

  214.                 value24: "123456789", Name24: "前处理过滤箱电子差压计D3实际值",
    215. 

  215.                 value25: "123456789", Name25: "前处理过滤箱电子差压计D3实际值",
    216. 

  216.                 value26: "123456789", Name26: "前处理过滤箱电子差压计D3实际值",
    217. 

  217.                 value27: "123456789", Name27: "前处理过滤箱电子差压计D3实际值",
    218. 

  218.                 value28: "123456789", Name28: "前处理过滤箱电子差压计D3实际值",
    219. 

  219.                 value29: "123456789", Name29: "前处理过滤箱电子差压计D3实际值"
    220. 

  220.             },
    221. 

  221.             message: "HelloVue",
    222. 

  222.             connection: null,
    223. 

  223.             msgs: [],
    224. 

  224.             dataInfo: { status1: "off", status2: "off" },
    225. 

  225.             pushContent: ""
    226. 

  226.         },
    227. 

  227.         methods: {
    228. 

  228.             ShowMsg: function (msgInfo) {
    229. 

  229.                 //this.message = msgInfo.title + ":" + msgInfo.msgContent;
    230. 

  230.                 //this.msgs.push(this.message);
    231. 

  231.             },
    232. 

  232.             PushMsg: function () {
    233. 

  233.                 that = this;
    234. 

  234.                 axios.get('http://localhost:5000/WeatherForecast/PushMsg',
    235. 

  235.                     { params: { content: that.pushContent } })
    236. 

  236.                     .then(function (response) {
    237. 

  237.                         console.log(response);
    238. 

  238.                     })
    239. 

  239.                     .catch(function (error) {
    240. 

  240.                         console.log(error);
    241. 

  241.                     });
    242. 

  242.             },
    243. 

  243.             UpdateDeviceData: function (dataMsg) {
    244. 

  244.                 this.device.value = dataMsg.value;
    245. 

  245.                 this.device.Name = dataMsg.name;
    246. 

  246.                 this.device.value10 = dataMsg.value10;
    247. 

  247.                 this.device.Name10 = dataMsg.name10;
    248. 

  248.                 this.device.value11 = dataMsg.value11;
    249. 

  249.                 this.device.Name11 = dataMsg.name11;
    250. 

  250.                 this.device.value12 = dataMsg.value12;
    251. 

  251.                 this.device.Name12 = dataMsg.name12;
    252. 

  252.                 this.device.value13 = dataMsg.value13;
    253. 

  253.                 this.device.Name13 = dataMsg.name13;
    254. 

  254.                 this.device.value14 = dataMsg.value14;
    255. 

  255.                 this.device.Name14 = dataMsg.name14;
    256. 

  256.                 this.device.value15 = dataMsg.value15;
    257. 

  257.                 this.device.Name15 = dataMsg.name15;
    258. 

  258.                 this.device.value16 = dataMsg.value16;
    259. 

  259.                 this.device.Name16 = dataMsg.name16;
    260. 

  260.                 this.device.value17 = dataMsg.value17;
    261. 

  261.                 this.device.Name17 = dataMsg.name17;
    262. 

  262.                 this.device.value18 = dataMsg.value18;
    263. 

  263.                 this.device.Name18 = dataMsg.name18;
    264. 

  264.                 this.device.value19 = dataMsg.value19;
    265. 

  265.                 this.device.Name19 = dataMsg.name19;
    266. 

  266. 

  267.                 this.device.valueB = dataMsg.valueb;
    268. 

  268.                 this.device.NameB = dataMsg.nameb;
    269. 

  269.                 this.device.valueB10 = dataMsg.valueb10;
    270. 

  270.                 this.device.NameB10 = dataMsg.nameb10;
    271. 

  271.                 this.device.valueB11 = dataMsg.valueb11;
    272. 

  272.                 this.device.NameB11 = dataMsg.nameb11;
    273. 

  273.                 this.device.valueB12 = dataMsg.valueb12;
    274. 

  274.                 this.device.NameB12 = dataMsg.nameb12;
    275. 

  275.                 this.device.valueB13 = dataMsg.valueb13;
    276. 

  276.                 this.device.NameB13 = dataMsg.nameb13;
    277. 

  277.                 this.device.valueB14 = dataMsg.valueb14;
    278. 

  278.                 this.device.NameB14 = dataMsg.nameb14;
    279. 

  279.                 this.device.valueB15 = dataMsg.valueb15;
    280. 

  280.                 this.device.NameB15 = dataMsg.nameb15;
    281. 

  281.                 this.device.valueB16 = dataMsg.valueb16;
    282. 

  282.                 this.device.NameB16 = dataMsg.nameb16;
    283. 

  283.                 this.device.valueB17 = dataMsg.valueb17;
    284. 

  284.                 this.device.NameB17 = dataMsg.nameb17;
    285. 

  285.                 this.device.valueB18 = dataMsg.valueb18;
    286. 

  286.                 this.device.NameB18 = dataMsg.nameb18;
    287. 

  287.                 this.device.valueB19 = dataMsg.valueb19;
    288. 

  288.                 this.device.NameB19 = dataMsg.nameb19;
    289. 

  289. 

  290.                 this.device.value20 = dataMsg.value20;
    291. 

  291.                 this.device.Name20 = dataMsg.name20;
    292. 

  292.                 this.device.value21 = dataMsg.value21;
    293. 

  293.                 this.device.Name21 = dataMsg.name21;
    294. 

  294.                 this.device.value22 = dataMsg.value22;
    295. 

  295.                 this.device.Name22 = dataMsg.name22;
    296. 

  296.                 this.device.value23 = dataMsg.value23;
    297. 

  297.                 this.device.Name23 = dataMsg.name23;
    298. 

  298.                 this.device.value24 = dataMsg.value24;
    299. 

  299.                 this.device.Name24 = dataMsg.name24;
    300. 

  300.                 this.device.value25 = dataMsg.value25;
    301. 

  301.                 this.device.Name25 = dataMsg.name25;
    302. 

  302.                 this.device.value26 = dataMsg.value26;
    303. 

  303.                 this.device.Name26 = dataMsg.name26;
    304. 

  304.                 this.device.value27 = dataMsg.value27;
    305. 

  305.                 this.device.Name27 = dataMsg.name27;
    306. 

  306.                 this.device.value28 = dataMsg.value28;
    307. 

  307.                 this.device.Name28 = dataMsg.name28;
    308. 

  308.                 this.device.value29 = dataMsg.value29;
    309. 

  309.                 this.device.Name29 = dataMsg.name29;
    310. 

  310.             },
    311. 

  311.             UpdateData: function (dataMsg) {
    312. 

  312.                 //alert(DeviceValueModel);
    313. 

  313.                 //this.dataInfo = dataMsg;
    314. 

  314.                 //this.device = DeviceValueModel;
    315. 

  315.                 //this.device.Value = dataMsg.Value;
    316. 

  316.                 //this.device.Name = dataMsg.Name;
    317. 

  317.                 //this.message = dataMsg;
    318. 

  318.             }
    319. 

  319.         }
    320. 

  320.     });
    321. 

  321. </script>
    322. 

  322. 

  323.     <style>
    324. 

  324. .breadcrumb{
    325. 

  325.     font-size: 33px;
    326. 

  326. }
    327. 

  327. 

  328. .button3 {
    329. 

  329.    z-index:126;
    330. 

  330.             position:absolute;
    331. 

  331.             top: 1600px;
    332. 

  332.             /*left:0px;*/         
    333. 

  333.     width: 200px;
    334. 

  334.     height: 70px;
    335. 

  335.     line-height: 60px;
    336. 

  336.     background-color: #2e82ff;
    337. 

  337.     color: #ffffff;
    338. 

  338.     font-size: 50px;
    339. 

  339.     text-align: center;
    340. 

  340.     border-radius: 27px;
    341. 

  341.     position: relative;
    342. 

  342.  }
    343. 

  343. .button3::before {
    344. 

  344.     /*left: 0px;*/
    345. 

  345.     content: "";
    346. 

  346.     position: absolute;
    347. 

  347.     width: 100%;
    348. 

  348.     height: 100%;
    349. 

  349.     background-image: 
    350. 

  350.         linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);
    351. 

  351.     background-size: 200%;
    352. 

  352.     animation: wipes 1s infinite;
    353. 

  353. }
    354. 

  354.  .btn1 { position: absolute;top: 1600px;left:10px; }
    355. 

  355.  .btn2 { position: absolute;top: 1600px;left:380px;}
    356. 

  356.  .btn3 { position: absolute;top: 1600px;left:760px; }
    357. 

  357. 

  358. @@keyframes wipes {
    359. 

  359.     0% {
    360. 

  360.         background-position: 0 0;
    361. 

  361.     }
    362. 

  362.     100% {
    363. 

  363.         background-position: 100% 0;
    364. 

  364.     }
    365. 

  365. }
    366. 

  366.     </style>
    367. 

  367. 

  368. 

  369. 

  370. 

  371. 

  372. 

  373. 

  374. 

  375. 

  376. 

  377. 

  378. 

  379. 

  380. 

  381. 

  382. 

  383. 

  384. 

  385.