Skip to content

S
super-hive-web
Commit 4e200e5e authored by wends's avatar wends
Browse files
Options

add 图像识别 和 历史查询 页面

parent 45d0e79f
Hide whitespace changes
Inline Side-by-side
Showing with 436 additions and 3 deletions
src/api/data-visible/image-identification.js 0 → 100644
View file @ 4e200e5e
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取数据集列表-分页
export function getTableData(data) {
return request({
url: `${baseURL}/cc/linque/getDatasetList`,
method: 'post',
data
})
}
src/api/data-visible/query-history.js 0 → 100644
View file @ 4e200e5e
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取数据集列表-分页
export function getTableData(data) {
return request({
url: `${baseURL}/cc/linque/getDatasetList`,
method: 'post',
data
})
}
src/icons/svg/image-identification.svg 0 → 100644
View file @ 4e200e5e
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597110371950" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3001" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M859.648 159.744l-36.352-12.8c-4.096-23.552-25.6-42.496-51.2-42.496-29.696 0-53.248 23.552-53.248 53.248s23.552 53.248 53.248 53.248c14.848 0 25.6-6.144 36.352-14.848l29.696 12.8c23.552 8.704 38.4 38.4 38.4 66.048v473.6c0 27.648-14.848 57.344-38.4 66.048l-27.648 10.752c-10.752-10.752-23.552-16.896-38.4-16.896-29.696 0-53.248 23.552-53.248 53.248s23.552 53.248 53.248 53.248c23.552 0 42.496-14.848 51.2-36.352l38.4-12.8c45.056-14.848 78.848-66.048 78.848-115.2V275.456c-2.048-49.152-35.84-100.352-80.896-115.712zM292.352 808.448c-16.896 0-31.744 8.704-42.496 21.504l-38.4-12.8c-21.504-10.752-40.448-38.4-40.448-61.952V270.848c0-23.552 19.456-51.2 40.448-59.904l42.496-14.848c10.752 10.752 23.552 16.896 38.4 16.896 29.696 0 53.248-23.552 53.248-53.248s-23.552-53.248-53.248-53.248c-23.552 0-45.056 14.848-51.2 36.352l-53.248 16.896c-42.496 14.848-80.896 64-80.896 111.104v486.4c0 47.104 38.4 93.696 83.456 111.104l51.2 16.896c8.704 19.456 27.648 31.744 49.152 31.744 29.696 0 53.248-23.552 53.248-53.248 1.536-31.744-22.016-55.296-51.712-55.296z m125.952-388.096c0 23.552 18.944 42.496 42.496 42.496s42.496-18.944 42.496-42.496c0-23.552-18.944-42.496-42.496-42.496-23.552-0.512-42.496 18.944-42.496 42.496z" p-id="3002"></path><path d="M669.696 443.904l80.896 78.848 2.048 111.104-396.8-2.048v-66.048l91.648-66.048 89.6 59.904 132.608-115.712z" p-id="3003"></path><path d="M627.2 748.544H336.896c-49.152 0-89.6-40.448-89.6-89.6V424.448c0-23.552 19.456-42.496 42.496-42.496h8.704v275.456c0 21.504 16.896 36.352 36.352 36.352h332.8v10.752c2.048 25.088-16.896 44.032-40.448 44.032z" p-id="3004"></path><path d="M746.496 676.352h-394.24c-21.504 0-36.352-16.896-36.352-36.352V330.752c0-25.6 21.504-47.104 47.104-47.104h384c25.6 0 47.104 21.504 47.104 47.104v298.496c1.536 25.6-22.016 47.104-47.616 47.104z m-377.344-53.248H742.4V345.6c0-6.144-4.096-10.752-10.752-10.752H379.904c-6.144 0-10.752 4.096-10.752 10.752v277.504z" p-id="3005"></path></svg>
\ No newline at end of file
src/icons/svg/query-history.svg 0 → 100644
View file @ 4e200e5e
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597110389502" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3148" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M591.5 447.4l141.4-143.3 57.6 58.4 65.2-264.3-260.6 66.1 72.7 73.7-141.5 143.3L396 249.2 135.3 513.5l65.2 66.1L396 381.3l130.3 132.1 65.2-66z m251.8 60.4h-92.1c-25.5 0-46.1 20.9-46.1 46.7v327c0 25.8 20.6 46.7 46.1 46.7h92.1c25.4 0 46.1-20.9 46.1-46.7v-327c-0.1-25.8-20.7-46.7-46.1-46.7z m-553 186.9h-92.2c-25.4 0-46.1 20.9-46.1 46.7v140.1c0 25.8 20.6 46.7 46.1 46.7h92.2c25.4 0 46.1-20.9 46.1-46.7V741.4c0-25.8-20.6-46.7-46.1-46.7z m276.5-93.5h-92.2c-25.4 0-46.1 20.9-46.1 46.7v233.6c0 25.8 20.6 46.7 46.1 46.7h92.2c25.5 0 46.1-20.9 46.1-46.7V647.9c0-25.8-20.7-46.7-46.1-46.7z" p-id="3149"></path></svg>
\ No newline at end of file
src/router/modules/dataVisibleManagement.js
View file @ 4e200e5e
......@@ -15,6 +15,20 @@ const router = {
name: '仪表盘',
component: () => import('@/views/data-visible/dashboard'),
meta: { title: '仪表盘', icon: 'dashboard' }
},
{
menuId: 'QueryHistory',
path: 'query-history',
name: '历史查询',
component: () => import('@/views/data-visible/query-history'),
meta: { title: '历史查询', icon: 'query-history' }
},
{
menuId: 'ImageIdentification',
path: 'image-identification',
name: '图像识别',
component: () => import('@/views/data-visible/image-identification'),
meta: { title: '图像识别', icon: 'image-identification' }
}
]
}
......
src/views/data-visible/dashboard/index.vue
View file @ 4e200e5e
......@@ -41,7 +41,7 @@
label-width="100px"
style="margin-top: 20px"
>
<div v-if="dataModelList.length">
<div v-if="dataModelList.length !== 0">
<el-form-item
v-for="(dataModel, index) in dataModelList"
:key="index + 300"
......@@ -184,13 +184,22 @@ export default {
onInstanceSelect(index) {
const id = parseInt(index)
const instance = this.deviceInstanceList.find(v => v.id === id)
this.deviceInstance = instance.id
if (instance.id !== this.deviceInstance) {
this.deviceInstance = instance.id
this.chartField.refresh = 1
const length = this.chartField.yFields.length
this.chartField.yFields = [...new Array(length).fill([])]
this.chartList = []
this.chartData = []
clearInterval(this.timer)
}
},
getDataModelByDeviceTypeId(id) {
getDataModelByDeviceTypeId({ id })
.then(res => {
this.dataModelList = res.data
this.dataModelList = []
this.chartField.yFields = []
this.dataModelList = res.data
this.dataModelList.forEach(v => {
this.chartField.yFields.push([])
})
......
src/views/data-visible/image-identification/index.vue 0 → 100644
View file @ 4e200e5e
<template>
<el-card class="container">
<el-row :gutter="20" class="content">
<el-col :xs="8" :sm="8" :md="6" :lg="4">
<div class="left">
<div class="search">
<el-select
v-model="deviceType"
style="width: 100%"
@change="onDeviceTypeChange"
>
<el-option
v-for="item in deviceTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="custom-menu">
<el-menu
ref="customMenu"
@select="onInstanceSelect"
>
<el-menu-item
v-for="(instance, index) in deviceInstanceList"
:id="'instance' + instance.id"
:key="'instance' + index"
:index="instance.id.toString()"
>{{ instance.name }}</el-menu-item>
</el-menu>
</div>
</div>
</el-col>
<el-col :xs="16" :sm="16" :md="18" :lg="20">
<el-form
:model="form"
>
<el-form-item label="宽度:">20cm</el-form-item>
</el-form>
<el-timeline>
<el-timeline-item
v-for="(image, index) in images"
:key="index"
:timestamp="image.step"
>
<el-image
style="width: 400px; height: 400px"
:src="image.url"
fit="contain"
:preview-src-list="[image.url]"
/>
</el-timeline-item>
</el-timeline>
</el-col>
</el-row>
</el-card>
</template>
<script>
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
import step1 from '@/assets/step1.jpeg'
import step2 from '@/assets/step2.jpeg'
import step3 from '@/assets/step3.jpeg'
import step4 from '@/assets/step4.jpeg'
export default {
name: 'ImageIdentification',
data() {
return {
deviceInstance: null,
instanceList: [],
deviceType: null,
deviceTypeList: [],
deviceInstanceList: [],
images: [
{
content: '活动按期开始',
step: '原始图片',
url: step1
},
{
content: '活动按期开始',
step: '边缘提取',
url: step2
},
{
content: '活动按期开始',
step: '图形识别',
url: step3
},
{
content: '活动按期开始',
step: '对比图',
url: step4
}
],
form: {}
}
},
created() {
// 初始化设备类型
getAllDeviceModel()
.then(res => {
this.deviceTypeList = res.data.map(v => {
return {
value: v.id,
label: v.name
}
})
if (this.deviceTypeList.length) {
this.deviceType = this.deviceTypeList[0].value
// 获取该设备类型下的设备实例
this.getAllInstanceByDeviceTypeId(this.deviceType)
}
})
.catch(_ => {})
},
methods: {
onDeviceTypeChange(val) {
// 获取该设备类型下的设备实例
this.getAllInstanceByDeviceTypeId(val)
},
onInstanceSelect(index) {
const id = parseInt(index)
const instance = this.deviceInstanceList.find(v => v.id === id)
if (instance.id !== this.deviceInstance) {
this.deviceInstance = instance.id
}
},
getAllInstanceByDeviceTypeId(val) {
getAllInstanceByDeviceTypeId({ deviceTypeId: val })
.then(res => {
this.deviceInstanceList = res.data
})
.then(_ => this.$nextTick())
.then(_ => {
if (this.deviceInstanceList.length) {
this.deviceInstance = this.deviceInstanceList[0].id
this.$nextTick()
.then(_ => {
document.getElementById(`instance${this.deviceInstanceList[0].id}`).click()
})
.catch(_ => {})
}
})
.catch(_ => {})
}
}
}
</script>
<style lang="scss" scoped>
.container{
min-height: calc(100vh - 95px);
.content{
display: flex;
min-height: calc(100vh - 135px);
.left{
width: 100%;
height: 100%;
.search{
height: 40px;
}
.custom-menu{
background-color: #efeff1;
height: calc(100% - 40px);
.el-menu{
background-color: initial;
border-right: none;
border-top: solid 1px #e6e6e6;
border-left: solid 1px #e6e6e6;
.el-menu-item.el-menu-item{
min-width: initial;
background-color: #efeff1;
}
.el-menu-item.is-active{
background-color: #fff;
color: #303133;
}
}
}
}
.top{
display: flex;
justify-content: space-between;
}
}
}
</style>
src/views/data-visible/query-history/index.vue 0 → 100644
View file @ 4e200e5e
<template>
<div>
<el-card class="no-bottom">
<el-form
ref="searchForm"
:model="searchForm"
label-width="80px"
inline
>
<el-form-item
label="input:"
prop="input"
>
<el-input v-model="searchForm.input" />
</el-form-item>
<el-form-item
label="status:"
prop="status"
>
<el-select v-model="searchForm.status" placeholder="请选择">
<el-option label="全部" :value="null" />
<el-option label="正常" :value="0" />
<el-option label="锁定" :value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" @click="addRow">增加系统</el-button>
</div>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="a"
label="a"
/>
<el-table-column
prop="b"
label="b"
/>
<el-table-column
prop="c"
label="c"
/>
<el-table-column
prop="d"
label="d"
/>
<el-table-column
label="操作"
width="140px"
align="center"
>
<template slot-scope="scope">
<el-button type="text" @click="editItem(scope.row)">编辑</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
style="margin-left: 10px"
@onConfirm="deleteItem(scope.row.id)"
>
<el-button slot="reference" type="text">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
<el-dialog
:title="add ? '增加系统' : '编辑系统'"
:visible.sync="dialogVisible"
width="700px"
>
<el-form
v-if="dialogVisible"
:model="addForm"
label-width="90px"
>
<el-form-item
label="input:"
>
<el-input v-model="addForm.input" />
</el-form-item>
<el-form-item
label="status:"
>
<el-input v-model="addForm.status" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSystem">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getTableData } from '@/api/data-visible/query-history'
export default {
name: 'QueryHistory',
props: {},
data() {
return {
searchForm: {
input: null,
status: null
},
add: true,
dialogVisible: false,
tableData: [],
addForm: {
input: null,
status: null
},
pageForm: {
pageSize: 10,
pageNum: 1,
total: 0
}
}
},
created() {},
mounted() {},
methods: {
getTableData(pageNum) {
const params = {
...this.searchForm,
pageNum,
pageSize: this.pageForm.pageSize
}
getTableData(params)
.then(res => {
const { records, totalSize } = res.data
this.tableData = records
this.pageForm.total = totalSize
})
.catch(err => console.error(err))
},
resetForm() {
this.$refs.searchForm.resetFields()
},
addRow() {
this.add = true
this.dialogVisible = true
},
editItem() {
this.add = false
this.dialogVisible = true
},
deleteItem(id) {},
saveSystem() {},
handleSizeChange(val) {
this.pageForm.pageSize = val
this.getTableData(1)
},
handleCurrentChange(val) {
this.pageForm.pageNum = val
this.getTableData(val)
}
}
}
</script>
<style lang="scss" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment