Newer
Older
KaiFengPC / src / views / floodSys / scada / monitorScada / index.vue
@鲁yixuan 鲁yixuan on 19 Aug 8 KB updata
  1. <template>
  2. <!-- 厂站数据采集 -->
  3. <div class="stationCollect publicContainer">
  4. <div class="content">
  5. <div class="contLeft">
  6. <div class="search input">
  7. <el-input placeholder="站点名称" clearable v-model="searchList.stationName"></el-input>
  8. <el-button type="primary" @click="searchClick"> 搜索</el-button>
  9. </div>
  10. <ul class="ul_date">
  11. <li v-for="i in projectDate" :class="{ bgcClsas: projectId == i.stationCode }" @click="liClick(i)">
  12. <el-icon color="#1296db">
  13. <LocationFilled />
  14. </el-icon>
  15. {{ i.stationName }}
  16. </li>
  17. </ul>
  18. </div>
  19. <div class="contRight">
  20. <el-button type="primary" size="large" @click="pointKeyClick">点位配置</el-button>
  21. <div class="layout-body">
  22. <el-table :data="realtimeData" v-loading="tableLoading" max-height="500" v-if="headerList.length > 0">
  23. <el-table-column
  24. v-for="i in headerList"
  25. :key="i.pointKey"
  26. :label="i.pointName"
  27. show-overflow-tooltip
  28. :prop="i.pointKey"
  29. width="130"
  30. />
  31. </el-table>
  32. <el-form label-width="auto" ref="ruleForm" inline :model="formData" style="margin-top: 10px">
  33. <el-form-item label="时间:">
  34. <el-date-picker
  35. clearable
  36. format="YYYY-MM-DD"
  37. v-model="AllData.publishTime"
  38. type="datetimerange"
  39. range-separator="到"
  40. start-placeholder="开始时间"
  41. end-placeholder="结束时间"
  42. />
  43. </el-form-item>
  44. <el-form-item>
  45. <el-button type="primary" icon="Search" @click="searchClickTwo(1)">搜索</el-button>
  46. </el-form-item>
  47. </el-form>
  48. <el-table :data="tabsList" v-loading="tableLoading" max-height="500">
  49. <el-table-column type="index" width="55" label="序号" :index="getIndex" />
  50. <el-table-column
  51. v-for="i in headerList"
  52. :key="i.pointKey"
  53. :label="i.pointName"
  54. show-overflow-tooltip
  55. :prop="i.pointKey"
  56. width="130"
  57. />
  58. </el-table>
  59. <!-- 分页 -->
  60. <pagination
  61. v-show="total > 0"
  62. :total="total"
  63. v-model:page="formData.pageNum"
  64. v-model:limit="formData.pageSize"
  65. @pagination="sitePropertyRelationM"
  66. />
  67. <!-- 查看详情弹框 -->
  68. <el-dialog v-model="visible" title="因子配置" :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
  69. <el-transfer
  70. v-model="leftValue"
  71. filterable
  72. :titles="['未选', '已选']"
  73. :button-texts="['向左移动', '向右移动']"
  74. :data="transferData"
  75. >
  76. <template #left-footer> </template>
  77. <template #right-footer> </template>
  78. </el-transfer>
  79. <template #footer>
  80. <div class="dialog-footer">
  81. <el-button type="primary" @click="open2(1)">确定</el-button>
  82. <el-button @click="cancel">关闭</el-button>
  83. </div>
  84. </template>
  85. </el-dialog>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </template>
  91. <script setup>
  92. import { getInfolist } from '@/api/scada/stationInfo';
  93. import { headRelation, sitePropertyRelation, headConfig, data_queryheads, realtimeDataList } from '@/api/scada/monitor';
  94. import { formateDate, TimeDefault } from '@/utils/validate';
  95. const { proxy } = getCurrentInstance();
  96. const projectDate = ref([]);
  97. const projectId = ref(0);
  98. const visible = ref(false);
  99. const realtimeData = ref([]);
  100. const total = ref(0);
  101. const headerList = ref([]);
  102. let tabsList = ref([]);
  103. const leftValue = ref([]);
  104. const transferData = ref([]);
  105. const searchList = reactive({});
  106. let tableLoading = ref(true);
  107. let loading = ref(true);
  108. const AllData = reactive({
  109. publishTime: [proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD '), proxy.moment().format('YYYY-MM-DD 23:59:59')],
  110. formData: { pageNum: 1, pageSize: 10 },
  111. queryParams: {},
  112. });
  113. const { queryParams, formData } = toRefs(AllData);
  114. console.log(formData.value, 'formData.value');
  115. //搜索项目
  116. function searchClick() {
  117. getInfolistM(searchList);
  118. }
  119. const getIndex = index => {
  120. return (formData.value.pageNum - 1) * formData.value.pageSize + index + 1;
  121. };
  122. function searchClickTwo() {
  123. sitePropertyRelationM();
  124. }
  125. const sitePropertyRelationM = async p => {
  126. loading.value = true;
  127. tableLoading.value = true;
  128. if (AllData.publishTime) {
  129. formData.value.startTime = formateDate(AllData.publishTime[0]);
  130. formData.value.endTime = formateDate(AllData.publishTime[1]);
  131. }
  132. let res = await sitePropertyRelation({ ...formData.value, stationCode: projectId.value });
  133. if (res.code == 200) {
  134. tabsList.value = res.data;
  135. total.value = res.total;
  136. loading.value = false;
  137. tableLoading.value = false;
  138. }
  139. data_queryheadsM();
  140. };
  141.  
  142. //获取站点
  143. const getInfolistM = async p => {
  144. let { data, code } = await getInfolist(p);
  145. if (code == 200) {
  146. projectDate.value = data;
  147. let stationCode = data[0]?.stationCode;
  148. projectId.value = stationCode;
  149. data_queryheadsM();
  150. realtimeDataListM();
  151. sitePropertyRelationM();
  152. }
  153. };
  154. //站点点击
  155. function liClick({ stationCode }) {
  156. projectId.value = stationCode;
  157. (AllData.publishTime = [
  158. proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD '),
  159. proxy.moment().format('YYYY-MM-DD 23:59:59'),
  160. ]),
  161. data_queryheadsM();
  162. realtimeDataListM();
  163. sitePropertyRelationM();
  164. }
  165. //表格数据列表接口
  166. const realtimeDataListM = async () => {
  167. let params = {
  168. stationCode: projectId.value,
  169. };
  170. let res = await realtimeDataList(params);
  171. realtimeData.value = Array(res.data);
  172. };
  173. // 表格头部
  174. const data_queryheadsM = async () => {
  175. let params = {
  176. stationCode: projectId.value,
  177. };
  178. let { data } = await data_queryheads(params);
  179. headerList.value = data;
  180. };
  181.  
  182. // 穿梭框
  183. const postPlcinfo = async () => {
  184. transferData.value = [];
  185. leftValue.value = [];
  186. let params = {
  187. dataShow: '',
  188. stationCode: projectId.value,
  189. };
  190. const res = await headRelation(params);
  191. res.data.forEach(element => {
  192. transferData.value.push({ key: element.pointKey, label: element.pointName });
  193. if (element.dataShow == 1) {
  194. leftValue.value.push(element.pointKey);
  195. }
  196. });
  197. };
  198. //穿梭框确定调用的接口
  199. const headConfigM = async row => {
  200. tableLoading.value = true;
  201. let params = {
  202. pointKeys: leftValue.value,
  203. stationCode: projectId.value,
  204. };
  205. let res = await headConfig(params);
  206. console.log(res, 'res11');
  207. tableLoading.value = false;
  208. };
  209.  
  210. //点位配置点击事件
  211. function pointKeyClick() {
  212. visible.value = true;
  213. postPlcinfo();
  214. }
  215. //点位配置确定
  216. function open2() {
  217. visible.value = false;
  218. data_queryheadsM();
  219. headConfigM();
  220. sitePropertyRelationM();
  221. }
  222. //点位配置关闭按钮
  223. function cancel() {
  224. visible.value = false;
  225. }
  226. onMounted(() => {
  227. getInfolistM();
  228. // realtimeDataListM();
  229. // sitePropertyRelationM();
  230. });
  231. </script>
  232.  
  233. <style lang="scss" scoped>
  234. @import '@/assets/styles/variables.module.scss';
  235. .stationCollect {
  236. width: 100%;
  237. .contLeft {
  238. height: calc(100vh - 100px);
  239. background: $mainColor1;
  240. padding: 20px 10px;
  241. .search {
  242. display: flex;
  243. width: 270px;
  244. margin-left: 2%;
  245. align-items: center;
  246. }
  247. }
  248. .ul_date {
  249. margin: 10px 0;
  250. padding: 0;
  251. font-size: 16px;
  252. li {
  253. padding: 5px 10px;
  254. font-size: 14px;
  255. display: flex;
  256. align-items: center;
  257. margin: 10px 5px;
  258. cursor: pointer;
  259. .el-icon {
  260. margin-right: 5px;
  261. }
  262. }
  263. .bgcClsas {
  264. color: #409eff;
  265. }
  266. }
  267. .content {
  268. display: flex;
  269. position: relative;
  270. margin-left: 5px;
  271. }
  272. .contRight {
  273. width: 85%;
  274.  
  275. padding: 10px;
  276. .layout-body {
  277. padding: 20px;
  278. border: 1px solid $mainColor2;
  279. height: calc(100vh - 150px) !important;
  280. overflow: auto;
  281. .top {
  282. margin-bottom: 15px;
  283. }
  284. }
  285. }
  286. }
  287. </style>