sxyanzhu
/
jhprjv2
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

dev_xds
姜玉琦 2024-03-24 20:09:06 +08:00
parent 668912e91c
commit 77c2a74c25
14 changed files with 740 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ruoyi-ui/package.json
View File

@ -63,7 +63,6 @@
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-h265-player": "^0.0.24",
"vue-meta": "2.4.0",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",

21
ruoyi-ui/public/easyplayer/EasyWasmPlayer.js 100644
View File

File diff suppressed because one or more lines are too long

0
ruoyi-ui/public/libDecoder.wasm → ruoyi-ui/public/easyplayer/libDecoder.wasm
View File

1
ruoyi-ui/public/index.html
View File

@ -6,6 +6,7 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="./easyplayer/EasyWasmPlayer.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6zAD8CIavtzWnkGg0a7roush5maGMIPn"></script>
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

2
ruoyi-ui/src/views/flowable/task/myProcess/detail/detailDrawer.vue
View File

@ -423,7 +423,7 @@ export default {
},
handledownload(url) {
let fileType = url.split(".");
if (fileTypes.indexOf(fileType) > -1) {
if (this.fileTypes.indexOf(fileType[fileType.length-1].toLocaleLowerCase())>-1) {
window.open(process.env.VUE_APP_BASE_API + url);
} else {
this.$download.resource(url);

2
ruoyi-ui/src/views/flowable/task/todo/detail/approveDrawer.vue
View File

@ -619,7 +619,7 @@ export default {
},
handledownload(url) {
let fileType = url.split(".");
if(fileTypes.indexOf(fileType)>-1){
if(this.fileTypes.indexOf(fileType[fileType.length-1].toLocaleLowerCase())>-1){
window.open(process.env.VUE_APP_BASE_API+url);
}else{
this.$download.resource(url);

9
ruoyi-ui/src/views/trouble/pshProblemmodify/index.vue
View File

@ -52,6 +52,14 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="提交人" prop="createBy">
<el-input
v-model="queryParams.createBy"
placeholder="请输入提交人姓名/联系方式"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="提交时间">
<el-date-picker
v-model="daterangeMarksTime"
@ -472,6 +480,7 @@ export default {
checkUserPhone: null,
isDel: null,
dangerType: null,
createBy:null,
createUser: null,
createTime: null,
updateUser: null,

208
ruoyi-ui/src/views/trouble/pshProblemmodifyDraft/index.vue
View File

@ -1,6 +1,13 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="所属项目" prop="projectId" v-if="showPro">
<el-select
v-model="queryParams.projectId"
@ -17,7 +24,11 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="责任主体" prop="projectDeptId" v-hasPermi="['project:project:zgs']">
<el-form-item
label="责任主体"
prop="projectDeptId"
v-hasPermi="['project:project:zgs']"
>
<el-select v-model="queryParams.deptId" placeholder="请选择责任主体" clearable>
<el-option
v-for="dict in projectDeptOptions"
@ -27,7 +38,11 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="问题分类" prop="projectDeptId" v-hasPermi="['project:project:zgs']">
<el-form-item
label="问题分类"
prop="projectDeptId"
v-hasPermi="['project:project:zgs']"
>
<el-select v-model="queryParams.roleTypes" placeholder="请选择问题分类" clearable>
<el-option
v-for="dict in roleTypeOpts"
@ -46,7 +61,9 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -60,7 +77,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -71,7 +89,8 @@
@click="dataSynchronization"
:disabled="single"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']"
>数据同步</el-button>
>数据同步</el-button
>
</el-col>
<el-col :span="1.5">
<el-tooltip content="Top center" placement="批量提交选择的数据！">
@ -83,22 +102,34 @@
@click="batchSubmitForm"
:disabled="multiple"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']"
>批量提交</el-button>
>批量提交</el-button
>
</el-tooltip>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-alert title="操作说明" class="tips">
<template slot='title'>
<template slot="title">
<div><strong>数据同步:</strong>将选中行的数据同步到当前项目的其它行！</div>
<div><strong>批量提交:</strong>将选中行的数据，数据验证通过后一次全部提交！</div>
</template>
</el-alert>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-table v-loading="loading" :data="smzSspProblemmodifyDraftList" :row-class-name="rowIndex" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="smzSspProblemmodifyDraftList"
:row-class-name="rowIndex"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="50" />
<el-table-column label="问题图片" header-align="center" align="left" prop="smarkUrl" width="240">
<el-table-column
label="问题图片"
header-align="center"
align="left"
prop="smarkUrl"
width="240"
>
<template slot-scope="scope">
<image-upload v-model="scope.row.smarkUrl" :limit="9" :isShowTip="false" />
</template>
@ -153,17 +184,27 @@
</el-table-column>
<el-table-column label="施工部位" align="center" prop="workParts" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.workParts" placeholder="请输入施工部位" type="textarea" :rows="3"/>
<el-input
v-model="scope.row.workParts"
placeholder="请输入施工部位"
type="textarea"
:rows="3"
/>
</template>
</el-table-column>
<el-table-column label="整改要求" align="center" prop="changeInfo" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.changeInfo" placeholder="请输入整改要求" type="textarea" :rows="3"/>
<el-input
v-model="scope.row.changeInfo"
placeholder="请输入整改要求"
type="textarea"
:rows="3"
/>
</template>
</el-table-column>
<el-table-column label="问题人员" align="center" prop="lordSentUser" width="260">
<template slot-scope="scope">
<el-row style="line-height: 36px;margin-bottom: 5px;">
<el-row style="line-height: 36px; margin-bottom: 5px">
<el-col :span="6">整改人：</el-col>
<el-col :span="18">
<el-select
@ -188,7 +229,7 @@
</el-select>
</el-col>
</el-row>
<el-row style="line-height: 36px;margin-bottom: 5px;">
<el-row style="line-height: 36px; margin-bottom: 5px">
<el-col :span="6">抄送人：</el-col>
<el-col :span="18">
<el-select
@ -213,7 +254,7 @@
</el-select>
</el-col>
</el-row>
<el-row style="line-height: 36px;margin-bottom: 5px;">
<el-row style="line-height: 36px; margin-bottom: 5px">
<el-col :span="6">复检人：</el-col>
<el-col :span="18">
<el-select
@ -240,13 +281,20 @@
</el-row>
</template>
</el-table-column>
<el-table-column label="整改截至时间" align="center" prop="nickedTime" width="180">
<el-table-column
label="整改截至时间"
align="center"
prop="nickedTime"
width="180"
>
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.nickedTime"
type="date"
value-format="yyyy-MM-dd HH:ss"
placeholder="选择截至时间" style="width:160px;">
placeholder="选择截至时间"
style="width: 160px"
>
</el-date-picker>
</template>
</el-table-column>
@ -254,11 +302,22 @@
<template slot-scope="scope">
<div><i class="el-icon-user"></i>{{ scope.row.createUserName }}</div>
<div><i class="el-icon-phone-outline"></i>{{ scope.row.createUser }}</div>
<div><el-tag type="info">{{scope.row.createUserDeptName}}</el-tag></div>
<div><i class="el-icon-alarm-clock"></i>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}</div>
<div>
<el-tag type="info">{{ scope.row.createUserDeptName }}</el-tag>
</div>
<div>
<i class="el-icon-alarm-clock"></i
>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="70">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
fixed="right"
width="70"
>
<template slot-scope="scope">
<el-button
size="mini"
@ -266,7 +325,8 @@
icon="el-icon-edit-outline"
@click="submitForm(scope.row)"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:edit']"
>提交</el-button>
>提交</el-button
>
<el-button
class="bt2"
size="mini"
@ -274,7 +334,8 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -290,7 +351,12 @@
</template>
<script>
import { listSmzSspProblemmodifyDraft, updateSmzSspProblemmodifyDraft, batchUpdateSmzSspProblemmodifyDraft, delSmzSspProblemmodifyDraft } from "@/api/trouble/smzSspProblemmodifyDraft";
import {
listSmzSspProblemmodifyDraft,
updateSmzSspProblemmodifyDraft,
batchUpdateSmzSspProblemmodifyDraft,
delSmzSspProblemmodifyDraft,
} from "@/api/trouble/smzSspProblemmodifyDraft";
export default {
name: "SmzSspProblemmodifyDraft",
@ -330,14 +396,13 @@ export default {
// 表单参数
form: {},
// 表单校验
rules: {
},
rules: {},
roleTypeOpts: [
{label:'集团',value:3},
{label:'子公司',value:4},
{label:'甲方代表',value:5},
{label:'监理单位',value:6},
{label:'总包单位',value:7}
{ label: "集团", value: 3 },
{ label: "子公司", value: 4 },
{ label: "甲方代表", value: 5 },
{ label: "监理单位", value: 6 },
{ label: "总包单位", value: 7 },
],
showPro: false,
projectOptions: [],
@ -361,9 +426,13 @@ export default {
this.projectOptions = response.rows;
if (response.rows.length == 1) {
//默认初始化当前项目人员信息
this.$api.publics.selectProjectAllUnitUser({projectId: response.rows[0].id})
this.$api.publics
.selectProjectAllUnitUser({ projectId: response.rows[0].id })
.then((d) => {
this.projectUnitUsers.push({projectId:response.rows[0].id,data:d.data});
this.projectUnitUsers.push({
projectId: response.rows[0].id,
data: d.data,
});
});
} else if (response.rows.length > 1) {
this.showPro = true;
@ -373,18 +442,17 @@ export default {
/** 查询随手拍问题整改质量留痕信息列表 */
getList() {
this.loading = true;
listSmzSspProblemmodifyDraft(this.queryParams).then(response => {
response.rows.forEach(row => {
listSmzSspProblemmodifyDraft(this.queryParams).then((response) => {
response.rows.forEach((row) => {
if (!this.projectIds.includes(row.projectId)) {
this.projectIds.push(row.projectId);
}
});
this.projectIds.forEach(proj => {
this.$api.publics.selectProjectAllUnitUser({projectId: proj})
.then((d) => {
this.projectIds.forEach((proj) => {
this.$api.publics.selectProjectAllUnitUser({ projectId: proj }).then((d) => {
this.projectUnitUsers.push({ projectId: proj, data: d.data });
});
})
});
this.smzSspProblemmodifyDraftList = response.rows;
this.total = response.total;
this.loading = false;
@ -409,10 +477,10 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.indexs = selection.map(item => item.index)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.id);
this.indexs = selection.map((item) => item.index);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 提交按钮 */
submitForm(row) {
@ -445,7 +513,7 @@ export default {
return false;
}
if (!row.nickedTime) {
row.nickedTime = row.nickedTime+" 23:59"
row.nickedTime = row.nickedTime + " 23:59";
this.$message.error("请选择整改截至时间！");
return false;
}
@ -454,7 +522,7 @@ export default {
return false;
}
this.loading = true;
updateSmzSspProblemmodifyDraft(row).then(response => {
updateSmzSspProblemmodifyDraft(row).then((response) => {
this.$modal.msgSuccess("提交成功！");
this.loading = false;
this.getList();
@ -465,7 +533,7 @@ export default {
let indexs = this.indexs;
let rows = [];
for (let i = 0; i < indexs.length; i++) {
let row = this.smzSspProblemmodifyDraftList[(indexs[i]-1)];
let row = this.smzSspProblemmodifyDraftList[indexs[i] - 1];
if (!row.smarkUrl) {
this.$message.error("第" + indexs[i] + "行请上传隐患图片！");
return false;
@ -505,7 +573,7 @@ export default {
rows.push(row);
}
this.loading = true;
batchUpdateSmzSspProblemmodifyDraft(rows).then(response => {
batchUpdateSmzSspProblemmodifyDraft(rows).then((response) => {
this.$modal.msgSuccess("提交成功！");
this.loading = false;
this.getList();
@ -516,20 +584,28 @@ export default {
const ids = row.id || this.ids;
const indexs = row.index || this.index;
if (this.smzSspProblemmodifyDraftList[indexs - 1].id) {
this.$modal.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？').then(function() {
this.$modal
.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？')
.then(function () {
return delSmzSspProblemmodifyDraft(ids);
}).then(() => {
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
} else {
let that = this;
//新增行
this.$modal.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？').then(function() {
this.$modal
.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？')
.then(function () {
that.smzSspProblemmodifyDraftList.splice(indexs - 1, 1);
}).then(() => {
})
.then(() => {
that.$modal.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
}
},
/** 行内序号 */
@ -594,7 +670,7 @@ export default {
dataSynchronization() {
let indexs = this.indexs;
let data = this.smzSspProblemmodifyDraftList;
let row = data[(indexs-1)];
let row = data[indexs - 1];
for (let i = 0; i < data.length; i++) {
if (data[i].index != row.index && data[i].projectId == row.projectId) {
data[i].lordSent = row.lordSent;
@ -614,7 +690,7 @@ export default {
id: null,
projectId: this.projectOptions.length == 1 ? this.projectOptions[0].id : null,
infoType: "0",
problemArea: null,
problemArea: this.projectOptions.length == 1 ? this.projectOptions[0].projectName : null,
workParts: null,
changeInfo: null,
lordSent: null,
@ -632,39 +708,33 @@ export default {
createUserName: this.$store.getters.nickname,
createUserDeptName: this.$store.getters.dept.deptName,
createTime: this.$dt(new Date()).format("YYYY-MM-DD HH:mm:ss"),
isDel: 0
}
isDel: 0,
};
this.smzSspProblemmodifyDraftList.push(row);
this.changeProject(row.projectId, row);
this.$notify({
title: '新增成功',
message: '已新增一行新数据，提交后生效！',
type: 'success'
title: "新增成功",
message: "已新增一行新数据，提交后生效！",
type: "success",
});
},
changeProject(val, row) {
if (val) {
console.log(1111111111);
if (!this.projectIds.includes(val)) {
console.log(2222222222);
this.projectIds.push(row.projectId);
this.$api.publics.selectProjectAllUnitUser({projectId: val})
.then((d) => {
console.log(3333333333);
this.$api.publics.selectProjectAllUnitUser({ projectId: val }).then((d) => {
this.projectUnitUsers.push({ projectId: val, data: d.data });
});
}
for (let i = 0; i < this.projectOptions.length; i++) {
console.log(4444444444);
if (this.projectOptions[i].projectId == val) {
console.log(5555555555);
row.problemArea = this.projectOptions[i].projectName;
break;
}
}
return;
}
}
}
},
},
};
</script>
<style lang="scss">

9
ruoyi-ui/src/views/trouble/sspProblemmodify/index.vue
View File

@ -52,6 +52,14 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="提交人" prop="createBy">
<el-input
v-model="queryParams.createBy"
placeholder="请输入提交人姓名/联系方式"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="提交时间">
<el-date-picker
v-model="daterangeMarksTime"
@ -466,6 +474,7 @@ export default {
checkUserPhone: null,
isDel: null,
dangerType: null,
createBy: null,
createUser: null,
createTime: null,
updateUser: null,

206
ruoyi-ui/src/views/trouble/sspProblemmodifyDraft/index.vue
View File

@ -1,6 +1,13 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="所属项目" prop="projectId" v-if="showPro">
<el-select
v-model="queryParams.projectId"
@ -17,7 +24,11 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="责任主体" prop="projectDeptId" v-hasPermi="['project:project:zgs']">
<el-form-item
label="责任主体"
prop="projectDeptId"
v-hasPermi="['project:project:zgs']"
>
<el-select v-model="queryParams.deptId" placeholder="请选择责任主体" clearable>
<el-option
v-for="dict in projectDeptOptions"
@ -27,7 +38,11 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="问题分类" prop="projectDeptId" v-hasPermi="['project:project:zgs']">
<el-form-item
label="问题分类"
prop="projectDeptId"
v-hasPermi="['project:project:zgs']"
>
<el-select v-model="queryParams.roleTypes" placeholder="请选择问题分类" clearable>
<el-option
v-for="dict in roleTypeOpts"
@ -46,7 +61,9 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -60,7 +77,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
@ -71,7 +89,8 @@
@click="dataSynchronization"
:disabled="single"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']"
>数据同步</el-button>
>数据同步</el-button
>
</el-col>
<el-col :span="1.5">
<el-tooltip content="Top center" placement="批量提交选择的数据！">
@ -83,22 +102,34 @@
@click="batchSubmitForm"
:disabled="multiple"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:add']"
>批量提交</el-button>
>批量提交</el-button
>
</el-tooltip>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-alert title="操作说明" class="tips">
<template slot='title'>
<template slot="title">
<div><strong>数据同步:</strong>将选中行的数据同步到当前项目的其它行！</div>
<div><strong>批量提交:</strong>将选中行的数据，数据验证通过后一次全部提交！</div>
</template>
</el-alert>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-table v-loading="loading" :data="smzSspProblemmodifyDraftList" :row-class-name="rowIndex" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="smzSspProblemmodifyDraftList"
:row-class-name="rowIndex"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="50" />
<el-table-column label="问题图片" header-align="center" align="left" prop="smarkUrl" width="240">
<el-table-column
label="问题图片"
header-align="center"
align="left"
prop="smarkUrl"
width="240"
>
<template slot-scope="scope">
<image-upload v-model="scope.row.smarkUrl" :limit="9" :isShowTip="false" />
</template>
@ -153,17 +184,27 @@
</el-table-column>
<el-table-column label="施工部位" align="center" prop="workParts" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.workParts" placeholder="请输入施工部位" type="textarea" :rows="3"/>
<el-input
v-model="scope.row.workParts"
placeholder="请输入施工部位"
type="textarea"
:rows="3"
/>
</template>
</el-table-column>
<el-table-column label="整改要求" align="center" prop="changeInfo" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.changeInfo" placeholder="请输入整改要求" type="textarea" :rows="3"/>
<el-input
v-model="scope.row.changeInfo"
placeholder="请输入整改要求"
type="textarea"
:rows="3"
/>
</template>
</el-table-column>
<el-table-column label="问题人员" align="center" prop="lordSentUser" width="260">
<template slot-scope="scope">
<el-row style="line-height: 36px;margin-bottom: 5px;">
<el-row style="line-height: 36px; margin-bottom: 5px">
<el-col :span="6">整改人：</el-col>
<el-col :span="18">
<el-select
@ -188,7 +229,7 @@
</el-select>
</el-col>
</el-row>
<el-row style="line-height: 36px;margin-bottom: 5px;">
<el-row style="line-height: 36px; margin-bottom: 5px">
<el-col :span="6">抄送人：</el-col>
<el-col :span="18">
<el-select
@ -213,7 +254,7 @@
</el-select>
</el-col>
</el-row>
<el-row style="line-height: 36px;margin-bottom: 5px;">
<el-row style="line-height: 36px; margin-bottom: 5px">
<el-col :span="6">复检人：</el-col>
<el-col :span="18">
<el-select
@ -240,13 +281,20 @@
</el-row>
</template>
</el-table-column>
<el-table-column label="整改截至时间" align="center" prop="nickedTime" width="180">
<el-table-column
label="整改截至时间"
align="center"
prop="nickedTime"
width="180"
>
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.nickedTime"
type="date"
value-format="yyyy-MM-dd HH:ss"
placeholder="选择截至时间" style="width:160px;">
placeholder="选择截至时间"
style="width: 160px"
>
</el-date-picker>
</template>
</el-table-column>
@ -254,11 +302,22 @@
<template slot-scope="scope">
<div><i class="el-icon-user"></i>{{ scope.row.createUserName }}</div>
<div><i class="el-icon-phone-outline"></i>{{ scope.row.createUser }}</div>
<div><el-tag type="info">{{scope.row.createUserDeptName}}</el-tag></div>
<div><i class="el-icon-alarm-clock"></i>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}</div>
<div>
<el-tag type="info">{{ scope.row.createUserDeptName }}</el-tag>
</div>
<div>
<i class="el-icon-alarm-clock"></i
>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="70">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
fixed="right"
width="70"
>
<template slot-scope="scope">
<el-button
size="mini"
@ -266,7 +325,8 @@
icon="el-icon-edit-outline"
@click="submitForm(scope.row)"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:edit']"
>提交</el-button>
>提交</el-button
>
<el-button
class="bt2"
size="mini"
@ -274,7 +334,8 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['trouble:smzSspProblemmodifyDraft:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -290,7 +351,12 @@
</template>
<script>
import { listSmzSspProblemmodifyDraft, updateSmzSspProblemmodifyDraft, batchUpdateSmzSspProblemmodifyDraft, delSmzSspProblemmodifyDraft } from "@/api/trouble/smzSspProblemmodifyDraft";
import {
listSmzSspProblemmodifyDraft,
updateSmzSspProblemmodifyDraft,
batchUpdateSmzSspProblemmodifyDraft,
delSmzSspProblemmodifyDraft,
} from "@/api/trouble/smzSspProblemmodifyDraft";
export default {
name: "SmzSspProblemmodifyDraft",
@ -330,14 +396,13 @@ export default {
// 表单参数
form: {},
// 表单校验
rules: {
},
rules: {},
roleTypeOpts: [
{label:'集团',value:3},
{label:'子公司',value:4},
{label:'甲方代表',value:5},
{label:'监理单位',value:6},
{label:'总包单位',value:7}
{ label: "集团", value: 3 },
{ label: "子公司", value: 4 },
{ label: "甲方代表", value: 5 },
{ label: "监理单位", value: 6 },
{ label: "总包单位", value: 7 },
],
showPro: false,
projectOptions: [],
@ -361,9 +426,13 @@ export default {
this.projectOptions = response.rows;
if (response.rows.length == 1) {
//默认初始化当前项目人员信息
this.$api.publics.selectProjectAllUnitUser({projectId: response.rows[0].id})
this.$api.publics
.selectProjectAllUnitUser({ projectId: response.rows[0].id })
.then((d) => {
this.projectUnitUsers.push({projectId:response.rows[0].id,data:d.data});
this.projectUnitUsers.push({
projectId: response.rows[0].id,
data: d.data,
});
});
} else if (response.rows.length > 1) {
this.showPro = true;
@ -373,18 +442,17 @@ export default {
/** 查询随手拍问题整改质量留痕信息列表 */
getList() {
this.loading = true;
listSmzSspProblemmodifyDraft(this.queryParams).then(response => {
response.rows.forEach(row => {
listSmzSspProblemmodifyDraft(this.queryParams).then((response) => {
response.rows.forEach((row) => {
if (!this.projectIds.includes(row.projectId)) {
this.projectIds.push(row.projectId);
}
});
this.projectIds.forEach(proj => {
this.$api.publics.selectProjectAllUnitUser({projectId: proj})
.then((d) => {
this.projectIds.forEach((proj) => {
this.$api.publics.selectProjectAllUnitUser({ projectId: proj }).then((d) => {
this.projectUnitUsers.push({ projectId: proj, data: d.data });
});
})
});
this.smzSspProblemmodifyDraftList = response.rows;
this.total = response.total;
this.loading = false;
@ -409,10 +477,10 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.indexs = selection.map(item => item.index)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.id);
this.indexs = selection.map((item) => item.index);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 提交按钮 */
submitForm(row) {
@ -445,7 +513,7 @@ export default {
return false;
}
if (!row.nickedTime) {
row.nickedTime = row.nickedTime+" 23:59"
row.nickedTime = row.nickedTime + " 23:59";
this.$message.error("请选择整改截至时间！");
return false;
}
@ -454,7 +522,7 @@ export default {
return false;
}
this.loading = true;
updateSmzSspProblemmodifyDraft(row).then(response => {
updateSmzSspProblemmodifyDraft(row).then((response) => {
this.$modal.msgSuccess("提交成功！");
this.loading = false;
this.getList();
@ -465,7 +533,7 @@ export default {
let indexs = this.indexs;
let rows = [];
for (let i = 0; i < indexs.length; i++) {
let row = this.smzSspProblemmodifyDraftList[(indexs[i]-1)];
let row = this.smzSspProblemmodifyDraftList[indexs[i] - 1];
if (!row.smarkUrl) {
this.$message.error("第" + indexs[i] + "行请上传隐患图片！");
return false;
@ -505,7 +573,7 @@ export default {
rows.push(row);
}
this.loading = true;
batchUpdateSmzSspProblemmodifyDraft(rows).then(response => {
batchUpdateSmzSspProblemmodifyDraft(rows).then((response) => {
this.$modal.msgSuccess("提交成功！");
this.loading = false;
this.getList();
@ -516,20 +584,28 @@ export default {
const ids = row.id || this.ids;
const indexs = row.index || this.index;
if (this.smzSspProblemmodifyDraftList[indexs - 1].id) {
this.$modal.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？').then(function() {
this.$modal
.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？')
.then(function () {
return delSmzSspProblemmodifyDraft(ids);
}).then(() => {
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
} else {
let that = this;
//新增行
this.$modal.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？').then(function() {
this.$modal
.confirm('是否确认删除隐患问题编号为"' + indexs + '"的数据项？')
.then(function () {
that.smzSspProblemmodifyDraftList.splice(indexs - 1, 1);
}).then(() => {
})
.then(() => {
that.$modal.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
}
},
/** 行内序号 */
@ -594,7 +670,7 @@ export default {
dataSynchronization() {
let indexs = this.indexs;
let data = this.smzSspProblemmodifyDraftList;
let row = data[(indexs-1)];
let row = data[indexs - 1];
for (let i = 0; i < data.length; i++) {
if (data[i].index != row.index && data[i].projectId == row.projectId) {
data[i].lordSent = row.lordSent;
@ -612,7 +688,7 @@ export default {
let row = {
index: this.smzSspProblemmodifyDraftList.length + 1,
id: null,
projectId: null,
projectId: this.projectOptions.length == 1 ? this.projectOptions[0].id : null,
infoType: "1",
problemArea: this.projectOptions.length == 1 ? this.projectOptions[0].projectName : null,
workParts: null,
@ -632,38 +708,32 @@ export default {
createUserName: this.$store.getters.nickname,
createUserDeptName: this.$store.getters.dept.deptName,
createTime: this.$dt(new Date()).format("YYYY-MM-DD HH:mm:ss"),
isDel: 0
}
isDel: 0,
};
this.smzSspProblemmodifyDraftList.push(row);
this.changeProject(row.projectId, row);
this.$notify({
title: '新增成功',
message: '已新增一行新数据，提交后生效！',
type: 'success'
title: "新增成功",
message: "已新增一行新数据，提交后生效！",
type: "success",
});
},
changeProject(val, row) {
if (val) {
console.log(1111111111);
if (!this.projectIds.includes(val)) {
console.log(2222222222);
this.projectIds.push(row.projectId);
this.$api.publics.selectProjectAllUnitUser({projectId: val})
.then((d) => {
console.log(3333333333);
this.$api.publics.selectProjectAllUnitUser({ projectId: val }).then((d) => {
this.projectUnitUsers.push({ projectId: val, data: d.data });
});
}
for (let i = 0; i < this.projectOptions.length; i++) {
console.log(4444444444);
if (this.projectOptions[i].projectId == val) {
console.log(5555555555);
row.problemArea = this.projectOptions[i].projectName;
break;
}
}
}
}
},
// changeProject(val,row){
// if(!this.projectIds.includes(val)){
// this.projectIds.push(row.projectId);
@ -679,7 +749,7 @@ export default {
// }
// }
// }
}
},
};
</script>
<style lang="scss">

34
ruoyi-ui/src/views/video/videoConfig/index.vue
View File

@ -268,6 +268,20 @@
<el-form-item label="设备名称" prop="videoName">
<el-input v-model="form.videoName" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备类型" prop="videoOnlyType">
<el-select
v-model="form.videoOnlyType"
placeholder="请选择设备类型"
style="width: 100%"
>
<el-option
v-for="dict in dict.type.project_video_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备编号" prop="videoDvrNumber">
<el-input v-model="form.videoDvrNumber" placeholder="请输入设备编号" />
</el-form-item>
@ -277,6 +291,20 @@
<el-form-item label="通信密码" prop="signalCode">
<el-input v-model="form.signalCode" placeholder="请输入通信密码" />
</el-form-item>
<el-form-item label="通讯状态" prop="signalState">
<el-select
v-model="form.signalState"
placeholder="请选择设备状态"
style="width: 100%"
>
<el-option
v-for="dict in dict.type.project_video_signal_state"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-divider content-position="center">设备通道信息</el-divider>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
@ -429,6 +457,12 @@ export default {
{ required: false, message: "请输入备注", trigger: "blur" },
{ maxlength: 200, message: "备注最多200字符", trigger: "blur" },
],
videoOnlyType: [
{ required: true, message: "请选择设备类型", trigger: "blur" }
],
signalState: [
{ required: true, message: "请输入通信状态", trigger: "blur" }
]
},
formData: {
videoDvrNumber: null,

34
ruoyi-ui/src/views/video/videoConfig/videoConfigDrawer.vue
View File

@ -180,6 +180,20 @@
</el-form-item>
<el-form-item label="设备名称" prop="videoName">
<el-input v-model="form.videoName" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备类型" prop="videoOnlyType">
<el-select
v-model="form.videoOnlyType"
placeholder="请选择设备类型"
style="width: 100%"
>
<el-option
v-for="dict in dict.type.project_video_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备编号" prop="videoDvrNumber">
<el-input v-model="form.videoDvrNumber" placeholder="请输入设备编号" />
@ -189,6 +203,20 @@
</el-form-item>
<el-form-item label="通信密码" prop="signalCode">
<el-input v-model="form.signalCode" placeholder="请输入通信密码" />
</el-form-item>
<el-form-item label="通讯状态" prop="signalState">
<el-select
v-model="form.signalState"
placeholder="请选择设备状态"
style="width: 100%"
>
<el-option
v-for="dict in dict.type.project_video_signal_state"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-divider content-position="center">设备通道信息</el-divider>
<el-row :gutter="10" class="mb8">
@ -324,6 +352,12 @@ export default {
{ required: false, message: "请输入备注", trigger: "blur" },
{ maxlength: 200, message: "备注最多200字符", trigger: "blur" },
],
videoOnlyType: [
{ required: true, message: "请选择设备类型", trigger: "blur" }
],
signalState: [
{ required: true, message: "请输入通信状态", trigger: "blur" }
]
},
isOpen: false,
nodes: [],

129
ruoyi-ui/src/views/video/videoConfig/videoPlayDrawer.vue
View File

@ -8,29 +8,17 @@
@close="onClose"
style="padding-left: 20px"
>
<div class="videoView" v-if="showVideoView0">
<H265Player :url="url0" @on-error="handleOnError0" />
<div class="videoView">
<div id="vd01"></div>
</div>
<div class="videoView videoViewError" v-if="showVideoView0 == false">
设备0通道链接失败！请及时检查！
<div class="videoView">
<div id="vd02"></div>
</div>
<div class="videoView" v-if="showVideoView1">
<H265Player :url="url1" @on-error="handleOnError1" />
<div class="videoView">
<div id="vd03"></div>
</div>
<div class="videoView videoViewError" v-if="showVideoView1 == false">
设备1通道链接失败！请及时检查！
</div>
<div class="videoView" v-if="showVideoView2">
<H265Player :url="url2" @on-error="handleOnError2" />
</div>
<div class="videoView videoViewError" v-if="showVideoView2 == false">
设备2通道链接失败！请及时检查！
</div>
<div class="videoView" v-if="showVideoView3">
<H265Player :url="url3" @on-error="handleOnError3" />
</div>
<div class="videoView videoViewError" v-if="showVideoView3 == false">
设备3通道链接失败！请及时检查！
<div class="videoView">
<div id="vd04"></div>
</div>
</el-drawer>
</div>
@ -38,13 +26,9 @@
<script>
import { getVideoPassage, editPassageState } from "@/api/video/videoConfig";
import H265Player from "vue-h265-player";
export default {
name: "videoPlay",
components: {
H265Player,
},
props: {
formData: {
videoDvrNumber: String,
@ -52,17 +36,9 @@ export default {
},
data() {
return {
players: [],
request:
"http://192.168.25.2:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
url0: "",
url1: "",
url2: "",
url3: "",
showVideoView0: true,
showVideoView1: true,
showVideoView2: true,
showVideoView3: true,
videoPassageList: [],
"https://szgc.jhncidg.com/video/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
};
},
computed: {},
@ -80,54 +56,87 @@ export default {
},
},
created() {},
mounted() {},
beforeDestroy() {},
beforeDestroy() {
console.log("-----beforeDestroy------>");
this.players.forEach((p) => {
if (p) {
try {
p.stop();
} catch (e) {}
}
});
},
mounted() {
this.$nextTick(() => {
for (let i = 1; i <= 4; i++) {
let player = new WasmPlayer(null, "vd0" + i, null, {
Height: true,
});
this.players.push(player);
}
});
},
methods: {
onOpen() {},
onClose() {},
onClose() {
this.players.forEach((p) => {
if (p) {
try {
p.stop();
} catch (e) {}
}
});
},
handleOnError0(error) {
//this.showVideoView0 = false;
console.log("error: ", error);
this.url0 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "0");
//console.log("error: ", error);
//this.url0 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "0");
//this.updatePassageState(this.videoPassageList[0].id);
},
handleOnError1(error) {
//this.showVideoView1 = false;
console.log("error: ", error);
this.url1 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "1");
//console.log("error: ", error);
//this.url1 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "1");
//this.updatePassageState(this.videoPassageList[1].id);
},
handleOnError2(error) {
//this.showVideoView2 = false;
console.log("error: ", error);
this.url2 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "2");
//console.log("error: ", error);
//this.url2 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "2");
//this.updatePassageState(this.videoPassageList[2].id);
},
handleOnError3(error) {
//this.showVideoView3 = false;
console.log("error: ", error);
this.url3 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "3");
//console.log("error: ", error);
//this.url3 = this.request.replace("192.168.25.2","111.21.209.230").replace("{{passage}}", "3");
//this.updatePassageState(this.videoPassageList[3].id);
},
//查询视频通道
initVideo() {
getVideoPassage(this.formData.videoDvrNumber).then((response) => {
let data = response.data;
this.videoPassageList = data;
data.forEach((it, idx) => {
if (idx == 0) {
this.url0 = this.request.replace("{{passage}}", it.passageValue);
}
if (idx == 1) {
this.url1 = this.request.replace("{{passage}}", it.passageValue);
}
if (idx == 2) {
this.url2 = this.request.replace("{{passage}}", it.passageValue);
}
if (idx == 3) {
this.url3 = this.request.replace("{{passage}}", it.passageValue);
this.players.forEach((p) => {
if (p) {
try {
p.stop();
} catch (e) {}
}
});
this.players = [];
let that = this;
getVideoPassage(that.formData.videoDvrNumber).then((response) => {
let data = response.data;
that.videoPassageList = data;
data.forEach((it, idx) => {
let player = new WasmPlayer(null, "vd0" + (idx + 1), null, {
Height: true,
});
that.players.push(player);
});
setTimeout(() => {
that.videoPassageList.forEach((it, idx) => {
let url = that.request.replace("{{passage}}", it.passageValue);
that.players[idx].play(url, 1);
});
},400);
});
},
updatePassageState(id) {

133
ruoyi-ui/src/views/video/videoList/index.vue
View File

@ -24,29 +24,17 @@
</div>
</div>
<div class="right" v-if="showVideo">
<div class="videoView" v-if="showVideoView0">
<H265Player :url="url0" @on-error="handleOnError0" />
<div class="videoView">
<div id="vd01"></div>
</div>
<div class="videoView videoViewError" v-if="showVideoView0 == false">
设备0通道链接失败！请及时检查！
<div class="videoView">
<div id="vd02"></div>
</div>
<div class="videoView" v-if="showVideoView1">
<H265Player :url="url1" @on-error="handleOnError1" />
<div class="videoView">
<div id="vd03"></div>
</div>
<div class="videoView videoViewError" v-if="showVideoView1 == false">
设备1通道链接失败！请及时检查！
</div>
<div class="videoView" v-if="showVideoView2">
<H265Player :url="url2" @on-error="handleOnError2" />
</div>
<div class="videoView videoViewError" v-if="showVideoView2 == false">
设备2通道链接失败！请及时检查！
</div>
<div class="videoView" v-if="showVideoView3">
<H265Player :url="url3" @on-error="handleOnError3" />
</div>
<div class="videoView videoViewError" v-if="showVideoView3 == false">
设备3通道链接失败！请及时检查！
<div class="videoView">
<div id="vd04"></div>
</div>
</div>
</div>
@ -58,35 +46,44 @@ import {
getVideoPassage,
editPassageState,
} from "@/api/video/videoConfig";
import H265Player from "vue-h265-player";
export default {
name: "VideoPlay",
components: {
H265Player,
},
data() {
return {
// 遮罩层
loading: true,
showVideo: false,
players: [],
showVideo: true,
// 视频配置表格数据
videoConfigList: [],
currentIndex: null,
request:
"http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
url0: "",
url1: "",
url2: "",
url3: "",
showVideoView0: true,
showVideoView1: true,
showVideoView2: true,
showVideoView3: true,
"https://szgc.jhncidg.com/video/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
videoPassageList: [],
videoDvrNumber: null,
};
},
beforeDestroy() {
console.log("-----beforeDestroy------>");
this.players.forEach((p) => {
if (p) {
try {
p.stop();
} catch (e) {}
}
});
},
mounted() {
this.$nextTick(() => {
for (let i = 1; i <= 4; i++) {
let player = new WasmPlayer(null, "vd0" + i, null, {
Height: true,
});
this.players.push(player);
}
});
},
created() {
this.initMenu();
},
@ -99,64 +96,64 @@ export default {
});
},
handlePlay(it, idx) {
this.players.forEach((p) => {
if (p) {
try {
p.stop();
} catch (e) {}
}
});
this.currentIndex = idx;
this.showVideo = false;
this.url0 = "";
this.url1 = "";
this.url2 = "";
this.url3 = "";
this.showVideoView0 = true;
this.showVideoView1 = true;
this.showVideoView2 = true;
this.showVideoView3 = true;
this.videoDvrNumber = it.videoDvrNumber;
setTimeout(() => {
this.initVideo(
it.videoDvrNumber,
this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
);
},400)
},
//查询视频通道
initVideo(videoDvrNumber, url) {
let that = this;
this.showVideo = true;
this.players = [];
getVideoPassage(videoDvrNumber).then((response) => {
let data = response.data;
this.videoPassageList = data;
that.showVideo = true;
data.forEach((it, idx) => {
if (idx == 0) {
that.url0 = url.replace("{{passage}}", it.passageValue);
}
if (idx == 1) {
that.url1 = url.replace("{{passage}}", it.passageValue);
}
if (idx == 2) {
that.url2 = url.replace("{{passage}}", it.passageValue);
}
if (idx == 3) {
that.url3 = url.replace("{{passage}}", it.passageValue);
}
let player = new WasmPlayer(null, "vd0" + (idx + 1), null, {
Height: true,
});
that.players.push(player);
});
setTimeout(() => {
that.videoPassageList.forEach((it, idx) => {
let themUrl = url.replace("{{passage}}", it.passageValue);
that.players[idx].play(themUrl, 1);
});
},400);
});
},
handleOnError0(error) {
this.showVideoView0 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[0].id);
//this.showVideoView0 = false;
//console.log("error: ", error);
//this.updatePassageState(this.videoPassageList[0].id);
},
handleOnError1(error) {
this.showVideoView1 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[1].id);
//this.showVideoView1 = false;
//console.log("error: ", error);
//this.updatePassageState(this.videoPassageList[1].id);
},
handleOnError2(error) {
this.showVideoView2 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[2].id);
//this.showVideoView2 = false;
//console.log("error: ", error);
//this.updatePassageState(this.videoPassageList[2].id);
},
handleOnError3(error) {
this.showVideoView3 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[3].id);
//this.showVideoView3 = false;
//console.log("error: ", error);
//this.updatePassageState(this.videoPassageList[3].id);
},
updatePassageState(id) {
let param = {
@ -178,7 +175,6 @@ export default {
overflow: hidden;
.side-nav {
margin-left: 20px;
height: 820px;
overflow-y: scroll;
.nav-item {
@ -211,6 +207,7 @@ export default {
display: block;
float: left;
margin-top: 6px;
margin-right:5px;
background-color: var(--bgColor);
}
}