合并理去杀杀人

net

2025-02-14 06d3d15a5a08637041cc601101c063b11b07a346

 zhitan-vue/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue

@@ -9,13 +9,16 @@
          <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="能源类型" prop="energyType">
              <el-select v-model="queryParams.energyType" placeholder="能源类型" @change="handleQuery">
                <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList" :key="item.enersno" />
                <el-option
                  :label="item.enername"
                  :value="item.enersno"
                  v-for="item in energyTypeList"
                  :key="item.enersno"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                搜索
              </el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
              <el-button icon="Refresh" @click="resetQuery"> 重置 </el-button>
            </el-form-item>
            <el-form-item>
@@ -23,20 +26,24 @@
            </el-form-item>
          </el-form>
        </div>
        <div style="
            height: calc(100vh - 220px) !important;
            max-height: calc(100vh - 220px) !important;
            overflow-y: auto;
          " v-loading="loading">
        <div
          style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
          v-loading="loading"
        >
          <div v-for="(item, index) in energyRealTimeMonitorList" :key="index" v-show="!!item.deviceArray">
            <BaseCard :title="queryParams.nodeName + '-' + item.energyTypeName" v-if="item.deviceArray.length > 0">
              <el-scrollbar>
                <div class="scrollbar-flex-content">
                  <p></p>
                  <div class="scrollbar-demo-item item-tag" @click="handleClick(item, index1)" v-for="item1,index1 in item.deviceArray" :key="index1" :style="{
                    backgroundColor:
                      index1 == item.activeIndex ? '#5EC894' : '#9841FC',
                  }">
                  <div
                    class="scrollbar-demo-item item-tag"
                    @click="handleClick(item, index1)"
                    v-for="(item1, index1) in item.deviceArray"
                    :key="index1"
                    :style="{
                      backgroundColor: index1 == item.activeIndex ? '#5EC894' : '#9841FC',
                    }"
                  >
                    {{ item1.deviceName }}
                  </div>
                </div>
@@ -71,18 +78,18 @@
                  {{ item.deviceArray[item.activeIndex].energyTypeName }}
                </div>
                <div class="card-box-ul">
                  <div class="card-box-li" v-for="(item2, index2) in item.deviceArray[item.activeIndex]
                    .energyIndexArray">
                  <div
                    class="card-box-li"
                    v-for="(item2, index2) in item.deviceArray[item.activeIndex].energyIndexArray"
                  >
                    <el-tooltip class="box-item" effect="dark" content="查看历史数据" placement="top">
                      <dl @click="handleChartModal(item2)">
                        <dd class="title">
                          {{ item2.name }}
                          <template v-if="!!item2.unit">
                            ({{ item2.unit }})
                          </template>
                          <template v-if="!!item2.unit"> ({{ item2.unit }}) </template>
                        </dd>
                        <dd class="num">
                          {{ item2.value!=null ? item2.value.toFixed(2) : '--' }}
                          {{ item2.value != null ? item2.value.toFixed(2) : "--" }}
                        </dd>
                        <dd class="time">
                          <el-icon>
@@ -105,22 +112,22 @@
  </div>
</template>
<script setup name="energy-real-time-monitor">
import chartModal from "./components/chart-modal.vue";
import { listEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor";
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import chartModal from "./components/chart-modal.vue"
import { listEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
const energyTypeList = ref(undefined);
let energyRealTimeMonitorList = ref([]);
const loading = ref(false);
)
const energyTypeList = ref(undefined)
let energyRealTimeMonitorList = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -128,24 +135,24 @@
    energyType: null,
  },
  query: { ...useRoute().query },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data;
    queryParams.value.energyType = energyTypeList.value[0].enersno;
    handleQuery();
  });
    energyTypeList.value = res.data
    queryParams.value.energyType = energyTypeList.value[0].enersno
    handleQuery()
  })
}
function handleClick(item, index) {
  item.activeIndex = index;
  item.activeIndex = index
}
// 能源实时监控-能源实时监控-列表
function getList() {
  loading.value = true;
  loading.value = true
  listEnergyRealTimeMonitor(
    proxy.addDateRange({
      ...queryParams.value,
@@ -154,31 +161,31 @@
  ).then((res) => {
    if (!!res.code && res.code == 200) {
      res.data.map((item) => {
        item.activeIndex = 0;
      });
      loading.value = false;
      energyRealTimeMonitorList.value = res.data;
        item.activeIndex = 0
      })
      loading.value = false
      energyRealTimeMonitorList.value = res.data
    }
  });
  })
}
// 能源实时监控-能源实时监控-搜索
function handleQuery() {
  energyRealTimeMonitorList.value = [];
  getList();
  energyRealTimeMonitorList.value = []
  getList()
}
// 能源实时监控-能源实时监控-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.energyType = null;
  energyRealTimeMonitorList.value = [];
  handleQuery();
  proxy.resetForm("queryRef")
  queryParams.value.energyType = null
  energyRealTimeMonitorList.value = []
  handleQuery()
}
let chartRef = ref();
let chartRef = ref()

function handleChartModal(row) {
  if (chartRef.value) {
    row.nodeName = queryParams.value.nodeName
    chartRef.value.handleOpen(row);
    chartRef.value.handleOpen(row)
  }
}
</script>
@@ -213,6 +220,7 @@

    &-li {
      width: 18%;
      min-width: 190px;
      margin: 1%;
      border-radius: 5px;
      border: 1px solid #22408c;
@@ -235,11 +243,10 @@
      }

      .num {
        font-size: 22px;
        font-size: 24px;
        color: #36d3ff;
        font-family: OPPOSans, OPPOSans;
        font-weight: 800;
        font-size: 32px;
        text-align: left;
        font-style: normal;
        text-transform: none;
@@ -252,6 +259,7 @@
        text-align: left;
        font-style: normal;
        text-transform: none;
        font-size: 14px;
      }
    }

@@ -423,12 +431,12 @@
.item-tag {
  // width: 13%;
  text-align: center;
  margin: 5px 8px;
  margin: 2px 6px;
  border-radius: 8px;
  padding: 7px 10px;
  padding: 5px 10px;
  font-family: OPPOSans, OPPOSans;
  font-weight: 500;
  font-size: 16px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}