节能项目+政策法规

ali

2025-01-23 7fa3671f5a04f6f4943d064bf05f491cff9d5576

节能项目+政策法规

 zhitan-vue/src/api/policy/policy.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
import request from "@/utils/request"

// èŽ·å–列表
export function policyPage(params) {
  return request({
    url: "/policiesRegulations/page",
    method: "get",
    params,
  })
}

// æ–°å¢ž
export function policyAdd(data) {
  return request({
    url: "/policiesRegulations/add",
    method: "post",
    data,
  })
}

// æŸ¥è¯¦æƒ…
export function policyInfo(params) {
  return request({
    url: "/policiesRegulations/detail?id=" + params,
    method: "get",
  })
}

// ç¼–辑
export function policyEdit(data) {
  return request({
    url: "/policiesRegulations/edit",
    method: "post",
    data,
  })
}

//删除
export function policyDel(id) {
  return request({
    url: "/policiesRegulations/delete/" + id,
    method: "delete",
  })
}

 zhitan-vue/src/api/policy/project.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
import request from "@/utils/request"

// èŽ·å–列表
export function projectPage(params) {
  return request({
    url: "/energySavingProject/page",
    method: "get",
    params,
  })
}

// æ–°å¢ž
export function projectAdd(data) {
  return request({
    url: "/energySavingProject/add",
    method: "post",
    data,
  })
}

// æŸ¥è¯¦æƒ…
export function projectInfo(params) {
  return request({
    url: "/energySavingProject/getById?id=" + params,
    method: "get",
  })
}

// ç¼–辑
export function projectEdit(data) {
  return request({
    url: "/energySavingProject/edit",
    method: "post",
    data,
  })
}

//删除
export function projectDel(id) {
  return request({
    url: "/energySavingProject/del/" + id,
    method: "delete",
  })
}

 zhitan-vue/src/components/FileUpload/index.vue

@@ -20,8 +20,12 @@
    <!-- ä¸Šä¼ æç¤º -->
    <div class="el-upload__tip" v-if="showTip">
      è¯·ä¸Šä¼ 
      <template v-if="fileSize"> å¤§å°ä¸è¶…过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
      <template v-if="fileType"> æ ¼å¼ä¸º <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
      <template v-if="fileSize">
        å¤§å°ä¸è¶…过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
      </template>
      <template v-if="fileType">
        æ ¼å¼ä¸º <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
      </template>
      çš„文件
    </div>
    <!-- æ–‡ä»¶åˆ—表 -->
@@ -39,7 +43,7 @@
</template>

<script setup>
import { getToken } from "@/utils/auth";
import { getToken } from "@/utils/auth"
const props = defineProps({
  modelValue: [String, Object, Array],
  // æ•°é‡é™åˆ¶
@@ -55,110 +59,112 @@
  // æ–‡ä»¶ç±»åž‹, ä¾‹å¦‚['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => ["doc", "xls", "ppt", "txt", "pdf","docx"],
    default: () => ["doc", "xls", "ppt", "txt", "pdf", "docx"],
  },
  // æ˜¯å¦æ˜¾ç¤ºæç¤º
  isShowTip: {
    type: Boolean,
    default: true
  }
});
    default: true,
  },
})

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const number = ref(0);
const uploadList = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // ä¸Šä¼ æ–‡ä»¶æœåŠ¡å™¨åœ°å€
const headers = ref({ Authorization: "Bearer " + getToken() });
const fileList = ref([]);
const showTip = computed(
  () => props.isShowTip && (props.fileType || props.fileSize)
);
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const number = ref(0)
const uploadList = ref([])
const baseUrl = import.meta.env.VITE_APP_BASE_API
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload") // ä¸Šä¼ æ–‡ä»¶æœåŠ¡å™¨åœ°å€
const headers = ref({ Authorization: "Bearer " + getToken() })
const fileList = ref([])
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))

