Commit 7043e66a authored by 胡占生's avatar 胡占生 🇨🇳
Browse files

feat点位管理，页面初始化，新增页面int

parent 0d01993a

src/views/videoControl/pointControl/components/drawPoint.vue

0 → 100644
+181 −0
Original line number Diff line number Diff line 
<template>

    <el-dialog

      v-model="open"

      width="1000px"

      append-to-body

    >

      <template v-slot:header>

        <div class="cleartitle" style="display: flex;justify-content: flex-start;align-items: center;">

          <img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{title}}</span>

        </div>

      </template>

      <el-row>

        <el-col :span="12">

          <el-row :gutter="10" class="mb8" style="justify-content: space-between;">

          <el-col :span="1.5">

              <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">

                <span>基础信息</span>

              </div>

          </el-col>

          <el-col :span="6.8" style="display: flex;">

          </el-col>

        </el-row>

         <el-card class="left-list">

          <el-table v-loading="loading" :data="algLevelList">

            <el-table-column label="告警等级名称" align="center" prop="alarmName" />

            <el-table-column label="告警等级颜色" align="center" prop="alarmColor"> 

              <template #default="scope">

                <span>

                  <el-tag type="success" :style="{backgroundColor: scope.row.alarmColor,width:'50px'}">{{ }}</el-tag>

                </span>

              </template>

            </el-table-column>

            <el-table-column label="告警等级展示方式" align="center" prop="alarmShowType" />

            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">

                <template #default="scope">

                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>

                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>

                </template>

            </el-table-column>

          </el-table>

         </el-card>

        </el-col>

      </el-row>

       

    </el-dialog>

</template>



<script setup>

import { listAlgLevel, detailAlgLevel , addAlgLevel, updateAlgLevel, deleteAlgLevel} from "@/api/algorithmList/algorithmDown.js";

const { proxy } = getCurrentInstance();

const emit = defineEmits();

const open = ref(false);

const openAdd = ref(false);

const butLoading = ref(false);

const title = ref("");

const titleLevel = ref("");

const loading = ref(true);

const algLevelList = ref([]);

const data = reactive({

  form: {},

  queryParams: {

    pageNum: 1,

    pageSize: 10,

    postCode: undefined,

  },

  rules: {

    alarmName: [{ required: true, message: "告警等级名称不能为空", trigger: "blur" }],

    postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],

    postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],

  }

});



const { queryParams, form, rules } = toRefs(data);



/** 表单重置 */

function reset() {

  butLoading.value = false;

  form.value = {

    id: undefined,

    alarmName: undefined,

    alarmColor: '#409EFF',

    alarmShowType: []

  };

  proxy.resetForm("algLevelRef");

}



/** 查询算法列表 */

function getLevelList() {

  loading.value = true;

  listAlgLevel(queryParams.value).then(response => {

    algLevelList.value = response.rows

    loading.value = false;

  });

}



/** 新增按钮操作 */

function handleAdd() {

  open.value = true;

  title.value = "告警等级列表";

  getLevelList()

}

/** 等级新增按钮操作 */

function handleLevelAdd() {

  reset();

  openAdd.value = true;

  titleLevel.value = "新增告警等级";

}



/** 修改按钮操作 */

function handleUpdate(row) {

  reset();

  const id = row.id || ids.value;

  detailAlgLevel(id).then(response => {

    form.value = response.data;

    form.value.alarmShowType=form.value.alarmShowType.split(',')

    openAdd.value = true;

    titleLevel.value = "修改告警等级";

  });

}



/** 提交按钮 */

function submitForm() {

  proxy.$refs["algLevelRef"].validate(valid => {

    if (valid) {

      form.value.alarmShowType=form.value.alarmShowType.join()

      butLoading.value = true;

      if (form.value.id != undefined) {

        updateAlgLevel(form.value).then(response => {

          proxy.$modal.msgSuccess("修改成功");

          openAdd.value = false;

          butLoading.value = false;

          getLevelList();

        });

      } else {

        addAlgLevel(form.value).then(response => {

          proxy.$modal.msgSuccess("新增成功");

          openAdd.value = false;

          butLoading.value = false;

          getLevelList();

        });

      }

    }

  });

}

