Index.cshtml 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. @model Edge.WebHost.Models.SmartFuel.SmartFuelViewInfo
  2. <!DOCTYPE html>
  3. @{
  4. Layout = "../Shared/_Layout.cshtml";
  5. }
  6. <link rel="stylesheet" href="~/WebConsole/css/config.css" />
  7. <div class="config-body" id="ConfigBodyDiv">
  8. <div id="configcontainer" class="config-container">
  9. </div>
  10. <div class="config-footer">
  11. <fnav class="config-footer-fnav config-footer-fnav-image" onclick="OnclickFnav(this.id)" id="FuelConfigFnav" style="visibility: hidden">{{$t('ProductConfig')}}</fnav>
  12. <fnav class="config-footer-fnav" onclick="OnclickFnav(this.id)" id="TankConfigFnav" style="visibility: hidden">{{$t('TankMonitor')}}</fnav>
  13. @*<fnav class="config-footer-fair" onclick="OnclickFnav(this.id)" id="FairbanksFnav"></fnav>
  14. <select class="language-select" v-model="i18n.locale" @@change="changeLanguage">
  15. <option v-for="(item, i) in languages" :key="i" :value="item.value">{{ item.name }}</option>
  16. </select>*@
  17. </div>
  18. </div>
  19. <script src="~/WebConsole/lib/jquery/dist/jquery.min.js"></script>
  20. <script type="text/javascript" src="~/WebConsole/js/vue.min.js"></script>
  21. <script type="text/javascript" src="~/WebConsole/js/vue-i18n.js"></script>
  22. <script src="~/WebConsole/js/mqtt.min.js"></script>
  23. <script src="~/WebConsole/js/config.js"></script>
  24. <script type="text/javascript">
  25. Vue.use(VueI18n)
  26. const zhcn = {
  27. Product: '油品',
  28. CurrentPrice: '当前价格(元)',
  29. NewPrice: '新价格(元)',
  30. ProductConfig: '油品配置',
  31. TankMonitor: '油罐监测',
  32. Config: '配置选择',
  33. PriceChange: '修改价格',
  34. ProductChange: '更换油品',
  35. ProductName: '油品名称',
  36. NozzleMapping: '油枪映射',
  37. SftpAddress: 'Sftp地址',
  38. DeviceSN: '设备编号',
  39. SiteName: '油站名称',
  40. FairbanksAddress: 'Fanirbanks服务器地址',
  41. UserID: '数据上传用户名',
  42. Password: '数据上传密码',
  43. FrequencyUpload: '数据上传时间间隔(分钟)'
  44. }
  45. const enus = {
  46. Product: 'Product',
  47. CurrentPrice: 'Current Price',
  48. NewPrice: 'New Price',
  49. ProductConfig: 'FuelConfig',
  50. TankMonitor: 'TankMonitor',
  51. Config: 'Config',
  52. PriceChange: 'PriceChange',
  53. ProductChange: 'FuelChange',
  54. ProductName: 'Product',
  55. NozzleMapping: 'Nozzle Mapping',
  56. SftpAddress: 'Sftp Address',
  57. DeviceSN: 'Device SN.',
  58. SiteName: 'Site Name',
  59. FairbanksAddress: 'Server Address of Fairbanks',
  60. UserID: 'User ID',
  61. Password: 'Password',
  62. FrequencyUpload: 'Frequency of Data Upload(min)'
  63. }
  64. const i18n = new VueI18n({
  65. locale: 'zh-CN',
  66. messages: {
  67. 'zh-CN': zhcn,
  68. 'en-US': enus
  69. }
  70. })
  71. var vm = new Vue({
  72. el: '#ConfigBodyDiv',
  73. i18n,
  74. data: {
  75. languages: [{ icon: "/WebConsole/images/config/cn.png", name: "简体中文", value: "zh-CN" },
  76. { icon: "/WebConsole/images/config/en.png", name: "English", value: "en-US" }],
  77. imageUrl: "/WebConsole/images/config/cn.png"
  78. }
  79. })
  80. OnChangeLanguage(i18n.locale, $('fnav'));
  81. function changeLanguage(event) {
  82. OnChangeLanguage(i18n.locale, $('rnav'));
  83. return OnChangeLanguage(event.target.value, $('fnav'));
  84. }
  85. function OnclickFnav(currentId) {
  86. return RenderContainer(currentId, $('fnav'));
  87. }
  88. ShowMeAPIS(["webapi", ["IfsfFdcServer"]], function () {
  89. if ("@Model.queryString" === "") {
  90. OnloadConfig();
  91. } else {
  92. if ("@Model.queryString".toUpperCase() === "PRICE") {
  93. OnclickFnav('FuelConfigFnav')
  94. } else if ("@Model.queryString".toUpperCase() === "PRICE") {
  95. OnclickFnav('ListTabFnav')
  96. }
  97. }
  98. });
  99. </script>
  100. <style scoped>
  101. .language-select {
  102. position: absolute;
  103. right: 0;
  104. margin: 0 0.8%;
  105. border: 0;
  106. width: 13%;
  107. height: 60%;
  108. font-size: 1.3rem;
  109. display: flex;
  110. align-items: center;
  111. justify-content: center;
  112. }
  113. .SelectDiv {
  114. width: 200px;
  115. height: 30px;
  116. line-height: 30px;
  117. vertical-align: middle;
  118. display: block;
  119. background: transparent url(/images/config/cn.png) no-repeat;
  120. position: relative;
  121. margin: 0px;
  122. padding-top: 6px;
  123. padding-left: 2px;
  124. z-index: 1;
  125. }
  126. .SelectDiv1 {
  127. width: 160px;
  128. height: 15px;
  129. line-height: 15px;
  130. vertical-align: middle;
  131. background: transparent;
  132. position: relative;
  133. overflow: hidden;
  134. border-width: 0px;
  135. border-top-style: none;
  136. border-right-style: none;
  137. border-left-style: none;
  138. border-bottom-style: none;
  139. -webkit-appearance: none;
  140. z-index: 2;
  141. }
  142. .SelectDiv2 {
  143. top: -2px;
  144. left: -2px;
  145. width: 180px;
  146. height: 20px;
  147. border-width: 0px;
  148. border-top-style: none;
  149. border-right-style: none;
  150. border-left-style: none;
  151. border-bottom-style: none;
  152. display: block;
  153. position: relative;
  154. overflow: hidden;
  155. z-index: 3;
  156. }
  157. </style>