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

fix:算法详情页面布局，算法边界接口联调。告警模块新增

parent fe0de3da

src/api/alarmControl/index.js

0 → 100644
+66 −0
Original line number Diff line number Diff line 
/** 

 * 新增算法预警信息

 * @param {object} params 算法预警信息

 * @param {string} params.alarmImg 预警图片

 * @param {number} params.alarmLevelId 预警等级id

 * @param {object} params.alarmTime 预警时间

 * @param {string} params.alarmType 预警类型

 * @param {number} params.algorithmId 算法id

 * @param {string} params.createBy 

 * @param {object} params.createTime 

 * @param {number} params.deviceId 设备id

 * @param {number} params.id 主键

 * @param {object} params.params 

 * @param {number} params.regionId 区域id

 * @param {string} params.remark 

 * @param {string} params.searchValue 

 * @param {string} params.updateBy 

 * @param {object} params.updateTime 

 * @returns

 */

import request from '@/utils/request'



// 查询算法预警

export function listAlarm(query) {

    return request({

      url: '/yunshou/aiAlgorithmAlarm/list',

      method: 'get',

      params: query

    })

  }

  

// 查询算法预警x详情

export function detailAlarm(id) {

    return request({

      url: `/yunshou/aiAlgorithmAlarm/${id}`,

      method: 'get',

    })

  }

  



// 新增算法预警

export function addAlarm(data) {

  return request({

    url: '/yunshou/aiAlgorithmAlarm',

    method: 'post',

    data: data 

  })

}



// 修改算法预警

export function updateAlarm(data) {

    return request({

      url: '/yunshou/aiAlgorithmAlarm',

      method: 'put',

      data: data

    })

  }

  



// 删除算法预警

export function deleteAlarm(ids) {

  return request({

    url: `/yunshou/aiAlgorithmAlarm/${ids}`,

    method: 'delete'

  })

}

src/api/algorithmList/boundary.js

0 → 100644
+63 −0
Original line number Diff line number Diff line 
/** 

/** 

 * 新增算法边界场景

 * @param {object} params 算法边界场景

 * @param {number} params.algorithmId 算法边界id

 * @param {string} params.createBy 

 * @param {object} params.createTime 

 * @param {number} params.id 主键

 * @param {object} params.params 

 * @param {string} params.remark 

 * @param {string} params.sceneDetail 场景详情

 * @param {string} params.sceneName 场景名称

 * @param {string} params.searchValue 

 * @param {string} params.updateBy 

 * @param {object} params.updateTime 

 * @returns

 */

import request from '@/utils/request'



// 查询算法边界列表

export function listBoundary(query) {

    return request({

      url: '/yunshou/aiAlgorithmCase/list',

      method: 'get',

      params: query

    })

  }

  

// 查询算法边界列表x详情

export function detailBoundary(id) {

    return request({

      url: `/yunshou/aiAlgorithmCase/${id}`,

      method: 'get',

    })

  }

  



// 新增算法边界列表

export function addBoundary(data) {

  return request({

    url: '/yunshou/aiAlgorithmCase',

    method: 'post',

    data: data

  })

}



// 修改算法边界列表

export function updateBoundary(data) {

    return request({

      url: '/yunshou/aiAlgorithmCase',

      method: 'put',

      data: data

    })

  }

  



// 删除算法边界列表

export function deleteBoundary(ids) {

  return request({

    url: `/yunshou/aiAlgorithmCase/${ids}`,

    method: 'delete'

  })

}

