index.vue 9.1 KB

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