样式优化

ali

2025-02-13 bbffe836ae5b58d71fa68f30d280e99a5cb0af9d

样式优化

 zhitan-vue/src/views/businessconfiguration/gatewayledger/gatewayLedger.vue

@@ -1,131 +1,140 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :inline="true">
                <el-form-item label="网关数量:" class="header-box">
                    {{ total }}
                </el-form-item>
                <el-form-item label="计量器具数量:" class="header-box">
                    {{ statistics.deviceNum }}
                </el-form-item>
                <el-form-item label="测点数量:" class="header-box">
                    {{ statistics.ptNum }}
                </el-form-item>
            </el-form>
        </div>
        <div class="table-box">
            <div class="mt20 mb20">
                <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
                <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="gatewayNum" label="网关编号" show-overflow-tooltip align="center" />
                <el-table-column prop="gatewayName" label="网关名称" show-overflow-tooltip align="center" />
                <el-table-column prop="specsModel" label="规格型号" show-overflow-tooltip align="center" />
                <el-table-column prop="installLocation" label="安装位置" show-overflow-tooltip align="center" />
                <el-table-column prop="ipAdd" label="IP地址" show-overflow-tooltip align="center" />
                <el-table-column prop="runStatus" label="运行状态" show-overflow-tooltip align="center" />
                <el-table-column prop="deviceNum" label="计量器具数量" show-overflow-tooltip align="center" />
                <el-table-column prop="ptNum" label="采集测点数量" show-overflow-tooltip align="center" />
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
                            修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
        <edit-modal ref="EditModalRef" @getList="getList(1)" />
  <div class="page">
    <div class="form-card">
      <el-form :inline="true">
        <el-form-item label="网关数量:" class="header-box">
          <span class="count">{{ total || 0 }}</span>
        </el-form-item>
        <el-form-item label="计量器具数量:" class="header-box">
          <span class="count">{{ deviceNum || 0 }}</span>
        </el-form-item>
        <el-form-item label="测点数量:" class="header-box">
          <span class="count">{{ ptNum || 0 }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
      </div>

      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="gatewayNum" label="网关编号" show-overflow-tooltip align="center" />
          <el-table-column prop="gatewayName" label="网关名称" show-overflow-tooltip align="center" />
          <el-table-column prop="specsModel" label="规格型号" show-overflow-tooltip align="center" />
          <el-table-column prop="installLocation" label="安装位置" show-overflow-tooltip align="center" />
          <el-table-column prop="ipAdd" label="IP地址" show-overflow-tooltip align="center" />
          <el-table-column prop="runStatus" label="运行状态" show-overflow-tooltip align="center" />
          <el-table-column prop="deviceNum" label="计量器具数量" show-overflow-tooltip align="center" />
          <el-table-column prop="ptNum" label="采集测点数量" show-overflow-tooltip align="center" />
          <el-table-column label="操作" width="300" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <edit-modal ref="EditModalRef" @getList="getList(1)" />
  </div>
</template>

<script setup>
import EditModal from './components/EditModal.vue'
import { gatewayStatistics, gatewayList, gatewayDel } from "@/api/businessConfiguration/gatewayLedger";
import EditModal from "./components/EditModal.vue"
import { gatewayStatistics, gatewayList, gatewayDel } from "@/api/businessConfiguration/gatewayLedger"
let { proxy } = getCurrentInstance()

let statistics = ref({
    deviceNum: 0,
    ptNum: 0
  deviceNum: 0,
  ptNum: 0,
})
function getGatewayStatisticsFun() {
    gatewayStatistics().then(res => {
        if (res.code == 200) {
            if (res.data) {
                statistics.value = res.data
            }
        }
    })
  gatewayStatistics().then((res) => {
    if (res.code == 200) {
      if (res.data) {
        statistics.value = res.data
      }
    }
  })
}
getGatewayStatisticsFun()


let loading = ref(false);
let total = ref(0);
let loading = ref(false)
let total = ref(0)
let tableData = ref([])
let queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  pageNum: 1,
  pageSize: 10,
})

function getList(arg) {
    if (arg == 1) {
        queryParams.value.pageNum = 1
    }
    loading.value = true
    gatewayList(queryParams.value).then(res => {
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    })
  if (arg == 1) {
    queryParams.value.pageNum = 1
  }
  loading.value = true
  gatewayList(queryParams.value).then((res) => {
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  })
}
getList()

