优化数据大屏页面

pengwei

2025-03-20 e0a31f7013898540948f4d4d86ade1a5414b44d4

 ÏîÄ¿´úÂë/client/src/views/tts/CraftCenter/Craftcenter.vue

@@ -225,7 +225,9 @@
          >
            {{ title }}
          </h4>
          <el-icon size="25" @click="close"><CloseBold /></el-icon>
          <el-icon size="25" @click="close">
            <CloseBold />
          </el-icon>
        </div>
      </template>
      <div>
@@ -255,7 +257,7 @@
                size="small"
              />
            </div>
            <!-- <div class="serch_box">
            <div class="serch_box">
              <div class="serchb">
                <el-select
                  v-model="queryForm.selectType"
@@ -276,7 +278,7 @@
                placeholder="请输入关键词搜索"
                style="border-left: 0.06rem solid #e2e2e2"
              />
            </div> -->
            </div>
            <el-button
              type="primary"
              size="small"
@@ -318,7 +320,7 @@
            border: '0.01rem solid #eee',
          }"
        >
          <el-table-column prop="setpNum" label="序号" min-width="2%" />
          <el-table-column prop="nodal" label="序号" min-width="2%" />
          <el-table-column
            prop="craftsStep"
            label="工艺顶点/步骤"
@@ -333,7 +335,7 @@
          <el-table-column prop="date" label="物料" min-width="1%" />
          <!-- <el-table-column prop="date" label="图片视频" min-width="2%" /> -->
          <el-table-column prop="" label="是否涉及" min-width="2%" />
          <el-table-column prop="nodal" label="排序" min-width="1%" />
          <el-table-column prop="setpNum" label="排序" min-width="1%" />
          <el-table-column prop="date" label="创建人" min-width="2%">
            <template #default="">
              {{ user }}
@@ -348,7 +350,9 @@
                @click="Editcraft(scope.row, '编辑')"
                >编辑</el-button
              >
              <el-button type="text" size="small">删除</el-button>
              <el-button type="text" size="small" @click="delProcess(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
@@ -362,7 +366,7 @@
      title="工艺信息"
      width="50%"
      :show-close="false"
      @close="handleClose"
      @close="resetForm(ruleFormRef)"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-craftheader">
@@ -442,13 +446,13 @@
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><el-form-item prop="sort">
            ><el-form-item prop="setnum">
              <template #label>
                <span style="font-size: 0.88rem; color: black">排序</span>
              </template>
              <el-input
                size="small"
                v-model="form.setpNum"
                v-model.number="form.setnum"
                placeholder="请输入"
                style="height: 2rem"
              /> </el-form-item
@@ -456,10 +460,12 @@
          <el-col :span="8"
            ><el-form-item prop="tools">
              <template #label>
                <span style="font-size: 0.88rem; color: black">工具</span>
                <div style="display: flex; align-items: center">
                  <span style="font-size: 0.88rem; color: black">工具</span>
                </div>
              </template>
              <el-select
                v-model="form.tools"
                v-model="tools"
                placeholder="请选择"
                multiple
                filterable
@@ -475,6 +481,20 @@
                  :label="item.toolName"
                  :value="item"
                /> </el-select></el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8"
            ><el-form-item prop="nodal">
              <template #label>
                <span style="font-size: 0.88rem; color: black">序号</span>
              </template>
              <el-input
                size="small"
                v-model.number="form.nodal"
                placeholder="请输入"
                style="height: 2rem"
              /> </el-form-item
          ></el-col>
        </el-row>
        <!-- <el-row>
@@ -548,9 +568,11 @@
          </el-col>
        </el-row>
        <el-row>
          <el-form-item prop="Unit">
          <el-form-item prop="checkList">
            <template #label>
              <span style="font-size: 0.88rem; color: black">选择套筒</span>
              <div style="display: flex; align-items: center">
                <span style="font-size: 0.88rem; color: black">选择套筒</span>
              </div>
            </template>
            <div
              style="
