index.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. <template>
  2. <div class="mainContainer">
  3. <div class="mainContainerBox">
  4. <header>
  5. <div class="head-left">
  6. <ul>
  7. <li>
  8. <div @click="navBlock" class="head-bth">
  9. <span v-for="(item,index) in 3" :key="index"></span>
  10. </div>
  11. </li>
  12. <li class="line">
  13. <span></span>
  14. </li>
  15. <li>
  16. <img class="head-icon" src="@/assets/lzzk.png" alt />
  17. </li>
  18. <li>
  19. <span class="head-text">冷站智控</span>
  20. </li>
  21. <li>
  22. <span class="head-circular"></span>
  23. </li>
  24. <li>
  25. <span class="head-text">{{headText}}</span>
  26. </li>
  27. <li>
  28. <div class="triangle_border_down"></div>
  29. </li>
  30. </ul>
  31. </div>
  32. <div class="head-right">
  33. <ul>
  34. <li>
  35. <span class="head-text">{{dateNow||'--'}}</span>
  36. </li>
  37. <li>
  38. <span class="line"></span>
  39. </li>
  40. <li>
  41. <span class="head-text MicrYaHei">天气:{{weather}}</span>
  42. </li>
  43. <li>
  44. <span class="head-text MicrYaHei">{{temperatureOut}}℃</span>
  45. </li>
  46. <li>
  47. <span class="line"></span>
  48. </li>
  49. <li>
  50. <span class>{{$store.state.userInfo.username}}</span>
  51. </li>
  52. <li>
  53. <div class="triangle_border_down"></div>
  54. </li>
  55. </ul>
  56. </div>
  57. </header>
  58. <nav>
  59. <div class="nav-left">
  60. <el-select class="nav-select" v-model="value">
  61. <el-option
  62. v-for="item in options"
  63. :key="item.value"
  64. :label="item.label"
  65. :value="item.value"
  66. ></el-option>
  67. </el-select>
  68. </div>
  69. </nav>
  70. </div>
  71. <div class="mainContainerTop"></div>
  72. <div id="nav" class="nav">
  73. <div @click="navNone" class="nav-bth">
  74. <span v-for="(item,index) in 3" :key="index"></span>
  75. </div>
  76. <p v-for="(item,index) in menuList" :key="index" class="nav-title">
  77. <router-link :to="item.path">{{item.name}}</router-link>
  78. </p>
  79. </div>
  80. </div>
  81. </template>
  82. <script>
  83. import store from "../../store";
  84. var moment = require("moment");
  85. import "moment/locale/zh-cn";
  86. import { queryWeather } from "@/api/main/main.js";
  87. export default {
  88. data() {
  89. return {
  90. menuList: [
  91. {
  92. name: "当日运行策略",
  93. path: "/strategy"
  94. },
  95. {
  96. name: "运行评价",
  97. path: "/evaluate"
  98. },
  99. {
  100. name: "申诉",
  101. path: "/appeal"
  102. },
  103. {
  104. name: "申诉审核",
  105. path: "/audit"
  106. },
  107. {
  108. name: "营业时间调整",
  109. path: "/doBusiness"
  110. }
  111. ],
  112. options: [
  113. {
  114. value: "Pj1101010001",
  115. label: "嘉铭东枫产业园产业园"
  116. },
  117. {
  118. value: "Pj1101010002",
  119. label: "嘉铭东枫产业园"
  120. }
  121. ],
  122. dateNow: new Date(),
  123. weather: "",
  124. temperatureIn: "", // 室内
  125. temperatureOut: "", // 室外
  126. value: "Pj1101010001"
  127. };
  128. },
  129. props: ["headText"],
  130. methods: {
  131. navNone() {
  132. document.getElementById("nav").className = "nav";
  133. },
  134. navBlock() {
  135. document.getElementById("nav").className = "nav nav-hover";
  136. },
  137. // 查询当日天气
  138. query() {
  139. queryWeather({}).then(res => {
  140. if (res.result == "success") {
  141. this.weather = res.weather || "--";
  142. this.temperatureIn = res.temperatureIn || "--";
  143. this.temperatureOut = res.temperatureOut || "--";
  144. }
  145. });
  146. }
  147. },
  148. mounted() {
  149. setInterval(() => {
  150. this.dateNow = moment()
  151. .locale("zh-cn")
  152. .format("YYYY.MM.DD HH:mm");
  153. }, 1000);
  154. this.query();
  155. }
  156. };
  157. </script>
  158. <style lang="scss" scoped>
  159. .mainContainer {
  160. .mainContainerBox {
  161. width: 100%;
  162. height: 96px;
  163. position: fixed;
  164. top: 0;
  165. left: 0;
  166. z-index: 1;
  167. header {
  168. max-height: 48px;
  169. padding: 12px 16px;
  170. display: flex;
  171. justify-content: space-between;
  172. align-items: center;
  173. background: rgba(255, 255, 255, 1);
  174. box-shadow: 0px 3px 14px 0px rgba(31, 35, 41, 0.1);
  175. .head-left {
  176. display: flex;
  177. align-items: center;
  178. ul {
  179. display: flex;
  180. justify-content: space-between;
  181. align-items: center;
  182. margin: 0;
  183. padding: 0;
  184. li {
  185. margin: 0 4px;
  186. .head-bth {
  187. width: 16px;
  188. height: 16px;
  189. span {
  190. display: block;
  191. width: 18px;
  192. height: 2px;
  193. background: rgba(0, 145, 255, 1);
  194. border-radius: 1px;
  195. margin: 0 auto;
  196. }
  197. span:nth-of-type(2) {
  198. margin: 5px auto;
  199. }
  200. }
  201. .line {
  202. display: inline-block;
  203. width: 1px;
  204. height: 16px;
  205. margin: 4px 12px 0 12px;
  206. background: rgba(216, 216, 216, 1);
  207. }
  208. .head-icon {
  209. width: 20px;
  210. height: 20px;
  211. margin-top: 3px;
  212. }
  213. .head-text {
  214. height: 26px;
  215. font-size: 14px;
  216. color: rgba(31, 36, 41, 1);
  217. line-height: 26px;
  218. }
  219. .head-circular {
  220. display: inline-block;
  221. width: 4px;
  222. height: 4px;
  223. background: rgba(195, 198, 203, 1);
  224. border-radius: 90px;
  225. margin-bottom: 3px;
  226. }
  227. .triangle_border_down {
  228. width: 0;
  229. height: 0;
  230. border-width: 8px 6px 0;
  231. border-style: solid;
  232. border-color: #9ca2a9 transparent transparent;
  233. }
  234. }
  235. }
  236. }
  237. .head-right {
  238. display: flex;
  239. align-items: center;
  240. ul {
  241. display: flex;
  242. justify-content: space-between;
  243. align-items: center;
  244. margin: 0;
  245. padding: 0;
  246. li {
  247. margin: 0 4px;
  248. .head-bth {
  249. display: inline-block;
  250. width: 24px;
  251. height: 24px;
  252. background: rgba(0, 145, 255, 1);
  253. }
  254. .line {
  255. display: inline-block;
  256. width: 1px;
  257. height: 16px;
  258. margin: 4px 8px 0 8px;
  259. background: rgba(216, 216, 216, 1);
  260. }
  261. .head-text {
  262. height: 18px;
  263. font-size: 14px;
  264. color: #646c73;
  265. line-height: 19px;
  266. }
  267. .head-circular {
  268. display: inline-block;
  269. width: 4px;
  270. height: 4px;
  271. background: rgba(195, 198, 203, 1);
  272. border-radius: 90px;
  273. margin-bottom: 3px;
  274. }
  275. .triangle_border_down {
  276. width: 0;
  277. height: 0;
  278. border-width: 8px 6px 0;
  279. border-style: solid;
  280. border-color: #9ca2a9 transparent transparent;
  281. }
  282. }
  283. }
  284. }
  285. }
  286. nav {
  287. height: 48px;
  288. background: rgba(247, 249, 250, 1);
  289. display: flex;
  290. justify-content: flex-start;
  291. align-items: center;
  292. }
  293. }
  294. .mainContainerTop {
  295. width: 100%;
  296. height: 96px;
  297. }
  298. .nav {
  299. position: fixed;
  300. left: 0;
  301. top: 0;
  302. width: 0px;
  303. background: #004275;
  304. overflow: hidden;
  305. height: 1005px;
  306. transition: all 0.3s;
  307. -webkit-transition: all 0.3s;
  308. -moz-transition: all 0.3s;
  309. -ms-transition: all 0.3s;
  310. -o-transition: all 0.3s;
  311. -webkit-box-sizing: border-box;
  312. box-sizing: border-box;
  313. z-index: 99;
  314. .nav-bth {
  315. width: 16px;
  316. height: 16px;
  317. margin: 24px;
  318. span {
  319. display: block;
  320. width: 18px;
  321. height: 2px;
  322. background: #fff;
  323. border-radius: 1px;
  324. margin: 0 auto;
  325. }
  326. span:nth-of-type(2) {
  327. margin: 5px auto;
  328. }
  329. }
  330. .nav-title {
  331. padding: 0 24px;
  332. a {
  333. color: #fff;
  334. font-size: 16px;
  335. line-height: 24px;
  336. }
  337. }
  338. .nav-title:hover {
  339. opacity: 0.5;
  340. }
  341. }
  342. .nav-hover {
  343. width: 200px;
  344. }
  345. }
  346. </style>
  347. <style lang="scss">
  348. .nav-left {
  349. .nav-select {
  350. width: 144px;
  351. height: 28px;
  352. border-radius: 14px;
  353. margin-left: 16px;
  354. .el-input--suffix .el-input__inner {
  355. padding: 0 9px;
  356. width: 144px;
  357. height: 28px;
  358. border-radius: 14px;
  359. margin-left: 16px;
  360. }
  361. .el-input__icon {
  362. line-height: 28px;
  363. display: none;
  364. }
  365. }
  366. }
  367. </style>