index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <template>
  2. <div class="swiperBox">
  3. <el-carousel
  4. style="width: 100%; margin: 5vh 0"
  5. trigger="click"
  6. type="card"
  7. height="80vh"
  8. :autoplay="false"
  9. indicator-position="none"
  10. :initial-index="1"
  11. arrow="none"
  12. @change="changeSwiper"
  13. >
  14. <!-- card-1 -->
  15. <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
  16. <div class="itemBox">
  17. <p class="itemTitle">统计分析</p>
  18. <iframe
  19. class="iframe"
  20. width="100%"
  21. height="100%"
  22. src="http://10.155.32.4:8070/analysis/#/"
  23. />
  24. </div>
  25. </el-carousel-item>
  26. <!-- card-2 -->
  27. <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
  28. <div class="itemBox">
  29. <p class="itemTitle">
  30. 自定义报表
  31. <i
  32. class="itemMoreBtn el-icon-more"
  33. @click="jumpUrl('/fdczzdy')"
  34. ></i>
  35. </p>
  36. <div style="margin-top: 200px">
  37. <div class="inline" @click="jumpUrl('/fdczzdy')">
  38. <div class="l">风电场站自定义</div>
  39. <div class="r r4">
  40. <span>4</span>
  41. </div>
  42. </div>
  43. <div class="inline" @click="jumpUrl('/fdxmzdy')">
  44. <div class="l">风电项目自定义</div>
  45. <div class="r r2">
  46. <span>2</span>
  47. </div>
  48. </div>
  49. <div class="inline" @click="jumpUrl('/gfczzdy')">
  50. <div class="l">光伏场站自定义</div>
  51. <div class="r r1">
  52. <span>1</span>
  53. </div>
  54. </div>
  55. <div class="inline" @click="jumpUrl('/gfxmzdy')">
  56. <div class="l">光伏场项目定义</div>
  57. <div class="r r1">
  58. <span>1</span>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </el-carousel-item>
  64. <!-- card-3 -->
  65. <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
  66. <div class="itemBox">
  67. <p class="itemTitle">
  68. 固定报表
  69. <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/oafd')"></i>
  70. </p>
  71. <div class="imageBox">
  72. <div class="imgItem" @click="jumpUrl('/oafd')">
  73. <el-image class="img" src="./static/img/oa日报.png" fit="fill" />
  74. <p class="imgTitle">OA日报(风电)</p>
  75. </div>
  76. <div class="imgItem" @click="jumpUrl('/xnyrb')">
  77. <el-image
  78. class="img"
  79. src="./static/img/新能源日报.png"
  80. fit="fill"
  81. />
  82. <p class="imgTitle">新能源日报</p>
  83. </div>
  84. <div class="imgItem" @click="jumpUrl('/missfdrb')">
  85. <el-image
  86. class="img"
  87. src="./static/img/miss日报.png"
  88. fit="fill"
  89. />
  90. <p class="imgTitle">国电电力MISS日报</p>
  91. </div>
  92. <div class="imgItem" @click="jumpUrl('/xnyfdscyb')">
  93. <el-image
  94. class="img"
  95. src="./static/img/新能源生产月报.png"
  96. fit="fill"
  97. />
  98. <p class="imgTitle">新能源风电生产月报</p>
  99. </div>
  100. <div class="imgItem" @click="jumpUrl('/mhsscyb')">
  101. <el-image
  102. class="img"
  103. src="./static/img/麻黄山生产月报.png"
  104. fit="fill"
  105. />
  106. <p class="imgTitle">麻黄山生产月报</p>
  107. </div>
  108. <div class="imgItem" @click="jumpUrl('/nssscyb')">
  109. <el-image
  110. class="img"
  111. src="./static/img/牛首山生产月报.png"
  112. fit="fill"
  113. />
  114. <p class="imgTitle">牛首山生产月报</p>
  115. </div>
  116. </div>
  117. </div>
  118. </el-carousel-item>
  119. </el-carousel>
  120. </div>
  121. </template>
  122. <script>
  123. import $ from "jquery";
  124. export default {
  125. // 名称
  126. name: "cutAnalyse",
  127. // 数据
  128. data() {
  129. const that = this;
  130. return {};
  131. },
  132. // 函数
  133. methods: {
  134. // 切换走马灯,并重新渲染样式
  135. changeSwiper(index) {
  136. this.$nextTick(() => {
  137. const swiperDom = $(".swiperBox .el-carousel__item");
  138. swiperDom
  139. .eq(index)
  140. .css({ background: "rgb(4, 12, 11)", border: "1px solid #05bb4c" });
  141. for (let i = 0; i < swiperDom.length; i++) {
  142. if (i !== index) {
  143. swiperDom.eq(i).find(".el-carousel__mask").css({
  144. background: "rgb(4, 12, 11)",
  145. });
  146. swiperDom.eq(i).css({
  147. background: "rgb(4, 12, 11)",
  148. border: "1px solid rgba(5, 187, 76, 0.5)",
  149. });
  150. }
  151. }
  152. });
  153. },
  154. // 页面跳转
  155. jumpUrl(url) {
  156. this.$router.push(url);
  157. },
  158. },
  159. created() {},
  160. mounted() {
  161. this.$nextTick(() => {
  162. this.changeSwiper(1);
  163. });
  164. },
  165. unmounted() {},
  166. };
  167. </script>
  168. <style lang="less" scoped>
  169. .swiperBox,
  170. .itemBox {
  171. width: 100%;
  172. height: 100%;
  173. font-size: 20px;
  174. .itemTitle {
  175. width: 100%;
  176. display: flex;
  177. justify-content: center;
  178. align-items: center;
  179. position: relative;
  180. .itemMoreBtn {
  181. cursor: pointer;
  182. font-size: 22px;
  183. position: absolute;
  184. right: 0;
  185. top: 0;
  186. }
  187. }
  188. .inline {
  189. display: flex;
  190. justify-content: space-around;
  191. align-items: center;
  192. font-size: 24px;
  193. margin-bottom: 30px;
  194. width: 100%;
  195. margin: 0 0 30px 0;
  196. transition: 0.2s;
  197. .l {
  198. color: #b3bdc0;
  199. width: 46%;
  200. display: flex;
  201. justify-content: flex-end;
  202. align-items: center;
  203. margin-right: 4%;
  204. transition: 0.2s;
  205. }
  206. .r {
  207. color: #05bb4c;
  208. position: relative;
  209. width: 46%;
  210. display: flex;
  211. justify-content: start;
  212. align-items: center;
  213. margin-left: 4%;
  214. &::after {
  215. content: "";
  216. position: absolute;
  217. height: 10px;
  218. left: 30px;
  219. top: calc(50% - 5px);
  220. background-color: #edbf03;
  221. border-radius: 2px;
  222. }
  223. }
  224. .r1::after {
  225. width: 30px;
  226. }
  227. .r2::after {
  228. width: 60px;
  229. }
  230. .r3::after {
  231. width: 90px;
  232. }
  233. .r4::after {
  234. width: 120px;
  235. }
  236. &:hover {
  237. width: 80%;
  238. margin: 0 10% 30px 10%;
  239. color: #05bb4c;
  240. transition: 0.2s;
  241. }
  242. &:hover .l {
  243. color: #05bb4c;
  244. transition: 0.2s;
  245. }
  246. }
  247. .imageBox {
  248. width: 100%;
  249. display: flex;
  250. justify-content: start;
  251. align-items: center;
  252. flex-wrap: wrap;
  253. margin-top: 100px;
  254. .imgItem {
  255. cursor: pointer;
  256. border: none;
  257. margin-right: 1%;
  258. margin-bottom: 20px;
  259. display: flex;
  260. justify-content: start;
  261. align-items: center;
  262. flex-direction: column;
  263. width: 32%;
  264. .img {
  265. width: 100%;
  266. height: 150px;
  267. border: 1px solid #b3bdc0;
  268. transition: 0.2s;
  269. &:hover {
  270. border: 1px solid #05bb4c;
  271. transition: 0.2s;
  272. }
  273. }
  274. p {
  275. width: 100%;
  276. font-size: 16px;
  277. color: #b3bdc0;
  278. text-align: center;
  279. transition: 0.2s;
  280. }
  281. &:hover p {
  282. transition: 0.2s;
  283. color: #05bb4c;
  284. }
  285. }
  286. }
  287. .iframe {
  288. border: 0;
  289. overflow: scroll;
  290. background: #fff;
  291. }
  292. }
  293. </style>
  294. <style lang="less">
  295. .itemBox {
  296. .el-form-item,
  297. .el-form-item__label {
  298. font-size: 16px;
  299. }
  300. .el-form-item__label {
  301. text-align: left;
  302. }
  303. }
  304. </style>