@@ -568,8 +590,10 @@
                  "
                >
                  <el-input
                    placeholder="请输入内容"
                    style="height: 2rem"
                    placeholder="搜索"
                    style="height: 2rem; background: #f5f5f5; border: none"
                    :prefix-icon="Search"
                    v-model="value"
                  ></el-input>
                  <div
                    style="height: 1.25rem; display: flex; align-items: center"
@@ -577,26 +601,35 @@
                    <span
                      style="color: rgba(28, 31, 35, 0.8); font-size: 0.75rem"
                      >共{{ checkList.length }}项</span
                    ><span
                    >
                    <!-- <span
                      @click="handleCheckAllChange"
                      style="
                        color: rgba(28, 31, 35, 0.8);
                        font-size: 0.75rem;
                        margin-left: 0.38rem;
                        cursor: pointer;
                      "
                      >全选</span
                    >
                    > -->
                  </div>
                </div>
                <el-scrollbar height="20rem" style="padding-left: 0.88rem">
                  <el-checkbox-group
                    :indeterminate="isIndeterminate"
                    @change="checkChange"
                    v-model="checkList"
                    style="display: flex; flex-direction: column"
                  >
                    <el-checkbox
                      :max="2"
                      v-for="item in sleeveData"
                      :key="item.id"
                      :label="item.articleName"
                      :value="item"
                      :value="{
                        ...item,
                        num: 1,
                      }"
                    />
                  </el-checkbox-group>
                </el-scrollbar>
@@ -609,10 +642,12 @@
                    >已选{{ checkList.length }}项</span
                  >
                  <span
                    @click="clear"
                    style="
                      color: rgb(65, 70, 76);
                      font-size: 0.88rem;
                      margin-left: 1rem;
                      cursor: pointer;
                    "
                    >清空</span
                  >
@@ -627,8 +662,8 @@
                      justify-content: space-between;
                      margin: 0.5rem 0;
                    "
                    v-for="(item, index) in checkList"
                    :key="item"
                    v-for="item in checkList"
                    :key="item.id"
                    class="scrollbar-demo-item"
                  >
                    <span>
@@ -669,8 +704,8 @@
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { formatTime } from "@/utils/index.js";
import { ref, reactive, onMounted, toRef } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  GetSleeveandStep,
  GetProcess,
@@ -679,26 +714,49 @@
  ArticleInfom,
  GetTool,
  ExportApi,
  DelProcess,
  AddOrUpdateProcess,
} from "@/api/newapi/Process";
import { ElMessage } from "element-plus";
import { exportExcel } from "@/utils/index.js";
//工艺明细弹出框
const detailsDialogVisible = ref(false);
import { formatTime } from "@/utils/index.js";

// åˆå§‹åŒ–数据
const obj = {
  selectName: "",
  selectTime: [], // æ—¶é—´èŒƒå›´
  selectType: "", //选择的类型
  selectInput: "", //输入的数据
};
//工艺明细数据
const gridData = ref([]);
//套筒数据
const sleeveData = ref([]);
//选择的套筒数据
const checkList = ref([]);
//电气数量
const electric = ref(null);
//机械数量
const mechanical = ref(null);
//地沟
const trench = ref(null);
//新增工艺/编辑工艺
const type = ref("新增");
//获取数据
const title = ref("电气");
//表单ref值
const ruleFormRef = ref();
//用户数据
const user = ref(null);

const tools = ref([]);
//搜索
const queryForm = reactive({
  selectName: "",
  selectTime: [], // æ—¶é—´èŒƒå›´
  selectType: "",
  selectInput: "",
});
const queryForm = toRef({ ...obj });
const isIndeterminate = ref(true);
//工艺明细弹出框
const detailsDialogVisible = ref(false);
//新增工艺弹出框
const craftdialogVisible = ref(false);
//搜索字段选择
const selectoptions = ref([
  {
    value: "setpNum",
@@ -709,43 +767,52 @@
    label: "工具",
  },
]);
//选择的套筒数据
const checkList = ref([]);
//获取数据
const title = ref("电气");
const showdetails = (val) => {
  detailsDialogVisible.value = true;
  title.value = val;
  initData(title.value);
  // GetProcess(val).then((res) => {
  //   gridData.value = res.data;
  // });
};
//新增工艺/编辑工艺
const craftdialogVisible = ref(false);
const type = ref("新增");
//是否涉及
const isoptions = reactive([
  { label: "是", value: "是" },
  { label: "否", value: "否" },
]);