function handleExport() {
    proxy.download(
        "gatewaySetting/export",
        queryParams.value,
        `网关台账${new Date().getTime()}.xlsx`
    );
  proxy.download("gatewaySetting/export", queryParams.value, `网关台账${new Date().getTime()}.xlsx`)
}

let EditModalRef = ref('')
let EditModalRef = ref("")
function handleAdd(row) {
    if (EditModalRef.value) {
        EditModalRef.value.handleOpen(row)
    }

  if (EditModalRef.value) {
    EditModalRef.value.handleOpen(row)
  }
}

function handleDelete(row) {
    proxy.$modal
        .confirm('是否确认删除网关为"' + row.gatewayName + '"的数据项？')
        .then(function () {
            return gatewayDel(row.id);
        })
        .then(() => {
            getList(1);
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
  proxy.$modal
    .confirm('是否确认删除网关为"' + row.gatewayName + '"的数据项？')
    .then(function () {
      return gatewayDel(row.id)
    })
    .then(() => {
      getList(1)
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";


.header-box {
    :deep .el-form-item__content {
        color: #fff;
        font-size: 16px;
    }

  :deep .el-form-item__content {
    color: #fff;
    font-size: 16px;
  }
}
</style>

.themeDark {
  .count {
    color: #fff;
  }
}

.themeLight {
  .count {
    color: #333;
  }
}
</style>

 zhitan-vue/src/views/comprehensive/monthlyComprehensive/index.vue

@@ -69,10 +69,9 @@
            </template>
          </el-table-column>
          <el-table-column v-for="index in 31" :key="index" :label="index + '日'" align="center" min-width="100">
            <template #default="scope">{{ numFilter(scope.row[`value${index - 1}`]) }}</template>
            <template #default="scope">{{ numFilter(scope.row[`value${index}`]) }}</template>
          </el-table-column>
        </el-table>

        <div>
          <line-chart ref="LineChartRef" :chartData="lineChartData" />
        </div>

 zhitan-vue/src/views/comprehensive/yearComprehensive/index.vue

@@ -69,7 +69,7 @@
            </template>
          </el-table-column>
          <el-table-column v-for="index in 12" :key="index" :label="index + '月'" align="center" min-width="100">
            <template #default="scope">{{ numFilter(scope.row[`value${index - 1}`]) }}</template>
            <template #default="scope">{{ numFilter(scope.row[`value${index}`]) }}</template>
          </el-table-column>
        </el-table>


 zhitan-vue/src/views/costAnalysis/cost-trend-analysis.vue

@@ -1,114 +1,110 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-right">
        <div>
          <div class="form-card">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
              <el-form-item label="期间" prop="timeType">
                <el-select
                  v-model="queryParams.timeType"
                  placeholder="期间"
                  clearable
                  style="width: 120px"
                  @change="handleTimeType"
                >
                  <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="时间" prop="dataTime">
                <el-date-picker
                  v-model="queryParams.dataTime"
                  :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                  :format="
                    queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                  "
                  value-format="YYYY-MM-DD"
                  placeholder="时间"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
              </el-form-item>
              <!-- <el-form-item>
    <div>
      <div class="form-card">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="期间" prop="timeType">
            <el-select
              v-model="queryParams.timeType"
              placeholder="期间"
              clearable
              style="width: 120px"
              @change="handleTimeType"
            >
              <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间" prop="dataTime">
            <el-date-picker
              v-model="queryParams.dataTime"
              :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
              :format="
                queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
              "
              value-format="YYYY-MM-DD"
              placeholder="时间"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
          </el-form-item>
          <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> 导出 </el-button>
            </el-form-item> -->
            </el-form>
          </div>
          <div style="margin-top: 16px">
            <div class="" style="padding: 0 16px">
              <el-table :data="tableData" v-loading="loading">
                <el-table-column label="时间" prop="dateCode" align="center" width="120" />
                <el-table-column label="总费用(元)" prop="total" align="center" width="120" />
                <el-table-column :label="col.energyName" v-for="(col, index) in columns" :key="index" align="center">
                  <el-table-column :prop="'energyTotal' + col.energyType" label="消耗量" width="120" align="center" />
                  <el-table-column :prop="'costTotal' + col.energyType" label="费用（元）" width="120" align="center" />
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="charts-view" v-loading="loading">
            <el-row :gutter="2" class="" v-for="item in chartDataList" :key="item.energyType">
              <el-col :span="12">
                <BaseCard :title="item.costLabel + '(元)'">
                  <div class="">
                    <LineChart
                      :ref="'LineChartCostRef' + item.energyType"
                      :domId="'costDom_' + item.energyType"
                      :chartData="{
                        title: item.costLabel,
                        chartType: 'line',
                        xAxis: item.costKeyList,
                        series: [
                          {
                            name: item.costLabel,
                            data: item.costValueList,
                            markPoint: {
                              data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' },
                              ],
                            },
                          },
                        ],
                      }"
                    />
                  </div>
                </BaseCard>
              </el-col>
              <el-col :span="12">
                <BaseCard :title="item.accumulationLabel + '(' + item.energyUnit + ')'">
                  <div class="">
                    <LineChart
                      :ref="'LineChartaccumulationRef' + item.energyType"
                      :domId="'accumulationDom_' + item.energyType"
                      :chartType="'bar'"
                      :chartData="{
                        title: item.accumulationLabel,
                        chartType: 'bar',
                        xAxis: item.accumulationKeyList,
                        series: [
                          {
                            name: item.accumulationLabel,
                            color: '#19be6b',
                            data: item.accumulationValueList,
                            markPoint: {
                              data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' },
                              ],
                            },
                          },
                        ],
                      }"
                    />
                  </div>
                </BaseCard>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div class="table-bg-style">
        <div class="table-box theme-dark-mt20" style="">
          <el-table :data="tableData" v-loading="loading">
            <el-table-column label="时间" prop="dateCode" align="center" width="160" />
            <el-table-column label="总费用(元)" prop="total" align="center" width="120" />
            <el-table-column :label="col.energyName" v-for="(col, index) in columns" :key="index" align="center">
              <el-table-column :prop="'energyTotal' + col.energyType" label="消耗量" min-width="120" align="center" />
              <el-table-column :prop="'costTotal' + col.energyType" label="费用（元）" min-width="120" align="center" />
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="charts-view" v-loading="loading">
        <el-row :gutter="2" class="" v-for="item in chartDataList" :key="item.energyType">
          <el-col :span="12">
            <BaseCard :title="item.costLabel + '(元)'">
              <div class="">
                <LineChart
                  :ref="'LineChartCostRef' + item.energyType"
                  :domId="'costDom_' + item.energyType"
                  :chartData="{
                    title: item.costLabel,
                    chartType: 'line',
                    xAxis: item.costKeyList,
                    series: [
                      {
                        name: item.costLabel,
                        data: item.costValueList,
                        markPoint: {
                          data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' },
                          ],
                        },
                      },
                    ],
                  }"
                />
              </div>
            </BaseCard>
          </el-col>
          <el-col :span="12">
            <BaseCard :title="item.accumulationLabel + '(' + item.energyUnit + ')'">
              <div class="">
                <LineChart
                  :ref="'LineChartaccumulationRef' + item.energyType"
                  :domId="'accumulationDom_' + item.energyType"
                  :chartType="'bar'"
                  :chartData="{
                    title: item.accumulationLabel,
                    chartType: 'bar',
                    xAxis: item.accumulationKeyList,
                    series: [
                      {
                        name: item.accumulationLabel,
                        color: '#19be6b',
                        data: item.accumulationValueList,
                        markPoint: {
                          data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' },
                          ],
                        },
                      },
                    ],
                  }"
                />
              </div>
            </BaseCard>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
