liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

指令下发记录

Browse Source
This commit is contained in:
fengerli
2025-08-27 15:45:59 +08:00
parent 00eea217a0
commit e07a4fea01
7 changed files with 542 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -5,7 +5,7 @@ VITE_APP_TITLE = 云平台管理系统
VITE_APP_ENV = 'development'
# 开发环境
VITE_APP_BASE_API = 'http://47.120.79.150/backend'
VITE_APP_BASE_API = 'http://192.168.2.34:8000'
# 应用访问路径 例如使用前缀 /admin/
VITE_APP_CONTEXT_PATH = '/'

2
src/api/controlCenter/controlPanel/types.ts
View File

@ -6,7 +6,7 @@ export interface deviceQuery {
deviceStatus: string;
deviceMac: string;
deviceImei: string;
currentOwnerId: string;
personnelBy: string;
communicationMode: string;
pageSize: Number;
deviceType: string

23
src/api/controlCenter/delivey/index.ts Normal file
View File

@ -0,0 +1,23 @@
import request from '@/utils/request';
// 设备分组
export const devicegroupList = (params) => {
return request({
url: '/api/device/group/list',
method: 'get',
params: params
});
};
// 指令下发记录
export const deviceInstructionRecord = (params) => {
return request({
url: '/api/device/instructionRecord',
method: 'get',
params: params
});
};
export default {
devicegroupList,
deviceInstructionRecord,
};

21
src/api/controlCenter/delivey/types.ts Normal file
View File

@ -0,0 +1,21 @@
export interface deviceQuery {
groupId: string;
pageNum: number;
deviceName: string;
deviceMac: string;
deviceImei: string;
pageSize: Number;
deviceType: string;
startTime: string; // 接口要求的开始时间字段
endTime: string // 接口要求的结束时间字段
}
export interface deviceVO {
id: number; // 设备ID
deviceName: string; // 设备名称（对应子组件的device.name）
typeName: string; // 设备类型/型号（对应子组件的device.model）
onlineStatus: 0 | 1; // 设备状态（0=失效/离线，1=正常/在线，对应子组件的device.status）
lng?: number; // 经度（地图打点用）
lat?: number; // 纬度（地图打点用）
// 其他字段...
}

25
src/views/controlCenter/6170/index.vue
View File

@ -67,7 +67,8 @@
<div class="location-item">
<div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
<el-button link type="primary" class="view-btn">查看</el-button>
<el-button link type="primary" class="view-btn"
@click="lookMap(deviceDetail)">查看</el-button>
</div>
</div>
</div>
@ -128,6 +129,7 @@ import api from '@/api/controlCenter/controlPanel/index'
import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
import { generateShortId, getDeviceStatus } from '@/utils/function';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
// 导入图片资源（确保路径正确）
import strongLightDefault from '@/assets/images/strong-light.png';
import strongLightActive from '@/assets/images/strong-light_HL.png';
@ -141,10 +143,10 @@ import laserLightDefault from '@/assets/images/laser-light.png';
import laserLightActive from '@/assets/images/laser-light_HL.png';
import closeDefault from '@/assets/images/close.png';
import closeActive from '@/assets/images/close_HL.png';
const fullscreenLoading = ref(false)
const fullscreenLoading = ref(false)
const forceAlarmLoading = ref(false) //强制报警
const sendTextLoading =ref(false)
const lightModesLoading =ref(false)
const sendTextLoading = ref(false)
const lightModesLoading = ref(false)
// 灯光模式数据（引用导入的图片）
const lightModes = ref<LightMode[]>([
@ -431,7 +433,7 @@ const forceAlarm = async () => {
}
} catch (error: any) {
proxy?.$modal.msgWarning(error.msg)
proxy?.$modal.msgWarning(error.msg)
} finally {
forceAlarmLoading.value = false;
@ -445,7 +447,7 @@ const sendTextMessage = async () => {
return;
}
try {
sendTextLoading.value = true;
sendTextLoading.value = true;
// 2. 准备请求数据
const batchId = generateShortId();
const data = {
@ -483,7 +485,16 @@ const sendTextMessage = async () => {
sendTextLoading.value = false;
}
}
const lookMap = (row: any) => {
console.log(row, 'row');
router.push({
path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
query: {
view: 'map',
deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
}
});
}
onMounted(() => {
getList();

239
src/views/controlCenter/controlPanel/index.vue
View File

@ -21,9 +21,11 @@
<el-button :type="!isListView ? 'primary' : ''" @click="switchView('map')">
{{ !isListView ? '地图显示' : '地图显示' }}
</el-button>
<el-button type="primary" plain>发送消息</el-button>
<el-button type="primary" plain @click="sendTextMessage">发送消息</el-button>
<el-button type="primary" plain>电子围栏</el-button>
<el-button type="danger" plain>强制报警</el-button>
<el-button type="danger" plain @click="forceAlarm" :loading="forceAlarmLoading"
:loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
<div style="position: absolute; right:30px; top:20px">
<el-input v-model="queryParams.deviceMac" placeholder="MAC/IMEI" clearable
style="width: 200px; margin-right: 20px;" />
@ -37,7 +39,7 @@
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
:value="item.deviceTypeId" />
</el-select>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
@ -56,8 +58,8 @@
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="使用人员" prop="currentOwnerId">
<el-input v-model="queryParams.currentOwnerId" placeholder="请输入使用人员姓名" clearable
<el-form-item label="使用人员" prop="personnelBy">
<el-input v-model="queryParams.personnelBy" placeholder="请输入使用人员姓名" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="通信方式" prop="communicationMode">
@ -94,6 +96,13 @@
</template>
</el-table-column>
<el-table-column label="设备类型" align="center" prop="typeName" />
<el-table-column label="设备MAC" align="center" prop="deviceMac">
<template #default="scope">
<div>{{ scope.row.deviceMac || '/' }}</div>
</template>
</el-table-column>
<el-table-column label="设备IMEI" align="center" prop="deviceImei" />
<el-table-column label="使用人员" align="center" prop="personnelBy" />
<el-table-column label="电量" align="center" prop="battery" />
<el-table-column label="设备状态" align="center" prop="onlineStatus">
@ -111,13 +120,29 @@
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
:total="total" @pagination="getList" />
</div>
<div v-else key="map" v-if="deviceList.length > 0">
<div v-else key="map">
<Amap :deviceList="deviceList"></Amap>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
<el-form ref="postFormRef" :model="form" label-width="80px">
<el-form-item label="发送信息" prop="messageToSend">
<el-input type="textarea" v-model="form.messageToSend" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm" :loading="sendTextLoading"
:loading-text="sendTextLoading ? '发送中...' : '确 定'"> {{
sendTextLoading ? '发送中' : '确 定' }}</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="User" lang="ts">
@ -125,10 +150,10 @@ import api from '@/api/controlCenter/controlPanel/index'
import apiTypeAll from '@/api/equipmentManagement/device/index';
import { deviceQuery, deviceVO } from '@/api/controlCenter/controlPanel/types';
import Amap from "./components/map.vue";
import { UserVO } from '@/api/system/user/types';
import { generateShortId, getDeviceStatus } from '@/utils/function';
const router = useRouter();
const route = useRoute(); // 新增：用于获取URL中的query参数
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
const deviceList = ref<deviceVO[]>();
const loading = ref(true);
const showSearch = ref(true);
@ -140,11 +165,15 @@ const deptName = ref();
const deptOptions = ref([])
const deptTreeRef = ref<ElTreeInstance>();
const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();
const isListView = ref(true);
const activeNames = ref([]);
const deviceTypeOptions = ref([]); //设备类型
const enabledDeptOptions = ref();
const forceAlarmLoading = ref(false) //强制报警
const sendTextLoading = ref(false)
const form = ref({
messageToSend: ''
})
const initData: PageData<'', deviceQuery> = {
queryParams: {
pageNum: 1,
@ -154,7 +183,7 @@ const initData: PageData<'', deviceQuery> = {
deviceStatus: '',
deviceMac: '',
deviceImei: '',
currentOwnerId: '',
personnelBy: '',
communicationMode: '',
groupId: '',
deviceType: ''
@ -165,9 +194,19 @@ const initData: PageData<'', deviceQuery> = {
const data = reactive<PageData<'', deviceQuery>>(initData);
const { queryParams } = toRefs<PageData<'', deviceQuery>>(data);
const switchView = (view) => {
const switchView = (view: 'list' | 'map') => {
isListView.value = (view === 'list');
router.push({
path: route.path,
query: {
...(view == '' ? { view: '' } : { view: undefined })
}
});
};
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
/** 通过条件过滤节点 */
const filterNode = (value: string, data: any) => {
if (!value) return true;
@ -199,22 +238,7 @@ const toggleFilter = () => {
activeNames.value = ['1'];
}
};
/** 查询用户列表 */
const getList = async () => {
loading.value = false;
const res = await api.deviceControlCenterList(queryParams.value);
loading.value = false;
deviceList.value = res.rows;
total.value = res.total;
};
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
const res = await api.devicegroupList('');
deptOptions.value = res.data;
enabledDeptOptions.value = filterDisabledDept(res.data);
};
/** 过滤禁用的部门 */
const filterDisabledDept = (deptList: any[]) => {
@ -257,21 +281,167 @@ const handleControl = (row: any) => {
};
/** 选择条数 */
const handleSelectionChange = (selection: UserVO[]) => {
ids.value = selection.map((item: any) => item.id);
const handleSelectionChange = (selection: deviceVO[]) => {
ids.value = selection;
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 重置操作表单 */
const reset = () => {
userFormRef.value?.resetFields();
// 3. 初始化视图状态（关键：根据地址栏view参数赋值）
const initViewStatus = () => {
// 打印参数，确认是否获取到view=map（调试用）
console.log('地址栏view参数：', route.query.view);
// 逻辑：地址栏有view=map → 地图视图（isListView=false）；否则列表视图
const currentView = route.query.view as string;
isListView.value = currentView !== 'map'; // 关键判断！
};
onMounted(() => {
getDeptTree(); // 初始化部门数据
getList(); // 初始化列表数据
getDeviceType() //设备类型
initViewStatus()
});
/** 查询用户列表 */
const getList = async () => {
loading.value = false;
const res = await api.deviceControlCenterList(queryParams.value);
loading.value = false;
deviceList.value = res.rows;
total.value = res.total;
};
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
const res = await api.devicegroupList('');
const allDeviceOption = {
id: '',
groupName: '全部设备',
disabled: false,
children: []
};
deptOptions.value = [allDeviceOption, ...res.data]
enabledDeptOptions.value = filterDisabledDept(res.data);
};
const sendTextMessage = () => {
// 防重复提交
if (!queryParams.value.deviceType) {
proxy?.$modal.msgWarning('请先选择设备类型');
return;
}
if (ids.value.length == 0) {
proxy?.$modal.msgWarning('请先选中一条设备');
return;
}
dialog.visible = true
}
// 发送文本消息确认
const submitForm = async () => {
if (!form.value.messageToSend) {
proxy?.$modal.msgWarning('发送消息不能为空');
return
}
try {
sendTextLoading.value = true;
// 2. 准备请求数据
const deviceIds = ids.value.map(item => item.id);
const deviceImeiList = ids.value.map(item => item.deviceImei);
const firstDevice = ids.value[0];
const typeName = firstDevice.typeName; // 取第一个设备的typeName，为空时给默认值
const batchId = generateShortId();
const data = {
deviceIds: deviceIds,
typeName: typeName,
batchId: batchId,
deviceImeiList: deviceImeiList,
sendMsg: form.value.messageToSend
};
// 3.人员信息
const registerRes = await api.deviceSendMessage(data);
if (registerRes.code !== 200) {
proxy?.$modal.msgWarning(registerRes.msg)
return
}
// 4. 获取设备状态
const statusRes = await getDeviceStatus({
functionMode: 2,
batchId,
typeName,
deviceImeiList,
deviceIds,
interval: 500
},
api.deviceRealTimeStatus
);
// 只有当状态为'OK'时才显示成功弹窗
if (statusRes.data.functionAccess === 'OK') {
proxy?.$modal.msgSuccess(statusRes.msg);
cancel()
}
} catch (error: any) {
proxy?.$modal.msgWarning(error.msg)
} finally {
sendTextLoading.value = false;
}
};
// 取消
const cancel = () => {
dialog.visible = true;
form.value.messageToSend = ''
}
// 强制报警
const forceAlarm = async () => {
if (!queryParams.value.deviceType) {
proxy?.$modal.msgWarning('请先选择设备类型');
return;
}
if (ids.value.length == 0) {
proxy?.$modal.msgWarning('请先选中一条设备');
return;
}
try {
forceAlarmLoading.value = true
// 2. 准备请求数据
const batchId = generateShortId();
const deviceIds = ids.value.map(item => item.id);
const deviceImeiList = ids.value.map(item => item.deviceImei);
const firstDevice = ids.value[0];
const typeName = firstDevice.typeName; // 取第一个设备的typeName，为空时给默认值
let data = {
deviceIds: deviceIds,
typeName: typeName,
batchId: batchId,
deviceImeiList: deviceImeiList,
instructValue: '1', //强制报警1，解除报警0
}
const registerRes = await api.sendAlarmMessage(data);
if (registerRes.code !== 200) {
proxy?.$modal.msgWarning(registerRes.msg)
return
}
// 4. 获取设备状态
const statusRes = await getDeviceStatus({
functionMode: 2,
batchId,
typeName,
deviceImeiList,
deviceIds,
interval: 500
},
api.deviceRealTimeStatus
);
// 只有当状态为'OK'时才显示成功弹窗
if (statusRes.data.functionAccess === 'OK') {
proxy?.$modal.msgSuccess(statusRes.msg);
}
} catch (error: any) {
proxy?.$modal.msgWarning(error.msg)
} finally {
forceAlarmLoading.value = false;
}
}
</script>
<style lang="scss" scoped>
@ -279,6 +449,11 @@ onMounted(() => {
display: none;
}
:deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: rgba(2, 124, 251, 1);
background: transparent;
}
.main-tree {
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);

271
src/views/controlCenter/delivery/index.vue Normal file
View File

@ -0,0 +1,271 @@
<template>
<div class="p-2">
<el-row :gutter="20">
<!-- 部门树 -->
<el-col :lg="4" :xs="24" style="" class="main-tree">
<el-input v-model="deptName" placeholder="输入分组名称" prefix-icon="Search" clearable />
<el-tree ref="deptTreeRef" class="mt-2" node-key="id" :data="deptOptions"
:props="{ label: 'groupName', children: 'children' }" :expand-on-click-node="false"
:filter-node-method="filterNode" highlight-current default-expand-all @node-click="handleNodeClick"></el-tree>
</el-col>
<el-col :lg="20" :xs="24">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card>
<!-- =========搜索按钮操作======= -->
<div class="btn_search">
<el-button type="primary" plain>导出</el-button>
<div style="position: absolute; right:30px; top:20px">
<el-input v-model="queryParams.deviceMac" placeholder="MAC/IMEI" clearable
style="width: 200px; margin-right: 20px;" />
<el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
</div>
</div>
<el-collapse accordion v-model="activeNames">
<el-collapse-item name="1">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.deviceTypeId" />
</el-select>
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
</el-form-item>
<el-form-item label="设备MAC" prop="deviceMac">
<el-input v-model="queryParams.deviceMac" placeholder="请输入设备MAC" clearable />
</el-form-item>
<el-form-item label="设备IMEI" prop="deviceImei">
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="操作时间" style="width: 308px">
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</el-card>
</div>
</transition>
<el-card class="Maplist">
<div>
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备型号" align="center" prop="deviceType" />
<el-table-column label="操作模块" align="center" prop="deviceAction" />
<el-table-column label="操作内容" align="center" prop="content" />
<el-table-column label="操作时间" align="center" prop="createTime" />
</el-table>
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
:total="total" @pagination="getList" />
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup name="User" lang="ts">
import api from '@/api/controlCenter/delivey/index'
import apiTypeAll from '@/api/equipmentManagement/device/index';
import { deviceQuery, deviceVO } from '@/api/controlCenter/delivey/types';
const dateRange = ref(['', '']);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const deviceList = ref<deviceVO[]>();
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<number | string>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const deptName = ref();
const deptOptions = ref([])
const deptTreeRef = ref<ElTreeInstance>();
const queryFormRef = ref<ElFormInstance>();
const activeNames = ref([]);
const deviceTypeOptions = ref([]); //设备类型
const enabledDeptOptions = ref();
const initData: PageData<'', deviceQuery> = {
queryParams: {
pageNum: 1,
pageSize: 10,
deviceName: '',
deviceMac: '',
deviceImei: '',
groupId: '',
deviceType: '',
startTime: '',
endTime: ''
},
rules: undefined,
form: ''
};
const data = reactive<PageData<'', deviceQuery>>(initData);
const { queryParams } = toRefs<PageData<'', deviceQuery>>(data);
/** 通过条件过滤节点 */
const filterNode = (value: string, data: any) => {
if (!value) return true;
return data.groupName.indexOf(value) !== -1;
};
// 设备类型
const getDeviceType = () => {
apiTypeAll.deviceTypeAll().then(res => {
if (res.code == 200) {
deviceTypeOptions.value = res.data
}
}).catch(err => {
})
};
/** 根据名称筛选部门树 */
watchEffect(
() => {
deptTreeRef.value?.filter(deptName.value);
},
{
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
}
);
const toggleFilter = () => {
if (activeNames.value.length > 0) {
activeNames.value = [];
} else {
activeNames.value = ['1'];
}
};
/** 过滤禁用的部门 */
const filterDisabledDept = (deptList: any[]) => {
return deptList.filter((dept) => {
if (dept.disabled) {
return false;
}
if (dept.children && dept.children.length) {
dept.children = filterDisabledDept(dept.children);
}
return true;
});
};
/** 节点单击事件 */
const handleNodeClick = (data: any) => {
queryParams.value.groupId = data.id;
handleQuery();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
dateRange.value = ['', ''];
queryFormRef.value?.resetFields();
queryParams.value.pageNum = 1;
queryParams.value.groupId = undefined;
deptTreeRef.value?.setCurrentKey(undefined);
handleQuery();
};
/** 选择条数 */
const handleSelectionChange = (selection: deviceVO[]) => {
ids.value = selection;
single.value = selection.length != 1;
multiple.value = !selection.length;
};
onMounted(() => {
getDeptTree(); // 初始化部门数据
getList(); // 初始化列表数据
getDeviceType() //设备类型
});
/** 查询用户列表 */
const getList = async () => {
loading.value = false;
const [startTime, endTime] = dateRange.value;
queryParams.value = {
...queryParams.value,
startTime: startTime,
endTime: endTime
};
const res = await api.deviceInstructionRecord(queryParams.value)
loading.value = false;
deviceList.value = res.rows;
total.value = res.total;
};
/** 查询部结构 */
const getDeptTree = async () => {
const res = await api.devicegroupList('');
const allDeviceOption = {
id: '',
groupName: '全部设备',
disabled: false,
children: []
};
deptOptions.value = [allDeviceOption, ...res.data]
enabledDeptOptions.value = filterDisabledDept(res.data);
};
</script>
<style lang="scss" scoped>
:deep .el-collapse-item__header {
display: none;
}
:deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: rgba(2, 124, 251, 1);
background: transparent;
}
.main-tree {
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
background: rgba(255, 255, 255, 1);
width: 212px;
border: none;
padding-top: 10px;
}
.el-card {
border: none
}
.btn_search {
padding: 0px 15px 15px 0px;
// border-bottom: 1px solid rgba(235, 238, 248, 1);
}
.queryFormRef {
margin-top: 20px;
}
.green {
color: rgba(0, 165, 82, 1);
}
.red {
color: rgba(224, 52, 52, 1);
}
.Maplist {
height: 680px;
overflow: auto;
}
</style>