src/views/alarmControl/index.vue

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

    <div class="app-container home">

      <TabTitle :text="nowText" />

      <el-row :gutter="10">

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

          <el-scrollbar height="700px">

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

            <template v-slot:header>

              <el-form :model="queryParams" ref="queryRef" :inline="true" >

                <el-form-item label="摄像头" prop="algorithmName">

                  <el-select v-model="queryParams.deptName" placeholder="请选择所属部门" clearable style="width: 200px">

                      <el-option

                        v-for="dict in deviceList"

                        :key="dict.id"

                        :label="dict.deviceName"

                        :value="dict.id"

                      />

                  </el-select>

                </el-form-item>

                <el-form-item label="创建时间" >

                  <el-date-picker

                    v-model="dateRange"

                    value-format="YYYY-MM-DD"

                    type="daterange"

                    range-separator="-"

                    start-placeholder="开始日期"

                    end-placeholder="结束日期"

                  ></el-date-picker>

                </el-form-item>

                <el-form-item label="算法场景" prop="applicationScenarios">

                  <el-select v-model="queryParams.deptName" placeholder="请选择所属部门" clearable style="width: 200px">

                      <el-option

                        v-for="dict in algList"

                        :key="dict.id"

                        :label="dict.algorithmName"

                        :value="dict.id"

                      />

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

            </template>

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

               <el-col :span="1.5">

                  <el-button

                     type="primary"

                     plain

                  >四分屏</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="primary"

                     plain

                  >六分屏</el-button>

               </el-col>

               <el-col :span="1.5">

                  <el-button

                     type="primary"

                     plain

                  >十二分屏</el-button>

               </el-col>

            </el-row>

            <div class="alg-list" >

              <el-card  v-for="item in algList" :key="item.name" class="alg-item" shadow="hover" >

                <!-- <template v-slot:header>

                  <div class="cleartitle">

                    <span>{{item.algorithmName}}</span>

                    <el-tag

                      :type="'success'"

                      effect="dark"

                    >

                      {{ 'success'}}

                    </el-tag>

                  </div>

                </template> -->

                <template v-slot:default >

                  <div   style="width: 100%;max-height: 200px;overflow: hidden;">

                    <img

                      :src="'http://192.168.4.206' +item.alarmImg"

                      style="width: 100%;"

                    />

                  </div>

                  <h2>{{ item.alarmType }}</h2>

                  <p style="color: #999999;font-size: 12px;">

                    {{ changeTime(item.alarmTime) }}

                  </p>

                  <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >

                    <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >详情</el-button>

                    <!-- <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>

                    <el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button> -->

                  </div>

                </template>

              </el-card>

            </div>

          </el-card>

          </el-scrollbar>

        </el-col>

      </el-row>

    </div>

</template>

  

