- <template>
- <!-- 厂站数据采集 -->
- <div class="stationCollect publicContainer">
- <div class="content">
- <div class="contLeft">
- <div class="search input">
- <el-input placeholder="站点名称" clearable v-model="searchList.stationName"></el-input>
- <el-button type="primary" @click="searchClick"> 搜索</el-button>
- </div>
- <ul class="ul_date">
- <li v-for="i in projectDate" :class="{ bgcClsas: projectId == i.stationCode }" @click="liClick(i)">
- <el-icon color="#1296db">
- <LocationFilled />
- </el-icon>
- {{ i.stationName }}
- </li>
- </ul>
- </div>
- <div class="contRight">
- <el-button type="primary" size="large" @click="pointKeyClick">点位配置</el-button>
- <div class="layout-body">
- <el-table :data="realtimeData" v-loading="tableLoading" max-height="500" v-if="headerList.length > 0">
- <el-table-column
- v-for="i in headerList"
- :key="i.pointKey"
- :label="i.pointName"
- show-overflow-tooltip
- :prop="i.pointKey"
- width="130"
- />
- </el-table>
- <el-form label-width="auto" ref="ruleForm" inline :model="formData" style="margin-top: 10px">
- <el-form-item label="时间:">
- <el-date-picker
- clearable
- format="YYYY-MM-DD"
- v-model="AllData.publishTime"
- type="datetimerange"
- range-separator="到"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="searchClickTwo(1)">搜索</el-button>
- </el-form-item>
- </el-form>
- <el-table :data="tabsList" v-loading="tableLoading" max-height="500">
- <el-table-column type="index" width="55" label="序号" :index="getIndex" />
- <el-table-column
- v-for="i in headerList"
- :key="i.pointKey"
- :label="i.pointName"
- show-overflow-tooltip
- :prop="i.pointKey"
- width="130"
- />
- </el-table>
- <!-- 分页 -->
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="formData.pageNum"
- v-model:limit="formData.pageSize"
- @pagination="sitePropertyRelationM"
- />
- <!-- 查看详情弹框 -->
- <el-dialog v-model="visible" title="因子配置" :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
- <el-transfer
- v-model="leftValue"
- filterable
- :titles="['未选', '已选']"
- :button-texts="['向左移动', '向右移动']"
- :data="transferData"
- >
- <template #left-footer> </template>
- <template #right-footer> </template>
- </el-transfer>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="open2(1)">确定</el-button>
- <el-button @click="cancel">关闭</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- import { getInfolist } from '@/api/scada/stationInfo';
- import { headRelation, sitePropertyRelation, headConfig, data_queryheads, realtimeDataList } from '@/api/scada/monitor';
- import { formateDate, TimeDefault } from '@/utils/validate';
- const { proxy } = getCurrentInstance();
- const projectDate = ref([]);
- const projectId = ref(0);
- const visible = ref(false);
- const realtimeData = ref([]);
- const total = ref(0);
- const headerList = ref([]);
- let tabsList = ref([]);
- const leftValue = ref([]);
- const transferData = ref([]);
- const searchList = reactive({});
- let tableLoading = ref(true);
- let loading = ref(true);
- const AllData = reactive({
- publishTime: [proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD '), proxy.moment().format('YYYY-MM-DD 23:59:59')],
- formData: { pageNum: 1, pageSize: 10 },
- queryParams: {},
- });
- const { queryParams, formData } = toRefs(AllData);
- console.log(formData.value, 'formData.value');
- //搜索项目
- function searchClick() {
- getInfolistM(searchList);
- }
- const getIndex = index => {
- return (formData.value.pageNum - 1) * formData.value.pageSize + index + 1;
- };
- function searchClickTwo() {
- sitePropertyRelationM();
- }
- const sitePropertyRelationM = async p => {
- loading.value = true;
- tableLoading.value = true;
- if (AllData.publishTime) {
- formData.value.startTime = formateDate(AllData.publishTime[0]);
- formData.value.endTime = formateDate(AllData.publishTime[1]);
- }
- let res = await sitePropertyRelation({ ...formData.value, stationCode: projectId.value });
- if (res.code == 200) {
- tabsList.value = res.data;
- total.value = res.total;
- loading.value = false;
- tableLoading.value = false;
- }
- data_queryheadsM();
- };
-
- //获取站点
- const getInfolistM = async p => {
- let { data, code } = await getInfolist(p);
- if (code == 200) {
- projectDate.value = data;
- let stationCode = data[0]?.stationCode;
- projectId.value = stationCode;
- data_queryheadsM();
- realtimeDataListM();
- sitePropertyRelationM();
- }
- };
- //站点点击
- function liClick({ stationCode }) {
- projectId.value = stationCode;
- (AllData.publishTime = [
- proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD '),
- proxy.moment().format('YYYY-MM-DD 23:59:59'),
- ]),
- data_queryheadsM();
- realtimeDataListM();
- sitePropertyRelationM();
- }
- //表格数据列表接口
- const realtimeDataListM = async () => {
- let params = {
- stationCode: projectId.value,
- };
- let res = await realtimeDataList(params);
- realtimeData.value = Array(res.data);
- };
- // 表格头部
- const data_queryheadsM = async () => {
- let params = {
- stationCode: projectId.value,
- };
- let { data } = await data_queryheads(params);
- headerList.value = data;
- };
-
- // 穿梭框
- const postPlcinfo = async () => {
- transferData.value = [];
- leftValue.value = [];
- let params = {
- dataShow: '',
- stationCode: projectId.value,
- };
- const res = await headRelation(params);
- res.data.forEach(element => {
- transferData.value.push({ key: element.pointKey, label: element.pointName });
- if (element.dataShow == 1) {
- leftValue.value.push(element.pointKey);
- }
- });
- };
- //穿梭框确定调用的接口
- const headConfigM = async row => {
- tableLoading.value = true;
- let params = {
- pointKeys: leftValue.value,
- stationCode: projectId.value,
- };
- let res = await headConfig(params);
- console.log(res, 'res11');
- tableLoading.value = false;
- };
-
- //点位配置点击事件
- function pointKeyClick() {
- visible.value = true;
- postPlcinfo();
- }
- //点位配置确定
- function open2() {
- visible.value = false;
- data_queryheadsM();
- headConfigM();
- sitePropertyRelationM();
- }
- //点位配置关闭按钮
- function cancel() {
- visible.value = false;
- }
- onMounted(() => {
- getInfolistM();
- // realtimeDataListM();
- // sitePropertyRelationM();
- });
- </script>
-
- <style lang="scss" scoped>
- @import '@/assets/styles/variables.module.scss';
- .stationCollect {
- width: 100%;
- .contLeft {
- height: calc(100vh - 100px);
- background: $mainColor1;
- padding: 20px 10px;
- .search {
- display: flex;
- width: 270px;
- margin-left: 2%;
- align-items: center;
- }
- }
- .ul_date {
- margin: 10px 0;
- padding: 0;
- font-size: 16px;
- li {
- padding: 5px 10px;
- font-size: 14px;
- display: flex;
- align-items: center;
- margin: 10px 5px;
- cursor: pointer;
- .el-icon {
- margin-right: 5px;
- }
- }
- .bgcClsas {
- color: #409eff;
- }
- }
- .content {
- display: flex;
- position: relative;
- margin-left: 5px;
- }
- .contRight {
- width: 85%;
-
- padding: 10px;
- .layout-body {
- padding: 20px;
- border: 1px solid $mainColor2;
- height: calc(100vh - 150px) !important;
- overflow: auto;
- .top {
- margin-bottom: 15px;
- }
- }
- }
- }
- </style>