/** 取消按钮 */

function cancel() {

  openAdd.value = false;

  reset();

}

/** 删除按钮操作 */

function handleDelete(row) {

    const id = row.id || ids.value;

    proxy.$modal.confirm('删除后，已配置的告警等级将被清空').then(function() {

      return deleteAlgLevel(id);

    }).then(() => {

      getLevelList();

      proxy.$modal.msgSuccess("删除成功");

    }).catch(() => {});

  }

defineExpose({ handleAdd , handleUpdate })

</script>



<style scoped lang="scss">

    .form-title{

      display: flex;

      align-items:center;/*for vertical align*/

      font-size: 16px;

      font-weight: 600;

      border-radius: 5px;

      padding: 0;

    }

    .form-title::before{

      content:"";

      display: inline-block;

      width: 10px; /* 矩形的宽度 */

      height: 30px; /* 矩形的高度 */

      background-color: #1890FF; /* 矩形的背景颜色 */

      margin-right: 10px;

      border-radius: 8px;

    }

</style>
 
 No newline at end of file

src/views/videoControl/pointControl/index.vue

0 → 100644
+271 −0
Original line number Diff line number Diff line 
<template>

  <div class="app-container home">

    <TabTitle :text="nowText" />

    <div class="add-but">

        <el-button type="primary" icon="Plus" @click="handeAdd" plain>新增点位</el-button>

    </div>

    <el-row :gutter="10">

      <el-col :xs="0" :sm="2" :md="3" :lg="4">

        <el-card class="left-list">

          <div class="head-container">

            <el-input

              v-model="deptName"

              placeholder="请输入部门名称"

              clearable

              prefix-icon="Search"

              style="margin-bottom: 20px"

            />

          </div>

          <div class="head-container">

            <el-tree

              :data="deptOptions"

              :props="{ label: 'label', children: 'children' }"

              :expand-on-click-node="false"

              :filter-node-method="filterNode"

              ref="deptTreeRef"

              node-key="id"

              highlight-current

              default-expand-all

              @node-click="handleNodeClick"

            />

          </div>

        </el-card>

      </el-col>

      <el-col :xs="24" :sm="16" :md="16" :lg="20">

        <el-scrollbar height="700px">

          <el-card class="right-list">

            <template v-slot:header>

              <div class="cleartitle" style="justify-content: flex-start">

                <img src="@/assets/images/logo_video.png" width="25px" alt />

                <span>{{ nowText }}</span>

              </div>

            </template>

            <!-- <el-row :gutter="10" class="mb8">

              <el-col :span="1.5">

                <el-button type="primary" plain @click="handleUpdate">一分屏</el-button>

              </el-col>

              <el-col :span="1.5">

                <el-button type="primary" plain @click="handleUpdate">四分屏</el-button>

              </el-col>

              <el-col :span="1.5">

                <el-button type="primary" plain @click="handleDelete">六分屏</el-button>

              </el-col>

            </el-row> -->

              <el-table v-loading="loading" :data="pointList">

                <el-table-column label="实况图" align="center" prop="postId" />

                <el-table-column label="摄像头名称" align="center" prop="postCode" />

                <el-table-column label="所属区域" align="center" prop="postName" />

                <el-table-column label="推理间隔（秒）" align="center" prop="postSort" />

                <el-table-column label="关联算法" align="center" prop="postSort" />

                <el-table-column label="时段配置" align="center" prop="postSort" />

                <el-table-column label="运行状态" align="center" prop="postSort" />

                <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">

                    <template #default="scope">

                      <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>

                      <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>

                    </template>

                </el-table-column>

              </el-table>

          </el-card>

        </el-scrollbar>

      </el-col>

    </el-row>

    <drawPoint ref="drawPointRef" />

  </div>

</template>

  

<script setup name="Index">