@@ -260,10 +256,27 @@
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
}
.table-box {
  margin-top: 0;
  :deep .el-table--border .el-table__inner-wrapper:after {
    height: 0;
  }

.themeLight {
  :deep .el-table--border:after {
    width: 0;
  }

  :deep .el-table--border:before {
    width: 0;
  }

  :deep .el-table__border-left-patch {
    background: transparent;
  }

  :deep .el-table--border .el-table__cell {
    border-right: none;
  }
}

.charts-view {

 zhitan-vue/src/views/dataMonitoring/historyDataTrend/index.vue

@@ -19,8 +19,8 @@
                  <el-date-picker
                    v-model="queryParams.dataTime"
                    :type="queryParams.timeType == 'DAY' ? 'date' : 'datetime'"
                    :format="queryParams.timeType == 'DAY' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
                    :value-format="queryParams.timeType == 'DAY' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
                    :format="queryParams.timeType == 'DAY' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:00:00'"
                    :value-format="queryParams.timeType == 'DAY' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:00:00'"
                    placeholder="时间"
                    style="width: 100%"
                  />
@@ -118,18 +118,18 @@
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  setTimeout(() => {
    handleTimeType(period.value[0].value)
    handleTimeType(queryParams.value.timeType)
  }, 200)
}
function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00")
  getElectricityMeter({ modelId: queryParams.value.nodeId })
}

