右侧表格1

This commit is contained in:
caozehui
2025-01-06 19:20:36 +08:00
parent 336ee843cc
commit 27eb9a7d93
5 changed files with 118 additions and 285 deletions

View File

@@ -37,40 +37,45 @@ export namespace CheckData {
isData?: number, isData?: number,
//最大误差值 //最大误差值
radius?: string, radius?: string,
//单位
unit?: string,
} }
/** /**
* 用于定义 查看(设备)通道检测结果表格展示数据 类型 * 用于定义 查看(设备)通道检测结果表格展示数据 类型
*/ */
export interface CheckResult { export interface CheckResult {
aStd?: number, aStd?: string,
aData?: number, aData?: string,
aError?: string, aError?: string,
bStd?: number, bStd?: string,
bData?: number, bData?: string,
bError?: string, bError?: string,
cStd?: number, cStd?: string,
cData?: number, cData?: string,
cError?: string, cError?: string,
tStd?: number, tStd?: string,
tData?: number, tData?: string,
tError?: string, tError?: string,
//最大误差值 //最大误差值
maxError?: string, maxError?: string,
unit?: string,
//符合、不符合 //符合、不符合
result?: number result?: number,
} }
/** /**
* 用于定义 具体通道的原始数据类型 * 用于定义 具体通道的原始数据类型
*/ */
export interface RawDataItem { export interface RawDataItem {
updateTime: string, time?: string,
A?: number, harmNum?: number|null,
B?: number, dataA?: number,
C?: number dataB?: number,
T?: number dataC?: number
dataT?: number
unit?: string|null
} }
export interface Device { export interface Device {

View File

@@ -27,7 +27,7 @@ export const getTreeData = (params: {
devId: string, devId: string,
devNum: string, devNum: string,
scriptType: string | null, scriptType: string | null,
code: string code: number,
}) => { }) => {
return http.post<CheckData.TreeItem[]>("/result/treeData/", params, {loading: true}); return http.post<CheckData.TreeItem[]>("/result/treeData/", params, {loading: true});
} }
@@ -37,10 +37,12 @@ export const getTreeData = (params: {
* @param params * @param params
*/ */
export const getTableData = (params: { export const getTableData = (params: {
scriptType: string | null,
scriptId: string, scriptId: string,
deviceId: string, devId: string,
chnNum: string, devNum: string,
scriptType: string | null code: number,
index: number,
}) => { }) => {
return http.post("/result/resultData/", params, {loading: false}); return http.post("/result/resultData/", params, {loading: false});
} }

View File

@@ -1,18 +1,18 @@
<template> <template>
<div class="table-main"> <div class="table-main">
<el-table :data="tableData" stripe border :header-cell-style="{ textAlign: 'center' } " <el-table v-if="tableData.length > 0" :data="tableData" stripe border :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }" height="335px" :cell-style="{ textAlign: 'center' }" height="335px"
style="width: 100%;"> style="width: 100%;">
<el-table-column type="index" label="序号" width="70" fixed="left"/> <el-table-column type="index" label="序号" width="70" fixed="left"/>
<el-table-column prop="updateTime" label="数据时间"/> <el-table-column prop="time" label="数据时间"/>
<template v-if="phaseFlag === 0"> <template v-if="phaseFlag === 0">
<el-table-column prop="A" :label="`A${unit}`"/> <el-table-column prop="dataA" :label="`A${unit}`"/>
<el-table-column prop="B" :label="`B${unit}`"/> <el-table-column prop="dataB" :label="`B${unit}`"/>
<el-table-column prop="C" :label="`C${unit}`"/> <el-table-column prop="dataC" :label="`C${unit}`"/>
</template> </template>
<template v-if="phaseFlag === 1"> <template v-if="phaseFlag === 1">
<el-table-column prop="T" :label="`T${unit}`"/> <el-table-column prop="dataT" :label="`T${unit}`"/>
</template> </template>
</el-table> </el-table>
</div> </div>
@@ -27,15 +27,14 @@ const {tableData} = defineProps<{
tableData: CheckData.RawDataItem[] tableData: CheckData.RawDataItem[]
}>() }>()
const unit = computed(() => { const unit = computed(() => {
return "V" return tableData.length > 0 ? tableData[0].unit : '';
}) })
const phaseFlag = computed(() => { const phaseFlag = computed(() => {
let result = 0; let result = 0;
if (tableData.length > 0) { if (tableData.length > 0) {
result = !tableData[0].T ? 0 : 1; result = !tableData[0].dataT ? 0 : 1;
} }
return result; return result;
}) })

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="table-main"> <div class="table-main">
<el-table :data="tableData" height="335px" :header-cell-style="{ textAlign: 'center' } " <el-table v-if="tableData.length > 0" :data="tableData" height="335px" :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }"> :cell-style="{ textAlign: 'center' }">
<!-- <el-table-column prop="chnNum" label="通道号" width="80">--> <!-- <el-table-column prop="chnNum" label="通道号" width="80">-->
<!-- <template #default="{row}">--> <!-- <template #default="{row}">-->
@@ -10,22 +10,22 @@
<!-- </el-table-column>--> <!-- </el-table-column>-->
<template v-if="phaseFlag === 0"> <template v-if="phaseFlag === 0">
<el-table-column :label="`A${unit}`"> <el-table-column :label="`A${unit}`">
<el-table-column prop="aStd" width="79" label="标准值"/> <el-table-column prop="aStd" width="74" label="标准值"/>
<el-table-column prop="aData" width="79" label="被检值"/> <el-table-column prop="aData" width="74" label="被检值"/>
<el-table-column prop="aError" width="79" label="误差值"/> <el-table-column prop="aError" width="74" label="误差值"/>
</el-table-column> </el-table-column>
<el-table-column :label="`B${unit}`"> <el-table-column :label="`B${unit}`">
<el-table-column prop="bStd" width="79" label="标准值"/> <el-table-column prop="bStd" width="74" label="标准值"/>
<el-table-column prop="bData" width="79" label="被检值"/> <el-table-column prop="bData" width="74" label="被检值"/>
<el-table-column prop="bError" width="79" label="误差值"/> <el-table-column prop="bError" width="74" label="误差值"/>
</el-table-column> </el-table-column>
<el-table-column :label="`C${unit}`"> <el-table-column :label="`C${unit}`">
<el-table-column prop="cStd" width="79" label="标准值"/> <el-table-column prop="cStd" width="74" label="标准值"/>
<el-table-column prop="cData" width="79" label="被检值"/> <el-table-column prop="cData" width="74" label="被检值"/>
<el-table-column prop="cError" width="79" label="误差值"/> <el-table-column prop="cError" width="74" label="误差值"/>
</el-table-column> </el-table-column>
<el-table-column prop="maxError" :label="`最大误差${unit}`"/> <el-table-column prop="maxError" :label="`最大误差`"/>
<el-table-column prop="result" label="检测结果" width="70"> <el-table-column prop="result" label="检测结果" width="95">
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.result === 2">不符合</el-tag> <el-tag type="danger" v-if="scope.row.result === 2">不符合</el-tag>
<span v-if="scope.row.result === 1">符合</span> <span v-if="scope.row.result === 1">符合</span>
@@ -36,11 +36,11 @@
<template v-if="phaseFlag === 1"> <template v-if="phaseFlag === 1">
<el-table-column :label="`T${unit}`"> <el-table-column :label="`T${unit}`">
<el-table-column prop="tStd" label="标准值V"/> <el-table-column prop="tStd" label="标准值"/>
<el-table-column prop="tData" label="被检值"/> <el-table-column prop="tData" label="被检值"/>
<el-table-column prop="tError" label="误差值"/> <el-table-column prop="tError" label="误差值"/>
</el-table-column> </el-table-column>
<el-table-column prop="maxError" label="最大误差V"/> <el-table-column prop="maxError" label="最大误差"/>
<el-table-column prop="result" label="检测结果"> <el-table-column prop="result" label="检测结果">
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.result === 2">不符合</el-tag> <el-tag type="danger" v-if="scope.row.result === 2">不符合</el-tag>
@@ -65,7 +65,7 @@ const {tableData} = defineProps<{
const unit = computed(() => { const unit = computed(() => {
return "V" return tableData.length > 0 ? tableData[0].unit : '';
}) })
const phaseFlag = computed(() => { const phaseFlag = computed(() => {

View File

@@ -18,8 +18,7 @@
</el-form-item> </el-form-item>
<el-form-item label='通道号'> <el-form-item label='通道号'>
<el-select v-model="formContent.chnNum"> <el-select v-model="formContent.chnNum">
<el-option v-for="item in chnList" :key="item.value" :label="item.label" <el-option v-for="item in chnList" :key="item.value" :label="item.label" :value="item.value"/>
:value="item.value"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -98,7 +97,7 @@ import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
import {CheckData} from "@/api/check/interface"; import {CheckData} from "@/api/check/interface";
import {useDictStore} from "@/stores/modules/dict"; import {useDictStore} from "@/stores/modules/dict";
import {useCheckStore} from "@/stores/modules/check"; import {useCheckStore} from "@/stores/modules/check";
import {getFormData, getTreeData} from "@/api/check/test"; import {getFormData, getTreeData, getTableData} from "@/api/check/test";
const {appendToBody} = withDefaults(defineProps<{ const {appendToBody} = withDefaults(defineProps<{
appendToBody: boolean appendToBody: boolean
@@ -115,7 +114,7 @@ const checkStore = useCheckStore()
const visible = ref(false) const visible = ref(false)
// 格式化数字 // 格式化数字
const fixed = 6; const fixed = 4;
// 表单数据 // 表单数据
const formContent = reactive<CheckData.DataCheck>({ const formContent = reactive<CheckData.DataCheck>({
@@ -141,7 +140,7 @@ let scriptType: string | null = null
let chnList: any[] = [] let chnList: any[] = []
// 不符合测试项、全部测试项切换 // 不符合测试项、全部测试项切换
let switchItem = 0 let switchItem = ref(0)
// 左侧树数据 // 左侧树数据
let treeDataUnqualified: CheckData.TreeItem[] = [] let treeDataUnqualified: CheckData.TreeItem[] = []
@@ -195,8 +194,8 @@ watch(() => formContent.chnNum, async (newVal, oldVal) => {
scriptId: checkStore.scriptId, scriptId: checkStore.scriptId,
devId: deviceId, devId: deviceId,
devNum: formContent.chnNum + '', devNum: formContent.chnNum + '',
scriptType: null, scriptType: scriptType,
code: checkStore.planCode code: parseInt(checkStore.planCode)
}) })
treeDataAll = resTreeDataTemp treeDataAll = resTreeDataTemp
@@ -204,7 +203,7 @@ watch(() => formContent.chnNum, async (newVal, oldVal) => {
filterTree(treeDataTemp, 2) filterTree(treeDataTemp, 2)
treeDataUnqualified = treeDataTemp treeDataUnqualified = treeDataTemp
switchItem = 0 switchItem.value = 0
await handleSwitchChange(0) await handleSwitchChange(0)
} }
}) })
@@ -215,14 +214,17 @@ watch(currentHarmNum, (newVal, oldVal) => {
if (newVal !== '-1') { if (newVal !== '-1') {
let resCheckResult: CheckData.ResCheckResult = resTableData.resultData.get(newVal.toString()) let resCheckResult: CheckData.ResCheckResult = resTableData.resultData.get(newVal.toString())
setCheckResultData(resCheckResult) setCheckResultData(resCheckResult)
setRawData(resTableData.resultData.get(newVal.toString()))
} }
}) })
watch(currentCheckItem, (newVal, oldVal) => { watch(currentCheckItem, (newVal, oldVal) => {
console.log("当前检测项", newVal); console.log("当前检测项", newVal);
if (newVal) { if (newVal) {
let resCheckResult: CheckData.ResCheckResult = resTableData.resultData.get(newVal.toString() === 'Voltage' ? '电压幅值' : '持续时间') let key = newVal.toString() === 'Voltage' ? '电压幅值' : '持续时间'
let resCheckResult: CheckData.ResCheckResult = resTableData.resultData.get(key)
setCheckResultData(resCheckResult) setCheckResultData(resCheckResult)
setRawData(resTableData.resultData.get(key))
} }
}) })
@@ -236,7 +238,7 @@ const handleSwitchChange = async (data: any) => {
// 默认操作 // 默认操作
const defaultOperate = () => { const defaultOperate = () => {
let node = null let node = null
if (switchItem === 0) { if (switchItem.value === 0) {
node = getDefaultNode(treeDataUnqualified) node = getDefaultNode(treeDataUnqualified)
} else { } else {
node = getDefaultNode(treeDataAll) node = getDefaultNode(treeDataAll)
@@ -259,94 +261,26 @@ const updateTableData = async () => {
if (checkIndex.value) { if (checkIndex.value) {
console.log("更新表格数据"); console.log("更新表格数据");
// 发起请求,查询该测试项的检测结果 // 发起请求,查询该测试项的检测结果
// const {data} = await getTableData({checkStore.scriptId,deviceId, formContent.chnNum, scriptType,checkIndex}) const {data} = await getTableData({
// resTableData =data scriptType,
scriptId: checkStore.scriptId,
devId: deviceId,
devNum: formContent.chnNum + '',
code: parseInt(checkStore.planCode),
index: parseInt(checkIndex.value),
})
let keys1 = Object.keys(data.resultData)
let resultData = new Map() let resultData = new Map()
// resultData.set("频率", { for (let key of keys1) {
// dataT: { resultData.set(key, data.resultData[key])
// data: 57.740001, }
// resultData: 57.730001,
// },
// dataB: {
// data: 57.740001,
// resultData: 57.730001,
// },
// dataC: {
// data: 57.740001,
// resultData: 57.730001,
// },
// radius: 0.05774,
// isData: 1,
// })
resultData.set('3', {
dataA: {
data: 57.740001,
resultData: 57.730001,
},
dataB: {
data: 57.740001,
resultData: 57.730001,
},
dataC: {
data: 57.740001,
resultData: 57.730001,
},
radius: 0.05774,
isData: 1,
})
resultData.set('5', {
dataA: {
data: 57.740002,
resultData: 57.730001,
},
dataB: {
data: 57.740002,
resultData: 57.730001,
},
dataC: {
data: 57.740002,
resultData: 57.730001,
},
radius: 0.05774,
isData: 1,
})
resultData.set('7', {
dataA: {
data: 57.740003,
resultData: 57.730001,
},
dataB: {
data: 57.740003,
resultData: 57.730001,
},
dataC: {
data: 57.740003,
resultData: 57.730001,
},
radius: 0.05774,
isData: 4,
})
// resultData.set("电压幅值", {
// dataT: {
// data: 57.740001,
// resultData: 57.730001,
// },
// radius: 0.05774,
// isData: 1,
// })
// resultData.set("持续时间", {
// dataT: {
// data: 57.740002,
// resultData: 57.730002,
// },
// radius: 0.05774,
// isData: 2,
// })
let keys2 = Object.keys(data.rawData)
let rawData = new Map() let rawData = new Map()
for (let key of keys2) {
rawData.set(key, data.rawData[key])
}
resTableData = { resTableData = {
resultData, resultData,
@@ -354,23 +288,26 @@ const updateTableData = async () => {
} }
let resCheckResult: CheckData.ResCheckResult = {} let resCheckResult: CheckData.ResCheckResult = {}
let resRawData: CheckData.RawDataItem = {}
if (resTableData.resultData.size === 1) { if (keys1.length === 1) {
resCheckResult = resTableData.resultData.values().next().value resCheckResult = resTableData.resultData.get(keys1[0])
resRawData = resTableData.rawData.get(keys2[0])
Object.assign(harmNumList, []) Object.assign(harmNumList, [])
currentHarmNum.value = '-1' currentHarmNum.value = '-1'
setCheckResultData(resCheckResult) setCheckResultData(resCheckResult)
setRawData(resRawData)
} else { } else {
if (resTableData.resultData.get('电压幅值') || resTableData.resultData.get('持续时间')) { if (resTableData.resultData.get('电压幅值') || resTableData.resultData.get('持续时间')) {
let tempCheckList = [] let tempCheckList = []
if (resTableData.resultData.get('电压幅值')) { if (resTableData.resultData.get('电压幅值')) {
tempCheckList.push({value: 'Voltage', label: '电压幅值'}) tempCheckList.push({value: 'Voltage', label: '电压幅值'})
resCheckResult = resTableData.resultData.get('电压幅值') //resCheckResult = resTableData.resultData.get('电压幅值')
} }
if (resTableData.resultData.get('持续时间')) { if (resTableData.resultData.get('持续时间')) {
tempCheckList.push({value: 'Duration', label: '持续时间'}) tempCheckList.push({value: 'Duration', label: '持续时间'})
resCheckResult = resTableData.resultData.get('持续时间') //resCheckResult = resTableData.resultData.get('持续时间')
} }
Object.assign(checkList, tempCheckList) Object.assign(checkList, tempCheckList)
@@ -380,140 +317,21 @@ const updateTableData = async () => {
currentHarmNum.value = '-1' currentHarmNum.value = '-1'
//setCheckResultData(resCheckResult) //setCheckResultData(resCheckResult)
} else { } else if (keys1.length != 0) {
let tempHarmNumList: { value: string, label: string }[] = [] let tempHarmNumList: { value: string, label: string }[] = []
for (let [key, value] of resTableData.resultData) { for (let [key, value] of resTableData.resultData) {
tempHarmNumList.push({value: key, label: key}) tempHarmNumList.push({value: key, label: key})
} }
Object.assign(harmNumList, tempHarmNumList) Object.assign(harmNumList, tempHarmNumList)
currentHarmNum.value = harmNumList[0].value currentHarmNum.value = harmNumList.length > 0 ? harmNumList[0].value : '-1'
} }
} }
// setCheckResultData(resCheckResult) // setCheckResultData(resCheckResult)
Object.assign(rawTableData, [ } else {
{ checkResultData.length = 0
updateTime: "2024-10-10 09:30:00", rawTableData.length = 0
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:03",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:06",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:09",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:12",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:15",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:18",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:21",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:24",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:27",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:30",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:33",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:36",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:39",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:42",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:45",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:48",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:51",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:54",
A: 57.73,
B: 57.73,
C: 57.73,
},
{
updateTime: "2024-10-10 09:30:57",
A: 57.73,
B: 57.73,
C: 57.73,
}
])
} }
} }
@@ -558,48 +376,49 @@ const close = () => {
}) })
treeDataUnqualified = [] treeDataUnqualified = []
treeDataAll = [] treeDataAll = []
Object.assign(treeDataUnqualified, []) treeDataUnqualified.length = 0
Object.assign(treeDataAll, []) treeDataAll.length = 0
Object.assign(harmNumList, []) harmNumList.length = 0
currentHarmNum.value = '-1' currentHarmNum.value = '-1'
Object.assign(checkResultData, []) checkResultData.length = 0
Object.assign(rawTableData, []) rawTableData.length = 0
defaultExpandedKeys = [] defaultExpandedKeys = []
checkIndex.value = '' checkIndex.value = ''
activeTab.value = 'resultTab' activeTab.value = 'resultTab'
currentScriptTypeName.value = '' currentScriptTypeName.value = ''
currentDesc.value = '' currentDesc.value = ''
switchItem = 0 switchItem.value = 0
visible.value = false; visible.value = false;
}; };
const setCheckResultData = (data: CheckData.ResCheckResult) => { const setCheckResultData = (data: CheckData.ResCheckResult) => {
// debugger
let result: CheckData.CheckResult[] = [] let result: CheckData.CheckResult[] = []
if (data.dataA && data.dataB && data.dataC) { if (data.dataA && data.dataB && data.dataC) {
result.push({ result.push({
aStd: data.dataA?.resultData, aStd: data.dataA?.resultData.toFixed(fixed),
aData: data.dataA?.data, aData: data.dataA?.data?.toFixed(fixed),
aError: getError(data.dataA?.resultData, data.dataA?.data), aError: getError(data.dataA?.resultData, data.dataA?.data),
bStd: data.dataB?.resultData, bStd: data.dataB?.resultData?.toFixed(fixed),
bData: data.dataB?.data, bData: data.dataB?.data?.toFixed(fixed),
bError: getError(data.dataA?.resultData, data.dataA?.data), bError: getError(data.dataB?.resultData, data.dataB?.data),
cStd: data.dataC?.resultData, cStd: data.dataC?.resultData?.toFixed(fixed),
cData: data.dataC?.data, cData: data.dataC?.data?.toFixed(fixed),
cError: getError(data.dataA?.resultData, data.dataA?.data), cError: getError(data.dataC?.resultData, data.dataC?.data),
maxError: data.radius, maxError: data.radius,
unit: data.unit,
result: data.isData, result: data.isData,
}) })
} }
if (data.dataT) { if (data.dataT) {
result.push({ result.push({
tStd: data.dataT?.resultData, tStd: data.dataT?.resultData?.toFixed(fixed),
tData: data.dataT?.data, tData: data.dataT?.data?.toFixed(fixed),
tError: getError(data.dataT?.resultData, data.dataT?.data), tError: getError(data.dataT?.resultData, data.dataT?.data),
maxError: data.radius, maxError: data.radius,
unit: data.unit,
result: data.isData, result: data.isData,
}) })
} }
@@ -607,9 +426,17 @@ const setCheckResultData = (data: CheckData.ResCheckResult) => {
Object.assign(checkResultData, result) Object.assign(checkResultData, result)
} }
const getError = (num1: number, num2: number): string => { const setRawData = (data: CheckData.RawDataItem[]) => {
return Math.abs(num1 - num2).toFixed(fixed) Object.assign(rawTableData, data)
} }
const getError = (num1: number, num2: number): string => {
if (num1 == null || num1 == undefined || num2 == null || num2 == undefined) {
return ''
}
return Math.abs(Number(num1.toFixed(fixed)) - Number(num2.toFixed(fixed))).toFixed(fixed)
}
const findFirstLeafNode = (node: any): any => { const findFirstLeafNode = (node: any): any => {
if (!node.children || node.children.length === 0) { if (!node.children || node.children.length === 0) {
return node; return node;
@@ -685,7 +512,7 @@ defineExpose({
flex-direction: row; flex-direction: row;
.content-left-tree { .content-left-tree {
width: 22%; width: 20%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -710,7 +537,7 @@ defineExpose({
} }
.content-right { .content-right {
width: 78%; width: 80%;
margin-left: 10px; margin-left: 10px;
flex: 1; flex: 1;