Info.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <template>
  2. <div>
  3. <div class="mg-b-8">
  4. <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
  5. </div>
  6. <div class="wind-site-info">
  7. <div class="wind-site-menu">
  8. <div class="wind-site-title">选择风机</div>
  9. <div class="wind-site-body">
  10. <collapse-list :list="WindSites" :allowScroll="true" scrollHeight="calc(100vh - 175px)" @click="clickMenu" />
  11. </div>
  12. </div>
  13. <div class="wind-site-info-body">
  14. <div class="info-menu mg-b-16">
  15. <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
  16. </div>
  17. <el-row style="height: calc(100% - 45px);">
  18. <el-col :span="16" style="position:relative;">
  19. <!-- 基本信息 使用 v-if 每次点击重新加载 -->
  20. <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
  21. <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
  22. <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
  23. <div :style="$store.state.themeName === 'dark' ? 'text-align:center;' : 'text-align:center;background:#fff;'">
  24. <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
  25. </div>
  26. <generator class="saig" v-show="InfoBtns.activeIndex != 0" :index="InfoBtns.activeIndex" :data="sourceMap"></generator>
  27. </el-col>
  28. <el-col :span="8">
  29. <warning :data="WarnData" />
  30. </el-col>
  31. </el-row>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import collapseList from "@/components/coms/collapse/collapse-list.vue";
  38. import BaseInfo from "./Base-Info.vue";
  39. import Warning from "./Warning.vue";
  40. import StandAloneImg from "./StandAloneImg.vue";
  41. import generator from "./pages/generator.vue";
  42. import BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.vue";
  43. export default {
  44. components: { collapseList, BaseInfo, Warning, StandAloneImg, generator, BtnGroupDouble },
  45. props: {
  46. id: {
  47. type: String,
  48. default: "",
  49. },
  50. },
  51. data() {
  52. return {
  53. timmer: null, // 计时器
  54. wtId: "", // 风机ID
  55. sourceMap: {},
  56. WarnData: {},
  57. WindSites: [],
  58. InfoBtns: {
  59. activeIndex: 0,
  60. data: [
  61. {
  62. id: "base-info",
  63. text: "基本信息",
  64. },
  65. {
  66. id: "generator",
  67. text: "发电机",
  68. },
  69. {
  70. id: "gear-box",
  71. text: "齿轮箱",
  72. },
  73. {
  74. id: "pitch",
  75. text: "变桨",
  76. },
  77. {
  78. id: "yaw",
  79. text: "偏航",
  80. },
  81. {
  82. id: "hydraulic-pressure",
  83. text: "液压",
  84. },
  85. {
  86. id: "cabin-info",
  87. text: "机舱信息",
  88. },
  89. // {
  90. // id: "principal-axis",
  91. // text: "主轴",
  92. // },
  93. ],
  94. },
  95. };
  96. },
  97. methods: {
  98. onInfoMenuItemClick(item, index) {
  99. this.InfoBtns.activeIndex = index;
  100. },
  101. selectSvg(index) {
  102. this.InfoBtns.activeIndex = index;
  103. },
  104. // 根据风机状态码返回对应 class
  105. getColor(fjzt) {
  106. switch (fjzt) {
  107. case 0:
  108. return "green";
  109. case 1:
  110. return "blue";
  111. case 2:
  112. return "red";
  113. case 3:
  114. return "gray";
  115. case 4:
  116. return "orange";
  117. case 5:
  118. return "purple";
  119. case 6:
  120. return "write";
  121. }
  122. },
  123. // 请求服务
  124. requestData(showLoading) {
  125. this.getSimpleMatrixAll(showLoading);
  126. },
  127. // 获取场列表
  128. getSimpleMatrixAll(showLoading) {
  129. let that = this;
  130. that.API.requestData({
  131. showLoading,
  132. method: "POST",
  133. subUrl: "matrix/findSimpleMatrixAll",
  134. data: {
  135. wpId: that.wpId,
  136. },
  137. success(res) {
  138. let WindSites = [];
  139. if(that.WindSites.length){
  140. res.data.forEach((pEle, pIndex) => {
  141. that.WindSites[pIndex].children = [];
  142. pEle.fjls[0].forEach((cEle) => {
  143. that.WindSites[pIndex].children.push({
  144. id: cEle.wtId,
  145. wpId: cEle.wpId,
  146. text: cEle.wtnum,
  147. color: that.getColor(cEle.fjzt),
  148. });
  149. });
  150. });
  151. }else{
  152. res.data.forEach((ele, index) => {
  153. WindSites.push({
  154. id: String(index),
  155. text: ele.wpName,
  156. children: [],
  157. });
  158. });
  159. res.data.forEach((pEle, pIndex) => {
  160. pEle.fjls[0].forEach((cEle) => {
  161. WindSites[pIndex].children.push({
  162. id: cEle.wtId,
  163. wpId: cEle.wpId,
  164. text: cEle.wtnum,
  165. color: that.getColor(cEle.fjzt),
  166. });
  167. });
  168. });
  169. that.WindSites = WindSites;
  170. }
  171. if (res.data.length) {
  172. that.wtId = that.wtId || res.data[0].fjls[0][0].wtId;
  173. that.getWtInfo();
  174. }
  175. },
  176. });
  177. },
  178. // 获取风机信息
  179. getWtInfo() {
  180. let that = this;
  181. that.API.requestData({
  182. method: "POST",
  183. subUrl: "monitorwt/findWtInfo",
  184. data: {
  185. wtId: that.wtId,
  186. },
  187. success(res) {
  188. let map = ['bjmap','fdjmap','clxmap','yymap','phmap','jcmap'];
  189. let data = res.data;
  190. for(var key in data){
  191. if(map.includes(key) && key.endsWith("map")){
  192. let json = data[key];
  193. let arrayai = [];
  194. let arraydi = [];
  195. for(var i = 0; i < json.length; i++){
  196. let obj = {
  197. name: json[i][0],
  198. unit: json[i][1],
  199. value: json[i][3]
  200. }
  201. if(json[i][2] == "ai") arrayai.push(obj);
  202. else arraydi.push(obj);
  203. }
  204. data[key] = {ai: arrayai, di: arraydi}
  205. }
  206. }
  207. that.sourceMap = data;
  208. that.getWarnInfo();
  209. },
  210. });
  211. },
  212. // 获取报警信息
  213. getWarnInfo() {
  214. let that = this;
  215. that.API.requestData({
  216. method: "POST",
  217. subUrl: "monitorwt/findWtWarnInfo",
  218. data: {
  219. wtId: that.wtId,
  220. },
  221. success(res) {
  222. that.WarnData = res.data;
  223. },
  224. });
  225. },
  226. // 点击左侧菜单
  227. clickMenu(res) {
  228. this.wtId = res.id;
  229. this.$router.replace(`/monitor/windsite/info/${this.wpId}/${res.id}`);
  230. this.getWtInfo();
  231. },
  232. },
  233. created() {
  234. let that = this;
  235. that.wpId = that.$route.params.wpId;
  236. that.wtId = that.$route.params.wtId;
  237. that.$nextTick(() => {
  238. that.requestData(false);
  239. that.timmer = setInterval(() => {
  240. that.requestData(false);
  241. }, that.$store.state.websocketTimeSec);
  242. });
  243. },
  244. unmounted() {
  245. clearInterval(this.timmer);
  246. this.timmer = null;
  247. },
  248. watch:{
  249. // "$route"(res){
  250. // clearInterval(this.timmer);
  251. // this.timmer = null;
  252. // this.wpId = res.params.wpId;
  253. // this.requestData(false);
  254. // this.timmer = setInterval(() => {
  255. // this.requestData(false);
  256. // }, this.$store.state.websocketTimeSec);
  257. // }
  258. }
  259. };
  260. </script>
  261. <style lang="less" scoped>
  262. .wind-site-info {
  263. display: flex;
  264. .sai {
  265. width: 65%;
  266. }
  267. .saig {
  268. position: absolute;
  269. width: 100%;
  270. bottom: 0;
  271. }
  272. .wind-site-menu {
  273. flex: 0 0 13.889vh;
  274. color: @gray;
  275. background: fade(@darkgray, 10);
  276. height: calc(100vh - 122px);
  277. .wind-site-title {
  278. font-size: 14px;
  279. font-weight: 600;
  280. padding: 16px;
  281. }
  282. }
  283. .wind-site-info-body {
  284. flex: auto;
  285. padding-left: 1.481vh;
  286. .info-menu {
  287. .info-menu-item {
  288. display: inline-block;
  289. border: 1px solid fade(@darkgray, 80);
  290. border-radius: 2px;
  291. color: @gray;
  292. font-size: @fontsize-s;
  293. letter-spacing: 1px;
  294. cursor: pointer;
  295. width: 85px;
  296. height: 30px;
  297. line-height: 30px;
  298. text-align: center;
  299. &.active {
  300. color: @white;
  301. background: fade(@purple, 60);
  302. border-color: fade(@purple, 60);
  303. }
  304. & + .info-menu-item {
  305. margin-left: 0.741vh;
  306. }
  307. }
  308. }
  309. }
  310. }
  311. </style>