//表单规则
const rules = reactive({
  craftstype: [
    { required: true, message: "请选择工艺类型", trigger: "change" },
  ],
  craftsStep: [{ required: true, message: "请输入工艺步骤", trigger: "blur" }],
  craftContent: [
    { required: true, message: "请输入工艺内容", trigger: "blur" },
  ],
  nodal: [{ required: true, message: "请输入序号", trigger: "blur" }],
  setnum: [{ required: true, message: "请输入排序号", trigger: "blur" }],
});

// isinvolved: "", //是否涉及
//新增工艺/编辑工艺表单数据
const form = ref({
  craftType: "", //工艺类型（组）
  nodal: "", //节点
  craftstype: "", //工艺类型（组）
  nodal: null, //节点
  craftsStep: "", //工艺步骤
  craftContent: "", //工艺内容
  sleeveNum: "", //套筒数量
  tools: "", //工具
  isinvolved: "", //是否涉及
  sort: "", //排序
  craftID: 1,
  setpNum: "",
  torqueOne: null,
  setnum: null,
  torqueOne: 0,
  torqueOneQuantity: 0,
  torqueSum: 0,
  torqueTwo: null,
  torqueTwoQuantity: 0,
  articleOne: "",
  articleOneid: "",
  articleTowid: "",
  articleTwo: "",
  torqueSum: 0,
  torqueTwo: 0,
  torqueTwoQuantity: 0,
  creater: localStorage.getItem("user")
    ? JSON.parse(localStorage.getItem("user")).userName
    : "",
  createDate: formatTime(new Date()),
});

const props = { multiple: true };
//套筒数据
const sleeveData = ref([]);
const userName = ref("");

//新增工艺
const addcraft = (row) => {
@@ -793,45 +860,113 @@
    GJoptions.value = res.rows;
  });
};

//编辑工艺
const Editcraft = (row) => {
  let data = Object.assign({}, row);
  type.value = "编辑";
  detailsDialogVisible.value = false;
  craftdialogVisible.value = true;
  form.value = row;
  console.log(row, form);
  form.value = data;
  tools.value = row.tools ? row.tools.split(",") : "";
  ArticleInfom({
    page: 1,
    rows: 100,
    total: 0,
    tableName: "",
    sort: "",
    order: "",
    wheres: "",
    export: true,
    value: "",
    filter: [
      {
        name: "",
        value: "",
        displayType: "",
      },
    ],
  }).then((res) => {
    sleeveData.value = res.rows;
  });
  GetTool({
    page: 1,
    rows: 100,
    total: 0,
    tableName: "",
    sort: "",
    order: "",
    wheres: "",
    export: true,
    value: "",
    filter: [
      {
        name: "",
        value: "",
        displayType: "",
      },
    ],
  }).then((res) => {
    GJoptions.value = res.rows;
  });
};
//规则
const ruleFormRef = ref();
const rules = reactive({
  craftType: [{ required: true, message: "请选择工艺类型", trigger: "change" }],
  nodal: [{ required: true, message: "请选择节点", trigger: "change" }],
  craftsStep: [{ required: true, message: "请输入工艺步骤", trigger: "blur" }],
  craftContent: [
    { required: true, message: "请输入工艺内容", trigger: "blur" },
  ],
  sleeveNum: [{ required: true, message: "请输入套筒数量", trigger: "blur" }],
});