function changeTimeType(e) {
  console.log(e)
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00")
  getElectricityMeter({ modelId: queryParams.value.nodeId })
}
const LineChartRef = ref()
@@ -185,7 +185,6 @@
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// 碳排放管理-碳排放量核算-导出

 zhitan-vue/src/views/energyefficiency/benchmarkmanage/benchmarkmanage.vue

@@ -1,122 +1,136 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
                <el-form-item label="标杆编号" prop="code">
                    <el-input v-model="form.code" placeholder="请输入标杆编号" />
                </el-form-item>
                <el-form-item label="标杆类型" prop="type">
                    <el-select v-model="form.type" clearable>
                        <el-option v-for="dict in benchmark_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="标杆等级" prop="grade">
                    <el-select v-model="form.grade" clearable>
                        <el-option v-for="dict in benchmark_grade" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-box">
            <div class=" mt20 mb20">
                <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="code" label="标杆编号" show-overflow-tooltip align="center" />
                <el-table-column prop="type" label="标杆类型" show-overflow-tooltip align="center"
                    :formatter="(row, c) => proxy.selectDictLabel(benchmark_type, row.type)" />
                <el-table-column prop="grade" label="标杆等级" show-overflow-tooltip align="center"
                    :formatter="(row, c) => proxy.selectDictLabel(benchmark_grade, row.grade)" />
                <el-table-column prop="value" label="标杆值" show-overflow-tooltip align="center" />
                <el-table-column prop="nationalNum" label="国标编号" show-overflow-tooltip align="center" />
                <el-table-column prop="createBy" label="录入人" show-overflow-tooltip align="center" />
                <el-table-column prop="createTime" label="录入时间" show-overflow-tooltip align="center" />
                <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center" />
                <el-table-column prop="active" label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
                            修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
        <EditModal ref="EditModalRef" :benchmark_grade="benchmark_grade" :benchmark_type="benchmark_type"
            @getList="getList" />

  <div class="page">
    <div class="form-card">
      <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
        <el-form-item label="标杆编号" prop="code">
          <el-input v-model="form.code" placeholder="请输入标杆编号" />
        </el-form-item>
        <el-form-item label="标杆类型" prop="type">
          <el-select v-model="form.type" clearable>
            <el-option v-for="dict in benchmark_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="标杆等级" prop="grade">
          <el-select v-model="form.grade" clearable>
            <el-option v-for="dict in benchmark_grade" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="code" label="标杆编号" show-overflow-tooltip align="center" />
          <el-table-column
            prop="type"
            label="标杆类型"
            show-overflow-tooltip
            align="center"
            :formatter="(row, c) => proxy.selectDictLabel(benchmark_type, row.type)"
          />
          <el-table-column
            prop="grade"
            label="标杆等级"
            show-overflow-tooltip
            align="center"
            :formatter="(row, c) => proxy.selectDictLabel(benchmark_grade, row.grade)"
          />
          <el-table-column prop="value" label="标杆值" show-overflow-tooltip align="center" />
          <el-table-column prop="nationalNum" label="国标编号" show-overflow-tooltip align="center" />
          <el-table-column prop="createBy" label="录入人" show-overflow-tooltip align="center" />
          <el-table-column prop="createTime" label="录入时间" show-overflow-tooltip align="center" />
          <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center" />
          <el-table-column prop="active" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <EditModal
      ref="EditModalRef"
      :benchmark_grade="benchmark_grade"
      :benchmark_type="benchmark_type"
      @getList="getList"
    />
  </div>
