Decision1.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <template>
  2. <div class="decision-page-1">
  3. <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
  4. <div class="query mg-b-8">
  5. <div class="query-items">
  6. <div class="query-item">
  7. <div class="lable">场站:</div>
  8. <div class="search-input">
  9. <input name="" placeholder="请输入场站信息" />
  10. <div class="unit svg-icon svg-icon-gray">
  11. <svg-icon :svgid="'svg-arrow-down'" />
  12. </div>
  13. </div>
  14. </div>
  15. <div class="query-item">
  16. <div class="lable">场站:</div>
  17. <div class="search-input">
  18. <input name="" />
  19. <div class="unit svg-icon svg-icon-gray">
  20. <svg-icon :svgid="'svg-arrow-down'" />
  21. </div>
  22. </div>
  23. </div>
  24. <div class="query-item">
  25. <div class="lable">场站:</div>
  26. <div class="search-input">
  27. <input name="" />
  28. <div class="unit svg-icon svg-icon-gray">
  29. <svg-icon :svgid="'svg-arrow-down'" />
  30. </div>
  31. </div>
  32. </div>
  33. <div class="query-item">
  34. <div class="lable">场站:</div>
  35. <div class="search-input">
  36. <input name="" />
  37. <div class="unit svg-icon svg-icon-gray">
  38. <svg-icon :svgid="'svg-arrow-down'" />
  39. </div>
  40. </div>
  41. </div>
  42. <div class="query-item">
  43. <div class="lable">场站:</div>
  44. <div class="search-input">
  45. <input name="" />
  46. <div class="unit svg-icon svg-icon-gray">
  47. <svg-icon :svgid="'svg-arrow-down'" />
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="query-actions">
  53. <button class="btn green">搜索</button>
  54. <button class="btn">明细信息</button>
  55. <button class="btn">导出</button>
  56. </div>
  57. </div>
  58. <div class="actions mg-b-8">
  59. <button class="btn green">风场</button>
  60. <button class="btn">项目</button>
  61. <button class="btn">集电线路</button>
  62. </div>
  63. <el-row :type="'flex'" class="content">
  64. <el-col :span="12" class="pd-r-8">
  65. <toolbar-panel :title="123" :showLine="false">
  66. <template v-slot:tools>
  67. <div class="tools">
  68. <div class="tool-block">
  69. <div class="legend bg-green"></div>
  70. <div class="legend-text">实际电量</div>
  71. </div>
  72. <div class="tool-block">
  73. <div class="legend bg-orange"></div>
  74. <div class="legend-text">计划检修损失</div>
  75. </div>
  76. <div class="tool-block">
  77. <div class="legend bg-yellow"></div>
  78. <div class="legend-text">非计划检修损失</div>
  79. </div>
  80. <div class="tool-block">
  81. <div class="legend bg-red"></div>
  82. <div class="legend-text">限电损失</div>
  83. </div>
  84. <div class="tool-block">
  85. <div class="legend bg-purple"></div>
  86. <div class="legend-text">受累损失</div>
  87. </div>
  88. <div class="tool-block">
  89. <div class="legend bg-blue"></div>
  90. <div class="legend-text">性能损失</div>
  91. </div>
  92. </div>
  93. </template>
  94. <bar-line-chart :height="'calc(100vh - 200px)'"/>
  95. </toolbar-panel>
  96. </el-col>
  97. <el-col :span="12" class="pd-l-8">
  98. <panel :title="'项目列表'" :showLine="false">
  99. <div class="project-table">
  100. <Table :data="tableData"></Table>
  101. </div>
  102. </panel>
  103. </el-col>
  104. </el-row>
  105. </div>
  106. </template>
  107. <script>
  108. import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
  109. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  110. import Panel from "../../components/coms/panel/panel.vue";
  111. import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
  112. import Table from "../../components/coms/table/table.vue";
  113. export default {
  114. components: { ToolbarPanel, BarLineChart, Panel, Table, SvgIcon },
  115. data() {
  116. return {
  117. tableData: {
  118. column: [
  119. {
  120. name: "",
  121. field: "index",
  122. is_num: false,
  123. is_light: false,
  124. },
  125. {
  126. name: "名称",
  127. field: "name",
  128. is_num: false,
  129. is_light: false,
  130. },
  131. {
  132. name: "理论发电量",
  133. field: "lqf",
  134. is_num: false,
  135. is_light: false,
  136. },
  137. {
  138. name: "SCADA发电量",
  139. field: "yggl",
  140. is_num: false,
  141. is_light: false,
  142. },
  143. {
  144. name: "风速",
  145. field: "yyy",
  146. is_num: false,
  147. is_light: false,
  148. },
  149. {
  150. name: "非计划检修",
  151. field: "pcspp",
  152. is_num: false,
  153. is_light: false,
  154. },
  155. {
  156. name: "计划检修",
  157. field: "u1",
  158. is_num: false,
  159. is_light: false,
  160. },
  161. {
  162. name: "受累",
  163. field: "u2",
  164. is_num: false,
  165. is_light: true,
  166. },
  167. {
  168. name: "限电",
  169. field: "v1",
  170. is_num: false,
  171. is_light: false,
  172. },
  173. {
  174. name: "性能",
  175. field: "v2",
  176. is_num: false,
  177. is_light: false,
  178. },
  179. {
  180. name: "风能率用率%",
  181. field: "w1",
  182. is_num: false,
  183. is_light: false,
  184. },
  185. ],
  186. data: [
  187. {
  188. index: 1,
  189. name: "MG01-01",
  190. lqf: "0.1000",
  191. yggl: "0.1000",
  192. yyy: "0.10",
  193. pcspp: "0.1000",
  194. u1: "0.1000",
  195. u2: "0.1000",
  196. v1: "0.1000",
  197. v2: "0.1000",
  198. w1: "0.1000",
  199. w2: "0.1000",
  200. zca: "0.1000",
  201. zcb: "0.1000",
  202. clx: "0.1000",
  203. clx1: "0.1000",
  204. clx2: "0.1000",
  205. jc: "0.1000",
  206. hh: "0.1000",
  207. hj: "0.1000",
  208. is_light: false,
  209. },
  210. ],
  211. },
  212. };
  213. },
  214. created() {
  215. for (let i = 1; i < 50; i++) {
  216. this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
  217. this.tableData.data[i].index = i + 1;
  218. }
  219. },
  220. };
  221. </script>
  222. <style lang="less">
  223. .decision-page-1 {
  224. .com-panel .panel-title {
  225. line-height: 3.4259vh;
  226. }
  227. .tools {
  228. display: flex;
  229. line-height: 3.4259vh;
  230. .tool-block {
  231. display: flex;
  232. align-items: center;
  233. margin-left: 0.741vh;
  234. .legend {
  235. flex: auto;
  236. width: 0.741vh;
  237. height: 0.741vh;
  238. margin-right: 0.741vh;
  239. &.long {
  240. width: 2.963vh;
  241. height: 0.37vh;
  242. }
  243. }
  244. .legend-text {
  245. color: @gray-l;
  246. font-size: @fontsize-s;
  247. }
  248. }
  249. }
  250. .project-table {
  251. overflow: auto;
  252. tbody {
  253. height: calc(100vh - 24.5vh);
  254. }
  255. td {
  256. color: #b2bdc0 !important;
  257. }
  258. }
  259. }
  260. </style>