const showdetails = (val) => {
  detailsDialogVisible.value = true;
  title.value = val;
  initData(title.value);
  // GetProcess(val).then((res) => {
  //   gridData.value = res.data;
  // });
};
//保存
const addprocess = async (formEl) => {
  userName.value = JSON.parse(localStorage.getItem("user")).userName;
  let string = "";
  form.value.tools.forEach((item) => {
    string += item.toolName + ",";
  });
  // if (tools.value.length == 0) {
  //   ElMessage({
  //     message: "请选择工具",
  //     type: "warning",
  //   });
  //   return;
  // }
  string = tools.value
    .map((item) => {
      return item.toolName;
    })
    .join(",");
  // if (checkList.value.length == 0) {
  //   ElMessage({
  //     message: "请选择套筒",
  //     type: "warning",
  //   });
  //   return;
  // }
  if (form.value.nodal == 0) {
    ElMessage({
      message: "序号最小为1",
      type: "warning",
    });
    return;
  }

  form.value.articleOneid = checkList.value[0].id;
  form.value.articleOne = checkList.value[0].num;
  form.value.articleTowid = checkList.value[1].id;
  form.value.articleTwo = checkList.value[1].num;
  form.value.creater = userName.value;
  form.value.tools = string;
  form.value.craftType = title.value;
  form.value.craftstype = title.value;
  form.value.torqueOneQuantity = tools.value.length;
  form.value.id = form.value.craftID ? form.value.craftID : 0;
  console.log(form.value);

  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      AddProcess(form.value).then((res) => {
      AddOrUpdateProcess(form.value).then((res) => {
        ElMessage({
          message: res.message,
          message: form.value.craftID ? "修改成功" : "创建成功",
          type: "success",
        });
        craftdialogVisible.value = false;
@@ -875,39 +1010,34 @@
    GJoptions.value = [];
  }
};
//是否涉及
const isoptions = reactive([
  { label: "是", value: "是" },
  { label: "否", value: "否" },
]);
const user = ref(null);

//分页请求参数
const pageQuery = ref({
  page: 1, //当前页面
  rows: 10, //每页显示条数
  rows: 100, //每页显示条数
  order: "desc", //排序方式
  sort: "craftID", //排序字段
  sort: "", //排序字段
  wheres: "", //条件查询
});

//页面初始化数据
const initData = (val) => {
  // æŸ¥è¯¢æ¡ä»¶
  const startTime = formatTime(queryForm.selectTime[0]);
  const endTime = formatTime(queryForm.selectTime[1]);
  const startTime = formatTime(queryForm.value.selectTime[0]);
  const endTime = formatTime(queryForm.value.selectTime[1]);
  const filter = [
    {
      name: "gruop",
      name: "CraftType",
      value: val,
      displayType: "Contains",
      displayType: "String",
    },
    {
      name: queryForm.selectType,
      value: queryForm.selectInput,
      displayType: "Equal",
      name: queryForm.value.selectType,
      value: queryForm.value.selectInput,
      displayType: "like",
    },
    {
      name: "pustatus",
      value: queryForm.selectName,
      value: queryForm.value.selectName,
      displayType: "Contains",
    },
    { name: "createTime", value: startTime, displayType: "ThanOrEqual" },
@@ -920,10 +1050,51 @@
    gridData.value = res.rows;
  });
};
//数据检索事件
const handleQuery = () => {
  pageQuery.value.page = 1;
  initData(title.value);
};
// é‡ç½®æ–¹æ³•
const resetQuery = () => {
  queryForm.value = Object.assign({}, obj);
  pageQuery.value.page = 1;
  initData(title.value);
};
//重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  form.value = Object.assign(
    {},
    {
      craftstype: "", //工艺类型（组）
      nodal: 0, //节点
      craftsStep: "", //工艺步骤
      craftContent: "", //工艺内容
      sleeveNum: "", //套筒数量
      tools: "", //工具
      isinvolved: "", //是否涉及
      setpNum: "",
      torqueOne: 0,
      torqueOneQuantity: 0,
      articleOne: "",
      articleOneid: "",
      articleTowid: "",
      articleTwo: "",
      torqueSum: 0,
      torqueTwo: 0,
      torqueTwoQuantity: 0,
      creater: "",
      createDate: formatTime(new Date()),
    }
  );
};
//导出方法
const printExcel = () => {
  // æŸ¥è¯¢æ¡ä»¶
  const startTime = formatTime(queryForm.selectTime[0]);
  const endTime = formatTime(queryForm.selectTime[1]);
  const startTime = formatTime(queryForm.value.selectTime[0]);
  const endTime = formatTime(queryForm.value.selectTime[1]);
  const filter = [
    {
      name: "gruop",
@@ -931,13 +1102,13 @@
      displayType: "String",
    },
    {
      name: queryForm.selectType,
      value: queryForm.selectInput,
      name: queryForm.value.selectType,
      value: queryForm.value.selectInput,
      displayType: "String",
    },
    {
      name: "pustatus",
      value: queryForm.selectName,
      value: queryForm.value.selectName,
      displayType: "String",
    },
    { name: "createTime", value: startTime, displayType: "ThanOrEqual" },
@@ -948,23 +1119,33 @@
    filter,
  });
};