import drawPoint from './components/drawPoint.vue'

import { ArrowDown } from "@element-plus/icons-vue";

import { Search } from "@element-plus/icons-vue";

const { proxy } = getCurrentInstance();

const drawPointRef = ref(null);

const nowText = ref("点位管理");

const deptName = ref("");

const pointList = ref([]);

const loading = ref(false);

const deptOptions = ref(undefined);

const algorithmList = reactive([

  {

    name: "我的算法",

    value: 1,

  },

  {

    name: "最新算法",

    value: 2,

  },

  {

    name: "基础算法",

    value: 3,

  },

  {

    name: "智慧煤矿",

    value: 4,

  },

  {

    name: "智慧能源",

    value: 5,

  },

  {

    name: "智慧校园",

    value: 6,

  },

  {

    name: "智慧港口",

    value: 7,

  },

  {

    name: "智慧煤矿",

    value: 8,

  },

  {

    name: "智慧能源",

    value: 9,

  },

  {

    name: "智慧校园",

    value: 10,

  },

]);

const data = reactive({

  form: {

    title:'测试测试测试'

  },

  queryParams: {

    postCode: undefined,

    searchValue: "",

    status: undefined,

  },

  rules: {

    postName: [

      { required: true, message: "岗位名称不能为空", trigger: "blur" },

    ],

    postCode: [

      { required: true, message: "岗位编码不能为空", trigger: "blur" },

    ],

    postSort: [

      { required: true, message: "岗位顺序不能为空", trigger: "blur" },

    ],

  },

});

const { queryParams, form, rules } = toRefs(data);

/** 通过条件过滤节点  */

const filterNode = (value, data) => {

  if (!value) return true;

  return data.label.indexOf(value) !== -1;

};



// function closeNow(){

//     const routerArr=useTagsViewStore().visitedViews

//     const nowPath=location.pathname

//     return routerArr.filter(item=>{return item.path==nowPath })[0]

// }

// setTimeout(() => {

//   nowText=closeNow()awdasa

// }, 500);

// function goTarget(url) {

//   window.open(url, '__blank')

// }



function handleNodeClick(row) {

  

}



function handeAdd(row) {

  drawPointRef.value.handleAdd();

}



function handleSetSize(row) {

  console.log(

    "%c [ row ]-170",

    "font-size:13px; background:pink; color:#bf2c9f;",

    row

  );

  // reset();

  // const postId = row.postId || ids.value;

  // getPost(postId).then(response => {

  //   form.value = response.data;

  //   open.value = true;

  //   title.value = "修改岗位";

  // });

}

function handleUpdate(row) {

  // reset();

  // const postId = row.postId || ids.value;

  // getPost(postId).then(response => {

  //   form.value = response.data;

  //   open.value = true;

  //   title.value = "修改岗位";

  // });

}



/** 删除按钮操作 */

function handleDelete(row) {

  // const postIds = row.postId || ids.value;

  // proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {

  //   return delPost(postIds);

  // }).then(() => {

  //   getList();

  //   proxy.$modal.msgSuccess("删除成功");

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

}

</script>

  

<style scoped lang="scss">

.left-list {

  min-height: 700px;

}

.add-but{

  position: absolute;

  display: flex;

  top: 30px;

  right: 30px;

}

.right-list {

  min-height: 700px;

  .alg-list {

    display: grid;

    // grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 16px;

    .el-card {

      border: 1px soild #ff6700;

    }

    .alg-item {

      width: 100%;

      // min-height: 350px;

      position: relative;

    }

  }

}

.danger-list{

  min-height: 700px;

  .alg-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 16px;

    .el-card {

      border: 1px soild #ff6700;

    }

    .alg-item {

      width: 100%;

      // min-height: 350px;

      cursor: pointer;

      position: relative;

    }

    .el-form-item--default,.el-form-item {

      font-size: 12px;

      margin-bottom: 0px;

    }

  }

}



.cleartitle {

  font-size: 16px;

  font-weight: 600;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

</style>

  

  
 No newline at end of file