watch(() => props.modelValue, val => {
  if (val) {
    let temp = 1;
    // é¦–先将值转为数组
    const list = Array.isArray(val) ? val : props.modelValue.split(',');
    // ç„¶åŽå°†æ•°ç»„转为对象数组
    fileList.value = list.map(item => {
      if (typeof item === "string") {
        item = { name: item, url: item };
      }
      item.uid = item.uid || new Date().getTime() + temp++;
      return item;
    });
  } else {
    fileList.value = [];
    return [];
  }
},{ deep: true, immediate: true });
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      let temp = 1
      // é¦–先将值转为数组
      const list = Array.isArray(val) ? val : props.modelValue.split(",")
      // ç„¶åŽå°†æ•°ç»„转为对象数组
      fileList.value = list.map((item) => {
        if (typeof item === "string") {
          item = { name: item, url: item }
        }
        item.uid = item.uid || new Date().getTime() + temp++
        return item
      })
    } else {
      fileList.value = []
      return []
    }
  },
  { deep: true, immediate: true }
)

// ä¸Šä¼ å‰æ ¡æ£€æ ¼å¼å’Œå¤§å°
function handleBeforeUpload(file) {
  // æ ¡æ£€æ–‡ä»¶ç±»åž‹
  if (props.fileType.length) {
    const fileName = file.name.split('.');
    const fileExt = fileName[fileName.length - 1];
    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
    const fileName = file.name.split(".")
    const fileExt = fileName[fileName.length - 1]
    const isTypeOk = props.fileType.indexOf(fileExt) >= 0
    if (!isTypeOk) {
      proxy.$modal.msgError(`文件格式不正确, è¯·ä¸Šä¼ ${props.fileType.join("/")}格式文件!`);
      return false;
      proxy.$modal.msgError(`文件格式不正确, è¯·ä¸Šä¼ ${props.fileType.join("/")}格式文件!`)
      return false
    }
  }
  // æ ¡æ£€æ–‡ä»¶å¤§å°
  if (props.fileSize) {
    const isLt = file.size / 1024 / 1024 < props.fileSize;
    const isLt = file.size / 1024 / 1024 < props.fileSize
    if (!isLt) {
      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
      return false;
      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
      return false
    }
  }
  proxy.$modal.loading("正在上传文件，请稍候...");
  number.value++;
  return true;
  proxy.$modal.loading("正在上传文件，请稍候...")
  number.value++
  return true
}

// æ–‡ä»¶ä¸ªæ•°è¶…出
function handleExceed() {
  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} ä¸ª!`);
  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} ä¸ª!`)
}

// ä¸Šä¼ å¤±è´¥
function handleUploadError(err) {
  proxy.$modal.msgError("上传文件失败");
  proxy.$modal.msgError("上传文件失败")
}

// ä¸Šä¼ æˆåŠŸå›žè°ƒ
function handleUploadSuccess(res, file) {
  if (res.code === 200) {
    uploadList.value.push({ name: res.fileName, url: res.fileName });
    uploadedSuccessfully();
    uploadList.value.push({ name: res.fileName, url: res.fileName, fullUrl: res.url })
    uploadedSuccessfully()
  } else {
    number.value--;
    proxy.$modal.closeLoading();
    proxy.$modal.msgError(res.msg);
    proxy.$refs.fileUpload.handleRemove(file);
    uploadedSuccessfully();
    number.value--
    proxy.$modal.closeLoading()
    proxy.$modal.msgError(res.msg)
    proxy.$refs.fileUpload.handleRemove(file)
    uploadedSuccessfully()
  }
}

// åˆ é™¤æ–‡ä»¶
function handleDelete(index) {
  fileList.value.splice(index, 1);
  emit("update:modelValue", fileList.value);
  fileList.value.splice(index, 1)
  emit("update:modelValue", fileList.value)
}

// ä¸Šä¼ ç»“束处理
function uploadedSuccessfully() {
  if (number.value > 0 && uploadList.value.length === number.value) {
    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
    uploadList.value = [];
    number.value = 0;
    fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value)
    uploadList.value = []
    number.value = 0
    console.log(fileList.value)
    emit("update:modelValue", fileList.value);
    proxy.$modal.closeLoading();
    emit("update:modelValue", fileList.value)
    proxy.$modal.closeLoading()
  }
}

@@ -166,22 +172,22 @@
function getFileName(name) {
  // å¦‚果是url那么取最后的名字 å¦‚果不是直接返回
  if (name.lastIndexOf("/") > -1) {
    return name.slice(name.lastIndexOf("/") + 1);
    return name.slice(name.lastIndexOf("/") + 1)
  } else {
    return name;
    return name
  }
}