//数据检索事件
const handleQuery = () => {
  pageQuery.value.page = 1;
  initData(title.value);
//清空
const clear = () => {
  checkList.value = [];
};
const resetQuery = () => {
  queryForm.value = { selectTime: [] };
  pageQuery.value.page = 1;
  initData(title.value);
const checkChange = (e) => {
  console.log(e, checkList.value);
};

// const handleChange = () => {
//   console.log(checkList.value);
// };
const handleClose = () => {
const handleChange = () => {
  console.log(checkList.value);
};
const handleCheckAllChange = (val) => {
  console.log(val);
  checkList.value = val ? sleeveData.value : [];
  isIndeterminate.value = false;
  console.log(checkList.value);
};
// åˆ é™¤å·¥è‰º
const delProcess = (val) => {
  console.log(val);

  DelProcess([val.craftID]).then((res) => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    initData(title.value);
  });
};

onMounted(() => {
@@ -985,12 +1166,14 @@
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);

  .content {
    display: flex;
    justify-content: space-between;

    margin-top: 5.88rem;
    width: 75rem;

    .content-list {
      display: flex;
      flex-direction: column;
@@ -998,14 +1181,17 @@
      width: 22.69rem;
      height: 11.44rem;
      background-color: #fff;

      .list_top {
        display: flex;
        padding: 1.38rem 1.38rem;
        box-sizing: border-box;

        .list_top_left {
          margin-right: 0.94rem;
        }
      }

      .list_bottom {
        height: 3.06rem;
        display: flex;
@@ -1017,6 +1203,7 @@
      }
    }
  }

  .my-header {
    height: 3.94rem;
    display: flex;
@@ -1026,9 +1213,11 @@
    padding-left: 2.06rem;
    border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
  }

  .serch {
    display: flex;
    align-items: center;

    .time_box {
      display: flex;
      align-items: center;
@@ -1047,12 +1236,14 @@
        justify-content: center;
      }
    }

    .serch_box {
      display: flex;
      align-items: center;
      text-align: center;
      margin-left: 0.98rem;
      border-radius: 0.38rem;

      .serchb {
        box-sizing: border-box;
        width: 6.88rem;
@@ -1064,6 +1255,7 @@
        align-items: center;
        justify-content: center;
      }

      input {
        box-sizing: border-box;
        outline: none;
@@ -1076,6 +1268,7 @@
      }
    }
  }

  .my-craftheader {
    height: 3.94rem;
    display: flex;
@@ -1085,11 +1278,13 @@
    border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
  }
}

.avatar-uploader .avatar {
  width: 7rem;
  height: 7rem;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  width: 7rem;
  height: 7rem;
@@ -1100,10 +1295,12 @@
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.el-upload-list__item) {
  width: 7rem;
  height: 7rem;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}