</template>
<script setup>
import EditModal from './components/EditModal.vue'
import { valueManageList, valueManageDel } from '@/api/benchmarkManage'
import EditModal from "./components/EditModal.vue"
import { valueManageList, valueManageDel } from "@/api/benchmarkManage"
let proxy = getCurrentInstance().proxy

let { benchmark_grade, benchmark_type } = proxy.useDict("benchmark_grade", 'benchmark_type')
let { benchmark_grade, benchmark_type } = proxy.useDict("benchmark_grade", "benchmark_type")
let form = ref({
    code: null,
    type: null,
    grade: null,
  code: null,
  type: null,
  grade: null,
})
function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
    queryParams.value.pageNum = 1
    form.value = {}
    handleQuery();
  queryParams.value.pageNum = 1
  form.value = {}
  handleQuery()
}


let loading = ref(false);
let total = ref(0);
let loading = ref(false)
let total = ref(0)
let tableData = ref([])
let queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  pageNum: 1,
  pageSize: 10,
})
function getList(flag) {
    loading.value = true
    valueManageList({ ...queryParams.value, ...form.value }).then(res => {
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    })

  loading.value = true
  valueManageList({ ...queryParams.value, ...form.value }).then((res) => {
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

getList()
let EditModalRef = ref('')
let EditModalRef = ref("")
function handleAdd(row) {
    if (EditModalRef.value) {
        EditModalRef.value.handleOpen(row)
    }

  if (EditModalRef.value) {
    EditModalRef.value.handleOpen(row)
  }
}

function handleDel(row) {
    proxy.$modal.confirm('是否确认删除数据项?').then(function () {
        return valueManageDel(row.id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
  proxy.$modal
    .confirm("是否确认删除数据项?")
    .then(function () {
      return valueManageDel(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

</script>


<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

 zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue

@@ -5,38 +5,44 @@
        <div class="tree page-box">
          <!-- <CardHeader class="mb20">用能单元结构</CardHeader> -->
          <!-- <el-input v-model="filterText" style="width: 240px" placeholder="输入关键字进行过滤" class="mb10" /> -->
          <el-tree ref="treeRef" :props="defaultProps" :data="treeData" node-key="id" highlight-current
            :filter-node-method="filterNode" :default-expanded-keys="treeExpandData" :expand-on-click-node="false"
            @node-click="changeNode" accordion>
          <el-tree
            ref="treeRef"
            :props="defaultProps"
            :data="treeData"
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            :default-expanded-keys="treeExpandData"
            :expand-on-click-node="false"
            @node-click="changeNode"
            accordion
          >
            <template #default="{ node, data }">
              <span>
                <el-tooltip v-if="node.label.length > 6" class="item" effect="dark" :content="node.label"
                  placement="top-end">
                <el-tooltip
                  v-if="node.label.length > 6"
                  class="item"
                  effect="dark"
                  :content="node.label"
                  placement="top-end"
                >
                  <span>{{ node.label.slice(0, 6) + "..." }}</span>
                </el-tooltip>
                <span v-else id="b">{{ node.label }}</span>
              </span>
              <span class="node-opt">
                <el-link title="新增下级节点" icon="Plus" @click="() => addNode(node, data)">
                </el-link>
                <el-link title="修改节点" icon="EditPen" @click="() => editNode(node, data)">
                </el-link>
                <el-link title="删除节点" icon="Delete" @click="() => delNode(node, data)">
                </el-link>
                <el-link title="新增下级节点" icon="Plus" @click="() => addNode(node, data)"> </el-link>
                <el-link title="修改节点" icon="EditPen" @click="() => editNode(node, data)"> </el-link>
                <el-link title="删除节点" icon="Delete" @click="() => delNode(node, data)"> </el-link>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="page-container-right">

        <div class="mb20 mt20 ml20 tab-box">
          <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">
            计量器具配置信息
          </div>
          <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">
            统计指标
          </div>
          <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">计量器具配置信息</div>
          <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">统计指标</div>
          <!-- <el-radio-group v-model="tab">
                                <el-radio-button label="1" @click="handleTab('1')"> 设备配置</el-radio-button>
                                <el-radio-button label="2" @click="handleTab('2')"> 采集指标</el-radio-button>
@@ -45,10 +51,10 @@
        <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
          <div>
            <div class="content-box" v-if="tab == '1'">
              <deviceConfig ref='deviceConfigRef' />
              <deviceConfig ref="deviceConfigRef" />
            </div>
            <div class="content-box1" v-if="tab == '2'">
              <statisticalIndicatorManagement ref='statisticalIndicatorManagementRef' :indexType='"STATISTIC"' />
              <statisticalIndicatorManagement ref="statisticalIndicatorManagementRef" :indexType="'STATISTIC'" />
            </div>
          </div>
        </BaseCard>
@@ -56,18 +62,22 @@
        <!-- <statisticalIndicatorManagement ref="statisticalIndicatorManagementRef" :indexType='"STATISTIC"' /> -->
      </div>
    </div>
    <treeNodeModal ref="treeNodeModalRef" @getList="getTreeList" modelCode="JCZBK_CODE" @addTreeList="addTreeList"
      @addTreeSelectList="addTreeSelectList" />
    <treeNodeModal
      ref="treeNodeModalRef"
      @getList="getTreeList"
      modelCode="JCZBK_CODE"
      @addTreeList="addTreeList"
      @addTreeSelectList="addTreeSelectList"
    />
  </div>

</template>

<script setup>
import treeNodeModal from './components/TreeNodeModal.vue'
import deviceConfig from './components/deviceConfig/DeviceConfig.vue'
import statisticalIndicatorManagement from './components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue';
import { treeList, delModelNode, hasEnergyIndex, } from '@/api/modelConfiguration/indexWarehouse'
const { proxy } = getCurrentInstance();
import treeNodeModal from "./components/TreeNodeModal.vue"
import deviceConfig from "./components/deviceConfig/DeviceConfig.vue"
import statisticalIndicatorManagement from "./components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue"
import { treeList, delModelNode, hasEnergyIndex } from "@/api/modelConfiguration/indexWarehouse"
const { proxy } = getCurrentInstance()

let currentNode = ref()
let treeRef = ref()
@@ -75,12 +85,12 @@
let treeData = ref([])

const defaultProps = ref({
  children: 'children',
  label: 'label',
  children: "children",
  label: "label",
})

//检索树
let filterText = ref('')
let filterText = ref("")

const filterNode = (value, data) => {
  if (!value) return true
@@ -88,14 +98,14 @@
}
watch(filterText, (val) => {
  // 检查treeRef.value是否是一个有效的ElTree实例
  if (treeRef.value && typeof treeRef.value.filter === 'function') {
  if (treeRef.value && typeof treeRef.value.filter === "function") {
    // 调用filter方法
    treeRef.value.filter(val);
    treeRef.value.filter(val)
  } else {
    // treeRef.value无效，处理错误
    console.error('error');
    console.error("error")
  }
});
})

let treeExpandData = ref([])
let isFirstLeafNode = ref(false)
@@ -103,32 +113,31 @@
let statisticalIndicatorManagementRef = ref(null)
//获取树列表
function getTreeList() {
  treeList({ modelCode: 'JCZBK_CODE' }).then(res => {
  treeList({ modelCode: "JCZBK_CODE" }).then((res) => {
    let { data } = res
    treeData.value = data;
    let chooseNode = null;
    treeData.value = data
    let chooseNode = null
    if (data.length > 0) {
      if (data[0].children && data[0].children.length !== 0 && isFirstLeafNode.value) {
        if (data[0].children[0].children && data[0].children[0].children.length !== 0) {
          chooseNode = data[0].children[0].children[0];
          chooseNode = data[0].children[0].children[0]
        } else {
          chooseNode = data[0].children[0];
          chooseNode = data[0].children[0]
        }
      } else {
        chooseNode = data[0];
        chooseNode = data[0]
      }
      currentNode.value = chooseNode;
      treeExpandData.value.push(chooseNode.id);
      currentNode.value = chooseNode
      treeExpandData.value.push(chooseNode.id)
      nextTick(() => {
        treeRef.value.setCurrentKey(chooseNode.id);
        treeRef.value.setCurrentKey(chooseNode.id)
        if (tab.value == 1 && deviceConfigRef.value) {
          deviceConfigRef.value.getList(chooseNode)
        }
        if (tab.value == 2 && statisticalIndicatorManagementRef.value) {
          statisticalIndicatorManagementRef.value.getList(chooseNode)
        }

      });
      })
    }
  })
}
@@ -143,7 +152,7 @@
  treeExpandData.value.push(addedNode.nodeId)
  nextTick(() => {
    treeRef.value.setCurrentNode(newChild)
    currentNode.value = newChild;
    currentNode.value = newChild
    if (tab.value == 1) {
      if (deviceConfigRef.value) {
        deviceConfigRef.value.getList(newChild)
@@ -155,11 +164,10 @@
      }
    }
  })

}
//树点击
function changeNode(data, node, ev) {
  currentNode.value = data;
  currentNode.value = data
  if (tab.value == 1) {
    if (deviceConfigRef.value) {
      deviceConfigRef.value.getList(data)
@@ -171,7 +179,6 @@
    }
  }
}


let treeNodeModalRef = ref(null)

@@ -188,26 +195,27 @@

function delNode(node, data) {
  if (data.children && data.children.length > 0) {
    proxy.$modal.msgWarning('包含子节点，不能进行删除！')
    proxy.$modal.msgWarning("包含子节点，不能进行删除！")
    return
  }

  hasEnergyIndex(data.id).then(response => {
  hasEnergyIndex(data.id).then((response) => {
    if (response.data) {
      proxy.$modal.msgWarning('当前节点下存在指标，不能进行删除！')
      proxy.$modal.msgWarning("当前节点下存在指标，不能进行删除！")
    } else {
      proxy.$modal.confirm('是否确认删除名为"' + data.label + '"的节点?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      proxy.$modal
        .confirm('是否确认删除名为"' + data.label + '"的节点?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          return delModelNode(data.id)
        })
        .then(() => {
          let parent = node.parent
          let children = parent.data.children || parent.data
          let index = children.findIndex(d => d.id === data.id)
          let index = children.findIndex((d) => d.id === data.id)
          children.splice(index, 1)

          nextTick(() => {
@@ -217,10 +225,9 @@
              changeNode(null)
            }
          })
          proxy.$modal.msgSuccess('删除成功')
          proxy.$modal.msgSuccess("删除成功")
        })
        .catch(function () {
        })
        .catch(function () {})
    }
  })
}
@@ -234,15 +241,12 @@
    if (value == 2 && statisticalIndicatorManagementRef.value) {
      statisticalIndicatorManagementRef.value.getList(currentNode.value)
    }

  });

  })
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";


.page-box {
  height: calc(100vh - 145px);
@@ -276,8 +280,6 @@
      margin-right: 5px;
    }
  }


}

:deep .el-tabs__nav-wrap:after {
@@ -298,29 +300,40 @@
.tab-box {
  display: flex;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid #3371EB;
  color: #333;
  border-bottom: 1px solid #3371eb;
  margin-right: 20px;

  .tab-li {
    cursor: pointer;
    border: 1px solid #3371EB;
    border: 1px solid #3371eb;
    padding: 10px 25px;
    border-radius: 5px 5px 0 0;
  }

  .is-tab {
    background: #3371EB;
    background: #3371eb;
    color: #fff;
  }
}

.themeDark {
  .tab-box {
    color: #fff;
  }
}

.themeLight {
  .tab-box {
    color: #333;
  }
}

.content-box {
  height: calc(100vh - 310px) !important;

}

.content-box1 {
  height: calc(100vh - 290px) !important;

}
</style>

 zhitan-vue/src/views/peakvalley/period/period.vue

@@ -555,16 +555,21 @@
    display: flex;
    justify-content: space-between;
    padding: 18px;
    width: 100%;
    overflow: hidden;
    overflow-x: auto;

    .card-list-item {
      width: 19%;
      height: 187px;
      flex-shrink: 0;
      width: 230px;
      height: 188px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 10px 18px 13px 16px;
      margin-right: 12px;

      .item-top {
        display: flex;

 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;
}