<script setup name="Index">

  import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";

  import { listDevice, } from "@/api/yunshou/device";

  import moment from 'moment'

  // import algForm from './components/algorithmDown.vue'

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

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

  const router = useRouter();

  const { proxy } = getCurrentInstance();

  const algorithmDownRef = ref(null)

  const nowText=ref('告警管理')

  const ids = ref([]);

  const deviceList = ref([]);

  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 algList = ref([]);

  const data = reactive({

    form: {},

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





  function changeTime(val){

    return moment(val).format('YYYY/MM/DD HH:mm:ss')

  }

  

 /** 查询定时任务列表 */

 function getDeviceList() {

   listDevice().then(response => {

     deviceList.value = response.rows;

   });

 }

 /** 重置按钮操作 */

 function resetQuery() {

   proxy.resetForm("queryRef");

   handleQuery();

 }



  /** 搜索按钮操作 */

  function handleQuery() {

    queryParams.value.pageNum = 1;

    getList();

  }

  

  /** 查询算法列表 */

  function getList() {

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

      // console.log("🚀 ~ listAlg ~ response:", response)

      algList.value = response.rows

    });

  }

  function handeAdd(row){

    algorithmDownRef.value.handleAdd()

  }

  function handDetails(id){

    router.push("/algorithmList/details/info/" + '123');

  }

  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) {

    algorithmDownRef.value.handleUpdate(row)

  }

  

  /** 删除按钮操作 */

  function handleDelete(row) {

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

    proxy.$modal.confirm('是否确认删除算法名称为"' + row.algorithmName + '"的数据项？').then(function() {

      return deleteAlg(id);

    }).then(() => {

      getList();

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

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

  }

  getList();

  getDeviceList();

  </script>

  

  <style scoped lang="scss">

   .search-input{

    display: flex;

    width: 400px;

    margin-right: 10px;

   }

   .add-but{

    position: absolute;

    display: flex;

    top: 30px;

    right: 30px;

   }

   .left-list{

    min-height: 700px;

   }

   .right-list{

    min-height: 700px;

    .alg-list{

      display: grid;

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

      gap: 16px;

      .alg-item{

        width: 100%;

        min-height: 350px;

        cursor: pointer;

        position: relative;

      }

    }

   }

   .cleartitle{

    font-size: 16px;

    font-weight: 600;

    display: flex;

    justify-content: space-between;

  }

  </style>

  

  
 No newline at end of file

src/views/algorithmControl/components/form.vue

+163 −19
Original line number Diff line number Diff line
@@ -40,7 +40,14 @@ 
                  </el-col>

                  <el-col :span="12">

                    <el-form-item label="算法场景" prop="applicationScenarios">

                      <el-input v-model="form.applicationScenarios" placeholder="请输入算法场景"   />

                      <el-select v-model="form.applicationScenarios" placeholder="请选择硬件平台" clearable >

                        <el-option 

                        v-for="disc in algorithm_scen"

                        :key="disc.value"

                        :label="disc.label"

                          :value="disc.value"

                        />

                      </el-select>

                    </el-form-item>

                  </el-col>

                </el-row>
@@ -85,7 +92,7 @@ 
          </el-col>

          </el-row>

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

            <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">

            <el-table  :data="postList" >

              <el-table-column label="文件名称" align="center" prop="postId" />

              <el-table-column label="状态" align="center" prop="postCode" />

              <el-table-column label="MD5核对结果" align="center" prop="postName" />
@@ -132,7 +139,14 @@ 
                      </el-col>

                      <el-col :span="12">

                        <el-form-item label="算法场景" prop="applicationScenarios">

                          <el-input v-model="form.applicationScenarios" placeholder="请输入算法场景"   />

                          <el-select v-model="form.applicationScenarios" placeholder="请选择硬件平台" clearable >

                            <el-option 

                            v-for="disc in algorithm_scen"

                            :key="disc.value"

                            :label="disc.label"

                             :value="disc.value"

                            />

                          </el-select>

                        </el-form-item>

                      </el-col>

                    </el-row>
@@ -176,7 +190,7 @@ 
              </el-col>

              </el-row>

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

                <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">

                <el-table  :data="postList" >

                  <el-table-column label="文件名称" align="center" prop="postId" />

                  <el-table-column label="状态" align="center" prop="postCode" />

                  <el-table-column label="MD5核对结果" align="center" prop="postName" />
@@ -267,19 +281,19 @@ 
                    type="primary"

                    plain

                    icon="Plus"

                    @click="handleUpdate"

                    @click="handleBoundaryAdd"

                  >新建边界</el-button>

              </el-col>

              </el-row>

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

                <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">

                  <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 :data="boundaryList" >

                  <el-table-column label="边界类型" align="center" prop="caseType" />

                  <el-table-column label="边界内容" align="center" prop="remark" />

                  <el-table-column label="边界案例图" align="center" prop="caseFile" />

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

                        <el-button link type="primary" icon="Edit" @click="handleBoundaryUpdate(scope.row)" >修改</el-button>

                        <el-button link type="primary" icon="Delete" @click="handleBoundaryDelete(scope.row)" >删除</el-button>

                      </template>

                  </el-table-column>

                </el-table>
@@ -326,7 +340,7 @@ 
    <el-dialog

      v-model="openScene"

      :title="titleScene"

      width="800px"

      width="500px"

      append-to-body

    >

      <template v-slot:header>
@@ -336,14 +350,14 @@ 
      </template>

      <el-form ref="sceneRef" :model="formScene" :rules="rules" label-width="80px">

                <el-row>

                  <el-col :span="12">

                  <el-col :span="24">

                    <el-form-item label="场景名称" prop="sceneName">

                      <el-input v-model="formScene.sceneName" placeholder="请输入场景名称" />

                    </el-form-item>

                  </el-col>

                </el-row>

                <el-row>

                  <el-col :span="12">

                  <el-col :span="24">

                    <el-form-item label="场景详情" prop="sceneDetail">

                      <el-input v-model="formScene.sceneDetail" placeholder="请输入场景详情" />

                    </el-form-item>
@@ -357,24 +371,71 @@ 
        </div>

      </template>

    </el-dialog>

    <el-dialog

      v-model="openBoundary"

      :title="titleBoundary"

      width="500px"

      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>{{titleBoundary}}</span>

        </div>

      </template>

      <el-form ref="BoundaryRef" :model="formBoundary" :rules="rules" label-width="80px">

                <el-row>

                  <el-col :span="24">

                    <el-form-item label="边界类型" prop="caseType">

                      <el-input v-model="formBoundary.caseType" placeholder="请输入场景名称" />

                    </el-form-item>

                  </el-col>

                </el-row>

                <el-row>

                  <el-col :span="24">

                    <el-form-item label="边界内容" prop="remark">

                      <el-input v-model="formBoundary.remark" placeholder="请输入场景详情" />

                    </el-form-item>

                  </el-col>

                </el-row>

                <el-row>

                  <el-col :span="24">

                    <el-form-item label="场景图片" prop="caseFile">

                      <ImageUpload :modelValue="formBoundary.caseFile" :limit='1' :fileSize="5" @update:modelValue="getBoundaryImageUrl"/>

                    </el-form-item>

                  </el-col>

                </el-row>

          </el-form>

      <template #footer>  

        <div class="dialog-footer">

            <el-button type="primary" @click="submitBoundaryRefForm">确 定</el-button>

            <el-button @click="cancelBoundary">取 消</el-button>

        </div>

      </template>

    </el-dialog>

</template>



<script setup>

import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js";

import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js";

import { listBoundary, detailBoundary , addBoundary, updateBoundary, deleteBoundary} from "@/api/algorithmList/boundary.js";

const { proxy } = getCurrentInstance();

const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");

const emit = defineEmits();

const open = ref(false);

const openScene = ref(false);

const openBoundary = ref(false);

const isAdd = ref(true);

const title = ref("");

const titleScene = ref("");

const titleBoundary = ref("");

const activeName = ref("基础信息");

const sceneList = ref([]);

const boundaryList = ref([]);

const ids = ref([]);

const data = reactive({

  form: {},

  formScene: {},

  formBoundary: {},

  queryParams: {

    pageNum: 1,

    pageSize: 10,
@@ -390,11 +451,13 @@ const data = reactive({ 
  }

});



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

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



function getImageUrl(url){

    form.value.cardImg=url

console.log("🚀 ~ getImageUrl ~ orm.cardImg:", form)

}

function getBoundaryImageUrl(url){

    formBoundary.value.caseFile=url

}



/** 表单重置 */
@@ -421,9 +484,11 @@ function handleAdd() { 


/** 修改按钮操作 */

function handleUpdate(row) {

  getSceneList();

  reset();

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

  ids.value = id;

  getSceneList();

  getBoundaryList()

  detailAlg(id).then(response => {

    form.value = response.data;

    open.value = true;
@@ -459,10 +524,11 @@ function cancel() { 
  reset();

}



/** 算法场景 */



/** 查询场景列表 */

function getSceneList() {

  listScene().then(response => {

  listScene({ algorithmId: ids.value,}).then(response => {

    sceneList.value = response.rows;

  });

}
@@ -532,6 +598,84 @@ function cancelScene() { 
  openScene.value = false;

  resetScene();

}



/** 算法边界 */



/** 查询场景列表 */

function getBoundaryList() {

  listBoundary({ algorithmId: ids.value,}).then(response => {

    boundaryList.value = response.rows;

  });

}



/** 表单重置 */

function resetBoundary() {

  formBoundary.value = {

    algorithmId: form.value.id,

    sceneName: undefined,

    sceneDetail: undefined,

    remark: undefined

  };

  proxy.resetForm("BoundaryRef");

}



/** 场景新增按钮操作 */

function handleBoundaryAdd() {

  resetBoundary();

  openBoundary.value = true;

  titleBoundary.value = "添加场景";

}



/** 删除按钮操作 */

function handleBoundaryDelete(row) {

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

  proxy.$modal.confirm('是否确认删除定时任务编号为"' + id + '"的数据项?').then(function () {

    return deleteBoundary(id);

  }).then(() => {

    getBoundaryList();

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

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

}



/** 修改按钮操作 */

function handleBoundaryUpdate(row) {

  resetBoundary();

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

  detailBoundary(id).then(response => {

    formBoundary.value = response.data;

    openBoundary.value = true;

    titleBoundary.value = "修改场景";

  });

}



/** 提交按钮 */

function submitBoundaryRefForm() {

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

    if (valid) {

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

        updateBoundary(formBoundary.value).then(response => {

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

          openBoundary.value = false;

          getBoundaryList()

        });

      } else {

        addBoundary(formBoundary.value).then(response => {

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

          openBoundary.value = false;

          getBoundaryList()

        });

      }

    }

  });

}

/** 取消按钮 */

function cancelBoundary() {

  openBoundary.value = false;

  resetBoundary();

}







defineExpose({ handleAdd , handleUpdate })

</script>

<style scoped lang="scss">

src/views/algorithmControl/index.vue

+1 −1
Original line number Diff line number Diff line
@@ -119,7 +119,7 @@ 
 import algForm from './components/form.vue'

 const router = useRouter();

 const { proxy } = getCurrentInstance();

 const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status");

 const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");

 

 const algFormRef = ref(null)

 const nowText = ref("算法管理");