// å¯¹è±¡è½¬æˆæŒ‡å®šå­—符串分隔
function listToString(list, separator) {
  let strs = "";
  separator = separator || ",";
  let strs = ""
  separator = separator || ","
  for (let i in list) {
    if (list[i].url) {
      strs += list[i].url + separator;
      strs += list[i].url + separator
    }
  }
  return strs != '' ? strs.substr(0, strs.length - 1) : '';
  return strs != "" ? strs.substr(0, strs.length - 1) : ""
}
</script>


 zhitan-vue/src/utils/dict.js

@@ -1,24 +1,30 @@
import useDictStore from '@/store/modules/dict'
import { getDicts } from '@/api/system/dict/data'
import useDictStore from "@/store/modules/dict"
import { getDicts } from "@/api/system/dict/data"

/**
 * èŽ·å–字典数据
 */
export function useDict(...args) {
  const res = ref({});
  const res = ref({})
  return (() => {
    args.forEach((dictType, index) => {
      res.value[dictType] = [];
      const dicts = useDictStore().getDict(dictType);
      res.value[dictType] = []
      const dicts = useDictStore().getDict(dictType)
      if (dicts) {
        res.value[dictType] = dicts;
        res.value[dictType] = dicts
      } else {
        getDicts(dictType).then(resp => {
          res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
          useDictStore().setDict(dictType, res.value[dictType]);
        getDicts(dictType).then((resp) => {
          console.log(resp)
          res.value[dictType] = resp.data.map((p) => ({
            label: p.dictLabel,
            value: p.dictValue,
            elTagType: p.listClass,
            elTagClass: p.cssClass,
          }))
          useDictStore().setDict(dictType, res.value[dictType])
        })
      }
    })
    return toRefs(res.value);
    return toRefs(res.value)
  })()
}
}

 zhitan-vue/src/views/energyconservation/policyrule/components/EditModal.vue

@@ -1,92 +1,116 @@
<template>
    <el-dialog v-model="visible" :title="title" width="600" @close="handleClose">
        <el-form :model="form" ref="queryRef" :rules="formRules" label-width="120px" v-loading="loading">
            <el-form-item label="文件标题" prop="limitName">
                <el-input v-model="form.value1" placeholder="请输入文件标题" />
            </el-form-item>
            <el-form-item label="文件类别">
                <el-select v-model="form.value2" placeholder="请选择">
                    <el-option v-for="item in 6" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="text-right">
            <el-button type="primary" @click="submitForm" :loading="loading">ç¡® å®š</el-button>
            <el-button @click="handleClose">取 æ¶ˆ</el-button>
        </div>
    </el-dialog>
  <el-dialog v-model="visible" :title="title" width="600" @close="handleClose">
    <el-form :model="form" ref="queryRef" :rules="formRules" label-width="120px" v-loading="loading">
      <el-form-item label="文件标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入文件标题" />
      </el-form-item>
      <el-form-item label="文件类别" prop="type">
        <el-select v-model="form.type" placeholder="文件类别" style="width: 100%">
          <el-option v-for="dict in policy_sort" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="印发部门" prop="dept">
        <el-input v-model="form.dept" placeholder="请输入印发部门" />
      </el-form-item>
      <el-form-item label="印发时间" prop="issuingTime">
        <el-date-picker
          v-model="form.issuingTime"
          type="date"
          placeholder="请选择印发时间"
          format="YYYY-MM-DD"
          date-format="YYYY/MM/DD"
        />
      </el-form-item>
      <el-form-item label="附件" prop="url">
        <FileUpload :limit="1" :modelValue="fileList" @update:modelValue="(val) => (fileList = val)"></FileUpload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="text-right">
      <el-button type="primary" @click="submitForm" :loading="loading">ç¡® å®š</el-button>
      <el-button @click="handleClose">取 æ¶ˆ</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
const { proxy } = getCurrentInstance();

import { policyAdd, policyEdit } from "@/api/policy/policy"
const { proxy } = getCurrentInstance()
const { policy_sort } = proxy.useDict("policy_sort")

let visible = ref(false)
let title = ref('')
let title = ref("")
let loading = ref(false)
let form = ref({
    value1: '',
    value2: '',
  title: "",
  type: "",
  url: "",
})
let emit = defineEmits(['get-list'])
const fileList = ref([])
let emit = defineEmits(["get-list"])
const formRules = {
    value1: [{ required: true, trigger: "blur", message: "请输入文件标题" }],
    value2: [{ required: true, trigger: "change", message: "请选择文件类型" }],
  title: [{ required: true, trigger: "blur", message: "请输入文件标题" }],
  type: [{ required: true, trigger: "change", message: "请选择文件类型" }],
}

function submitForm() {
    proxy.$refs.queryRef.validate(valid => {
        if (valid) {
            // loading.value = true;
            // let obj = form.value.id ? alarmEdit(form.value) : alarmAdd(form.value)
            // obj.then((res) => {
            //     if (res.code == 200) {
            //         proxy.$modal.msgSuccess(res.message);
            //         emit('get-list')
            //     } else {
            //         proxy.$modal.msgError(res.message);
            //     }

            // }).catch((err) => {

            // }).finally(() => {
            //     handleClose()
            // });
        }
    })
  proxy.$refs.queryRef.validate((valid) => {
    if (valid) {
      loading.value = true
      if (fileList.value.length > 0) {
        form.value.url = fileList.value[0].fullUrl
      } else {
        form.value.url = ""
      }
      let obj = form.value.id ? policyEdit(form.value) : policyAdd(form.value)
      obj
        .then((res) => {
          if (res.code == 200) {
            proxy.$modal.msgSuccess(res.msg)
            emit("get-list")
            handleClose()
          } else {
            proxy.$modal.msgError(res.msg)
          }
        })
        .catch((err) => {})
        .finally(() => {
          loading.value = false
        })
    }
  })
}





function handleOpen(row) {
    if (row && row.id) {
        title.value = "编辑政策法规"
        form.value = JSON.parse(JSON.stringify(row))
    } else {
        title.value = "添加政策法规"
  fileList.value = []
  if (row && row.id) {
    title.value = "编辑政策法规"
    form.value = JSON.parse(JSON.stringify(row))
    if (row.url) {
      fileList.value = [
        {
          url: row.url,
          name: row.url,
        },
      ]
    }
    visible.value = true
  } else {
    title.value = "添加政策法规"
    fileList.value = []
  }
  visible.value = true
}

function handleClose(value) {
    visible.value = false
    loading.value = false
    proxy.$refs.queryRef.resetFields()
    form.value = {
        value1: '',
        value2: '',

    }
  visible.value = false
  loading.value = false
  proxy.$refs.queryRef.resetFields()
  form.value = {
    value1: "",
    value2: "",
  }
}

defineExpose({ handleOpen })

</script>



<style lang="scss" scoped></style>
<style lang="scss" scoped></style>

 zhitan-vue/src/views/energyconservation/policyrule/policyRule.vue

@@ -1,123 +1,128 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
                <el-form-item label="文件类别">
                    <el-select v-model="queryParams.value1" placeholder="请选择">
                        <el-option v-for="item in 6" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文件标题">
                    <el-input v-model="queryParams.value2" placeholder="请输入文件标题" />
                </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>
                <!-- <el-button type="primary" icon="Delete">删除</el-button> -->
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="value1" label="文件标题" show-overflow-tooltip align="center" />
                <el-table-column prop="value2" label="文件类别" show-overflow-tooltip align="center" />
                <el-table-column prop="value3" 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="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" @get-list="getList" />
  <div class="page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
        <el-form-item label="文件标题">
          <el-input v-model="queryParams.title" placeholder="请输入文件标题" clearable />
        </el-form-item>
        <el-form-item label="文件类别">
          <el-select v-model="queryParams.type" placeholder="文件类别" style="width: 100%" clearable>
            <el-option v-for="dict in policy_sort" :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>
        <!-- <el-button type="primary" icon="Delete">删除</el-button> -->
      </div>
      <el-table :data="tableData" v-loading="loading">
        <el-table-column prop="title" label="文件标题" show-overflow-tooltip align="center" />
        <el-table-column prop="typeName" label="文件类别" show-overflow-tooltip align="center" />
        <el-table-column prop="dept" label="印发部门" show-overflow-tooltip align="center" />
        <el-table-column prop="issuingTime" label="印发时间" show-overflow-tooltip align="center" />
        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.url" link type="primary" icon="Files" @click="handleFile(scope.row.url)">
              é™„件
            </el-button>
            <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" @get-list="getList" />
  </div>
</template>

<script setup>
import EditModal from './components/EditModal'
import EditModal from "./components/EditModal"
import { policyPage, policyDel } from "@/api/policy/policy"
const { proxy } = getCurrentInstance()
const { policy_sort } = proxy.useDict("policy_sort")

let { proxy } = getCurrentInstance()
let loading = ref(false);
let total = ref(2);
let tableData = ref([
    { id: 1, value1: '1111', value2: 'value2', value3: '2024å¹´10月17日11:15:39' },
    { id: 2, value1: '222', value2: '222', value3: '2024å¹´10月17日11:16:39' }])
let loading = ref(false)
let total = ref(2)
let tableData = ref([])
let queryParams = ref({
    value1: '',
    value2: '',
    pageNum: 1,
    pageSize: 10,
  value1: "",
  value2: "",
  pageNum: 1,
  pageSize: 10,
})

function getList() {
    // loading.value = true
    // alarmList(queryParams.value).then(res => {
    //     console.log(res.rows)
    //     tableData.value = res.rows
    //     total.value = res.total
    //     loading.value = false
    // })
  loading.value = true
  policyPage(queryParams.value).then((res) => {
    console.log(res.rows)
    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 alarmDel(row.id);
    // }).then(() => {
    //     getList();
    //     proxy.$modal.msgSuccess("删除成功");
    // }).catch(() => { });
  proxy.$modal
    .confirm("是否确认删除数据项?")
    .then(function () {
      return policyDel(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

function handleFile(url) {
  window.open(url)
}

function handleQuery() {
    queryParams.value.pageNum = 1
    getList()

  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
    queryParams.value = {
        value1: '',
        value2: '',
        pageNum: 1,
        pageSize: 10,
    }
    getList()
  queryParams.value = {
    value1: "",
    value2: "",
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}


</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>
</style>

 zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/components/EditModal.vue

@@ -1,124 +1,124 @@
<template>
    <el-dialog v-model="visible" :title="title" width="600" @close="handleClose">
        <el-form :model="form" ref="queryRef" :rules="formRules" label-width="120px" v-loading="loading">
            <el-form-item label="项目名称" prop="value1">
                <el-input v-model="form.value1" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="节能计划" prop="value2">
                <el-input v-model="form.value2" placeholder="请输入节能计划" />
            </el-form-item>
            <el-form-item label="节能目标" prop="value3">
                <el-input v-model="form.value3" placeholder="请输入节能目标" />
            </el-form-item>
            <el-form-item label="开始时间" prop="value4">
                <el-date-picker v-model="form.value4" type="date" placeholder="请选择开始时间" format="YYYY-MM-DD"
                    date-format="YYYY/MM/DD" />
            </el-form-item>
            <el-form-item label="结束时间" prop="value5">
                <el-date-picker v-model="form.value5" type="date" placeholder="请选择结束时间" format="YYYY-MM-DD"
                    date-format="YYYY/MM/DD" />
            </el-form-item>
            <el-form-item label="负责人" prop="value6">
                <el-input v-model="form.value6" placeholder="请输入负责人" />
            </el-form-item>
            <el-form-item label="制定时检" prop="value7">
                <el-date-picker v-model="form.value7" type="date" placeholder="请选择制定时检" format="YYYY-MM-DD"
                    date-format="YYYY/MM/DD" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="text-right">
            <el-button type="primary" @click="submitForm" :loading="loading">ç¡® å®š</el-button>
            <el-button @click="handleClose">取 æ¶ˆ</el-button>
        </div>
    </el-dialog>
  <el-dialog v-model="visible" :title="title" width="600" @close="handleClose">
    <el-form :model="form" ref="queryRef" :rules="formRules" label-width="120px" v-loading="loading">
      <el-form-item label="总体计划" prop="plan">
        <el-input v-model="form.plan" placeholder="请输入总体计划" />
      </el-form-item>
      <el-form-item label="实施计划" prop="implementationPlan">
        <el-input v-model="form.implementationPlan" placeholder="请输入实施计划" />
      </el-form-item>
      <el-form-item label="当前工作" prop="currentWork">
        <el-input v-model="form.currentWork" placeholder="请输入当前工作" />
      </el-form-item>
      <el-form-item label="节约量" prop="savingAmount">
        <el-input-number style="width: 100%" v-model="form.savingAmount" placeholder="请输入节约量" />
      </el-form-item>
      <!-- <el-form-item label="开始时间" prop="value4">
        <el-date-picker
          v-model="form.value4"
          type="date"
          placeholder="请选择开始时间"
          format="YYYY-MM-DD"
          date-format="YYYY/MM/DD"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="value5">
        <el-date-picker
          v-model="form.value5"
          type="date"
          placeholder="请选择结束时间"
          format="YYYY-MM-DD"
          date-format="YYYY/MM/DD"
        />
      </el-form-item> -->
      <el-form-item label="负责人" prop="liablePerson">
        <el-input v-model="form.liablePerson" placeholder="请输入负责人" />
      </el-form-item>
      <el-form-item label="完成时间" prop="completionTime">
        <el-date-picker
          v-model="form.completionTime"
          type="date"
          placeholder="请选择完成时间"
          format="YYYY-MM-DD"
          date-format="YYYY/MM/DD"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="text-right">
      <el-button type="primary" @click="submitForm" :loading="loading">ç¡® å®š</el-button>
      <el-button @click="handleClose">取 æ¶ˆ</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { alarmAdd, alarmEdit } from '@/api/businessConfiguration/businessConfiguration'
const { proxy } = getCurrentInstance();
let props = defineProps(['alarmTypeList', 'operatorList'])

import { projectEdit, projectAdd } from "@/api/policy/project"
const { proxy } = getCurrentInstance()
let props = defineProps(["alarmTypeList", "operatorList"])

let visible = ref(false)
let title = ref('')
let title = ref("")
let loading = ref(false)
let form = ref({
    value1: null,
    value2: null,
    value3: null,
    value4: null,
    value5: null,
    value6: null,
    value7: null,

  plan: null,
  implementationPlan: null,
  remark: null,
  liablePerson: null,
  currentWork: null,
  completionTime: null,
  savingAmount: null,
})
let emit = defineEmits(['getList'])
let emit = defineEmits(["getList"])
const formRules = {
    value1: [{ required: true, trigger: "blur", message: "请输入项目名称" }],
    value2: [{ required: true, trigger: "blur", message: "请输入节能计划" }],
    value3: [{ required: true, trigger: "blur", message: "请输入节能目标" }],
    value4: [{ required: true, trigger: "blur", message: "请选择开始时间" }],
    value5: [{ required: true, trigger: "blur", message: "请选择结束时间" }],
    value6: [{ required: true, trigger: "blur", message: "请输入负责人" }],
    value7: [{ required: true, trigger: "blur", message: "请选择制定时检" }],

  plan: [{ required: true, trigger: "blur", message: "请输入必填项" }],
  implementationPlan: [{ required: true, trigger: "blur", message: "请输入必填项" }],
  savingAmount: [{ required: true, trigger: "blur", message: "请输入必填项" }],
  liablePerson: [{ required: true, trigger: "blur", message: "请输入必填项" }],
  currentWork: [{ required: true, trigger: "blur", message: "请输入必填项" }],
}

function submitForm() {
    proxy.$refs.queryRef.validate(valid => {
        if (valid) {
            // loading.value = true;
            // let obj = form.value.id ? alarmEdit(form.value) : alarmAdd(form.value)
            // obj.then((res) => {
            //     if (res.code == 200) {
            //         proxy.$modal.msgSuccess(res.message);
            //         emit('getList')
            //     } else {
            //         proxy.$modal.msgError(res.message);
            //     }

            // }).catch((err) => {

            // }).finally(() => {
            //     handleClose()
            // });
        }
    })
  proxy.$refs.queryRef.validate((valid) => {
    if (valid) {
      loading.value = true
      let obj = form.value.id ? projectEdit(form.value) : projectAdd(form.value)
      obj
        .then((res) => {
          if (res.code == 200) {
            proxy.$modal.msgSuccess(res.msg)
            emit("getList")
            handleClose()
          } else {
            proxy.$modal.msgError(res.msg)
          }
        })
        .catch((err) => {})
        .finally(() => {})
    }
  })
}





function handleOpen(row) {
    if (row && row.id) {
        title.value = "编辑节能项目管理"
        form.value = JSON.parse(JSON.stringify(row))
    } else {
        title.value = "添加节能项目管理"
    }
    visible.value = true
  if (row && row.id) {
    title.value = "编辑节能项目管理"
    form.value = JSON.parse(JSON.stringify(row))
  } else {
    title.value = "添加节能项目管理"
  }
  visible.value = true
}

function handleClose(value) {
    visible.value = false
    loading.value = false
    proxy.$refs.queryRef.resetFields()
    form.value = {
        value1: null,
        value2: null,
        value3: null,
        value4: null,
        value5: null,
        value6: null,
        value7: null,
    }
  visible.value = false
  loading.value = false
  proxy.$refs.queryRef.resetFields()
  form.value = {}
}

defineExpose({ handleOpen })

</script>



<style lang="scss" scoped></style>

 zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/projectManage.vue

@@ -1,135 +1,136 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
                <el-form-item label="项目名称">
                    <el-input v-model="queryParams.value1" placeholder="请输入项目名称" />
                </el-form-item>
                <el-form-item label="统计时间">
                    <el-date-picker v-model="queryParams.value2" type="daterange" start-placeholder="选择开始时间"
                        end-placeholder="选择结束时间" format="YYYY-MM-DD" date-format="YYYY/MM/DD" />
                </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>
                <el-button type="primary" icon="Download" @click="handleAdd"> å¯¼å‡º </el-button>
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="value1" label="项目名称" show-overflow-tooltip align="center" />
                <el-table-column prop="value2" label="节能计划" show-overflow-tooltip align="center" />
                <el-table-column prop="value3" label="节能目标" show-overflow-tooltip align="center" />
                <el-table-column prop="value4" label="开始时间" show-overflow-tooltip align="center" />
                <el-table-column prop="value5" label="结束时间" show-overflow-tooltip align="center" />
                <el-table-column prop="value6" label="负责人" show-overflow-tooltip align="center" />
                <el-table-column prop="value7" label="制定时检" show-overflow-tooltip align="center" />
                <el-table-column prop="value8" label="创建人" show-overflow-tooltip align="center" />

                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Files" @click=" ">
                            é™„件
                        </el-button>
                        <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>
        <edit-modal ref="EditModalRef" @getList="getList" />
  <div class="page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
        <el-form-item label="总体计划">
          <el-input v-model="queryParams.plan" placeholder="请输入总体计划" />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="queryParams.liablePerson" placeholder="请输入负责人" />
        </el-form-item>
        <!-- <el-form-item label="统计时间">
          <el-date-picker
            v-model="queryParams.value2"
            type="daterange"
            start-placeholder="选择开始时间"
            end-placeholder="选择结束时间"
            format="YYYY-MM-DD"
            date-format="YYYY/MM/DD"
          />
        </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>
        <!-- <el-button type="primary" icon="Download" @click="handleAdd"> å¯¼å‡º </el-button> -->
      </div>
      <el-table :data="tableData" v-loading="loading">
        <el-table-column prop="plan" label="总体计划" show-overflow-tooltip align="center" />
        <el-table-column prop="implementationPlan" label="实施计划" show-overflow-tooltip align="center" />
        <el-table-column prop="savingAmount" label="节约量" show-overflow-tooltip align="center" />
        <!-- <el-table-column prop="value4" label="开始时间" show-overflow-tooltip align="center" />
        <el-table-column prop="value5" label="结束时间" show-overflow-tooltip align="center" /> -->
        <el-table-column prop="currentWork" label="当前工作" show-overflow-tooltip align="center" />
        <el-table-column prop="liablePerson" label="负责人" show-overflow-tooltip align="center" />
        <el-table-column prop="completionTime" 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 label="操作" width="300" align="center">
          <template #default="scope">
            <!-- <el-button link type="primary" icon="Files" @click=""> é™„件 </el-button> -->
            <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>
    <edit-modal ref="EditModalRef" @getList="getList" />
  </div>
</template>

<script setup>
import EditModal from './components/EditModal.vue'

import EditModal from "./components/EditModal.vue"
import { projectPage, projectDel } from "@/api/policy/project"

let { proxy } = getCurrentInstance()
let loading = ref(false);
let total = ref(0);
let tableData = ref([
    {id:1, value1: '1', value2: '2', value3: '3', value4: '4', value5: '5', value6: '6', value7: '7', value8: '8' },
    { id:2, value1: '1', value2: '2', value3: '3', value4: '4', value5: '5', value6: '6', value7: '7', value8: '8' },
    { id:3, value1: '1', value2: '2', value3: '3', value4: '4', value5: '5', value6: '6', value7: '7', value8: '8' },
    { id:4, value1: '1', value2: '2', value3: '3', value4: '4', value5: '5', value6: '6', value7: '7', value8: '8' },
])
let loading = ref(false)
let total = ref(0)
let tableData = ref([])
let queryParams = ref({
    value1: '',
    value2: [],
    pageNum: 1,
    pageSize: 10,
  value1: "",
  value2: [],
  pageNum: 1,
  pageSize: 10,
})

function getList() {
    // loading.value = true
    // alarmList(queryParams.value).then(res => {
    //     console.log(res.rows)
    //     tableData.value = res.rows
    //     total.value = res.total
    //     loading.value = false
    // })
  loading.value = true
  projectPage(queryParams.value).then((res) => {
    console.log(res.rows)
    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 alarmDel(row.id);
    // }).then(() => {
    //     getList();
    //     proxy.$modal.msgSuccess("删除成功");
    // }).catch(() => { });
  proxy.$modal
    .confirm("是否确认删除数据项?")
    .then(function () {
      return projectDel(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

function handleQuery() {
    queryParams.value.pageNum = 1
    getList()

  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
    queryParams.value = {
        value1: '',
        value2: [],
        pageNum: 1,
        pageSize: 10,
    }
    getList()
  queryParams.value = {
    value1: "",
    value2: [],
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}


</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>
</style>

 zhitan-vue/src/views/monitor/cache/index.vue

@@ -3,39 +3,72 @@
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">基本信息</span></template>
          <template #header
            ><Monitor style="width: 1em; height: 1em; vertical-align: middle" />
            <span style="vertical-align: middle">基本信息</span></template
          >
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">
                      {{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}
                    </div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">
                      {{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}
                    </div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
                  </td>
                  <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="cache.info">
                      {{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
@@ -45,7 +78,10 @@

      <el-col :span="12" class="card-box">
        <el-card>
          <template #header><PieChart style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">命令统计</span></template>
          <template #header
            ><PieChart style="width: 1em; height: 1em; vertical-align: middle" />
            <span style="vertical-align: middle">命令统计</span></template
          >
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 420px" />
          </div>
@@ -54,7 +90,10 @@

      <el-col :span="12" class="card-box">
        <el-card>
          <template #header><Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">内存信息</span></template>
          <template #header
            ><Odometer style="width: 1em; height: 1em; vertical-align: middle" />
            <span style="vertical-align: middle">内存信息</span></template
          >
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="usedmemory" style="height: 420px" />
          </div>
@@ -65,25 +104,25 @@
</template>

<script setup name="Cache">
import { getCache } from '@/api/monitor/cache';
import * as echarts from 'echarts';
import { getCache } from "@/api/monitor/cache"
import * as echarts from "echarts"

const cache = ref([]);
const commandstats = ref(null);
const usedmemory = ref(null);
const { proxy } = getCurrentInstance();
const cache = ref([])
const commandstats = ref(null)
const usedmemory = ref(null)
const { proxy } = getCurrentInstance()

function getList() {
  proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
  getCache().then(response => {
    proxy.$modal.closeLoading();
    cache.value = response.data;
  proxy.$modal.loading("正在加载缓存监控数据，请稍候！")
  getCache().then((response) => {
    proxy.$modal.closeLoading()
    cache.value = response.data

    const commandstatsIntance = echarts.init(commandstats.value, "macarons");
    const commandstatsIntance = echarts.init(commandstats.value, "macarons")
    commandstatsIntance.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
@@ -94,14 +133,14 @@
          center: ["50%", "38%"],
          data: response.data.commandStats,
          animationEasing: "cubicInOut",
          animationDuration: 1000
        }
      ]
    });
    const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
          animationDuration: 1000,
        },
      ],
    })
    const usedmemoryInstance = echarts.init(usedmemory.value, "macarons")
    usedmemoryInstance.setOption({
      tooltip: {
        formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
        formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human,
      },
      series: [
        {
@@ -110,23 +149,33 @@
          min: 0,
          max: 1000,
          detail: {
            formatter: cache.value.info.used_memory_human
            formatter: cache.value.info.used_memory_human,
          },
          data: [
            {
              value: parseFloat(cache.value.info.used_memory_human),
              name: "内存消耗"
            }
          ]
        }
      ]
              name: "内存消耗",
            },
          ],
        },
      ],
    })
    window.addEventListener("resize", () => {
      commandstatsIntance.resize();
      usedmemoryInstance.resize();
    },{passive: true});
    window.addEventListener(
      "resize",
      () => {
        commandstatsIntance.resize()
        usedmemoryInstance.resize()
      },
      { passive: true }
    )
  })
}

getList();
getList()
</script>

<style lang="scss" scoped>
.el-table {
  color: #333;
}
</style>