src/components/device/calibration.vue | ●●●●● patch | view | raw | blame | history | |
src/util/request.ts | ●●●●● patch | view | raw | blame | history | |
src/views/list/devicesBasic.vue | ●●●●● patch | view | raw | blame | history |
src/components/device/calibration.vue
@@ -1,19 +1,61 @@ <template> <div> <a-modal width="60%" title="配置校准值" destroyOnClose :visible="wFlag" @cancel="handleCancel" @ok="handleOk"> <a-modal width="60%" title="配置校准值" destroyOnClose :visible="wFlag" @cancel="handleCancel" @ok="handleOk" > <!----> <a-form style="margin-top: 8px;"> <a-form style="margin-top: 8px"> <a-form-item> <a-collapse accordion @change="turnState($event)"> <a-collapse-panel v-for="(item, key) in dataSensors" :key="item.id" :header="'名称:'+item.name"> <span v slot="extra" style="position: absolute;left: 26%; width:10%; text-align: center;">下限值:{{ item.lower }}</span> <span v slot="extra" style="position: absolute;left: 50%; width:10%; text-align: center;">上限值:{{ item.upper }}</span> <span v slot="extra" style="position: absolute;left: 75%; width:10%; text-align: center;">单位:{{ item.unit }}</span> <a-button icon="plus" type="primary" style="margin-left: 25px;" @click="addCalib"> <a-collapse-panel v-for="(item, key) in dataSensors" :key="item.id" :header="'名称:' + item.name" > <span v slot="extra" style=" position: absolute; left: 26%; width: 10%; text-align: center; " >下限值:{{ item.lower }}</span > <span v slot="extra" style=" position: absolute; left: 50%; width: 10%; text-align: center; " >上限值:{{ item.upper }}</span > <span v slot="extra" style=" position: absolute; left: 75%; width: 10%; text-align: center; " >单位:{{ item.unit }}</span > <a-button icon="plus" type="primary" style="margin-left: 25px" @click="addCalib" > 新建校准值 </a-button> <a-table @@ -27,34 +69,74 @@ </a-form-item> <a-form-item style=""> <a-pagination style="margin-right: 0" :default-current="1" :pageSize='size' :total="total" @change="turnPage"/> <a-pagination style="margin-right: 0" :default-current="1" :pageSize="size" :total="total" @change="turnPage" /> </a-form-item> </a-form> </a-modal> <a-modal title="添加-校准值" destroyOnClose :visible="addFlag" @ok="handleAddlOk" @cancel="handleAddCancel"> <a-modal title="添加-校准值" destroyOnClose :visible="addFlag" @ok="handleAddlOk" @cancel="handleAddCancel" > <!----> <a-form-model style="margin-top: 8px" <a-form-model style="margin-top: 8px" :rules="caliRules" :model="addData" ref="addCaliForm"> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="开始时间" prop="startTime"> <a-time-picker :allow-clear="false" format="HH:mm" v-model="addData.startTime" @change="turnStartTime" ref="addCaliForm" > <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="开始时间" prop="startTime" > <a-time-picker :allow-clear="false" format="HH:mm" v-model="addData.startTime" @change="turnStartTime" /> </a-form-model-item> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="结束时间" prop="endTime"> <a-time-picker :allow-clear="false" format="HH:mm" v-model="addData.endTime" @change="turnEndTime"/> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="结束时间" prop="endTime" > <a-time-picker :allow-clear="false" format="HH:mm" v-model="addData.endTime" @change="turnEndTime" /> </a-form-model-item> <a-form-model-item v-if="this.sensorCode === 'a40001'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式"> <a-form-model-item v-if="this.sensorCode === 'a40001'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式" > <a-input-group compact> <a-input style="width: 30%" read-only value="烟气流速"/> <a-select v-model="addData.formula1" style="width: 30%;" style="width: 30%" placeholder="请选择" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> @@ -67,39 +149,60 @@ </a-input> </a-input-group> </a-form-model-item> <a-form-model-item v-else-if="this.sensorCode === 'a01011'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式"> <a-form-model-item v-else-if="this.sensorCode === 'a01011'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式" > <a-input-group compact> <a-input style="width: 30%" read-only value="烟气流速"/> <a-select style="width: 30%" placeholder="请选择" v-model="addData.formula2"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select style="width: 30%" placeholder="请选择" v-model="addData.formula2" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> <a-input style="width: 40%;margin-top: 1px" v-model="addData.val2" > <a-input style="width: 40%; margin-top: 1px" v-model="addData.val2"> <a-icon slot="addonAfter" type="arrow-right" @click="gFormula"/> </a-input> </a-input-group> </a-form-model-item> <a-form-model-item v-else :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式"> <a-form-model-item v-else :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式" > <a-input-group compact> <a-select style="width: 30%" defaultValue='AQI值' defaultValue="AQI值" v-model="addData.type1" > <a-select-option :value="item.key" :key="key" v-for="(item, key) in selectType"> <a-select-option :value="item.key" :key="key" v-for="(item, key) in selectType" > {{ item.value }} </a-select-option> </a-select> <a-select v-model="addData.formula1" style="width: 30%;" style="width: 30%" placeholder="请选择" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> @@ -113,21 +216,30 @@ </a-input-group> <a-input-group compact> <a-input style="width: 30%" read-only value="测量值"/> <a-select style="width: 30%" placeholder="请选择" v-model="addData.formula2"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select style="width: 30%" placeholder="请选择" v-model="addData.formula2" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> <a-input style="width: 40%;margin-top: 1px" v-model="addData.val2" > <a-input style="width: 40%; margin-top: 1px" v-model="addData.val2"> <a-icon slot="addonAfter" type="arrow-right" @click="gFormula"/> </a-input> </a-input-group> </a-form-model-item> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="公式" prop="cel"> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="公式" prop="cel" > <a-input type="string" read-only v-model="addData.cel"> <a-icon slot="addonAfter" type="close" @click="clearCel"/> </a-input> @@ -135,28 +247,61 @@ </a-form-model> </a-modal> <a-modal title="编辑-校准值" destroyOnClose :visible="editFlag" @ok="handleEditlOk" @cancel="handleEditCancel"> <a-modal title="编辑-校准值" destroyOnClose :visible="editFlag" @ok="handleEditlOk" @cancel="handleEditCancel" > <!----> <a-form-model style="margin-top: 8px" <a-form-model style="margin-top: 8px" :rules="caliRules" :model="editData" ref="editCaliForm"> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="开始时间" prop="startTime"> <a-time-picker format="HH:mm" v-model="editData.startTime" @change="turnStartTime" ref="editCaliForm" > <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="开始时间" prop="startTime" > <a-time-picker format="HH:mm" v-model="editData.startTime" @change="turnStartTime" /> </a-form-model-item> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="结束时间" prop="endTime"> <a-time-picker format="HH:mm" v-model="editData.endTime" @change="turnEndTime"/> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="结束时间" prop="endTime" > <a-time-picker format="HH:mm" v-model="editData.endTime" @change="turnEndTime" /> </a-form-model-item> <a-form-model-item v-if="this.sensorCode === 'a40001'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式"> <a-form-model-item v-if="this.sensorCode === 'a40001'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式" > <a-input-group compact> <a-input style="width: 30%" read-only value="烟气流速"/> <a-select v-model="editData.formula1" style="width: 30%;" style="width: 30%" placeholder="请选择" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> @@ -169,11 +314,23 @@ </a-input> </a-input-group> </a-form-model-item> <a-form-model-item v-else-if="this.sensorCode === 'a01011'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式"> <a-form-model-item v-else-if="this.sensorCode === 'a01011'" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式" > <a-input-group compact> <a-input style="width: 30%" read-only value="烟气流速"/> <a-select style="width: 30%" placeholder="请选择" v-model="editData.formula1"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select style="width: 30%" placeholder="请选择" v-model="editData.formula1" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> @@ -185,23 +342,35 @@ </a-input> </a-input-group> </a-form-model-item> <a-form-model-item v-else :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式"> <a-form-model-item v-else :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="校准公式" > <a-input-group compact> <a-select style="width: 30%" defaultValue='AQI值' defaultValue="AQI值" v-model="editData.type1" > <a-select-option :value="item.key" :key="key" v-for="(item, key) in selectType"> <a-select-option :value="item.key" :key="key" v-for="(item, key) in selectType" > {{ item.value }} </a-select-option> </a-select> <a-select v-model="editData.formula1" style="width: 30%;" style="width: 30%" placeholder="请选择" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> @@ -215,8 +384,15 @@ </a-input-group> <a-input-group compact> <a-input style="width: 30%" read-only value="测量值"/> <a-select style="width: 30%" placeholder="请选择" v-model="editData.formula2"> <a-select-option :value="item.key" v-for="(item, key) in selectSymbol"> <a-select style="width: 30%" placeholder="请选择" v-model="editData.formula2" > <a-select-option :value="item.key" v-for="(item, key) in selectSymbol" > {{ item.value }} </a-select-option> </a-select> @@ -229,14 +405,18 @@ </a-input> </a-input-group> </a-form-model-item> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="公式" prop="cel"> <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="公式" prop="cel" > <a-input type="string" read-only v-model="editData.cel"> <a-icon slot="addonAfter" type="close" @click="clearCel"/> </a-input> </a-form-model-item> </a-form-model> </a-modal> </div> </template> @@ -398,6 +578,7 @@ }).then((res: any) => { this.pagination.total = res.data.data.totalNumber this.dataSource = res.data.data.deviceAdjustValues console.log(parseInt(res.data.data.deviceAdjustValues[0].value)); }) } @@ -748,7 +929,6 @@ </script> <style lang="less"> .modalStyle { .ant-modal { margin-left: 25%; src/util/request.ts
@@ -6,7 +6,8 @@ const instance = axios.create({ //baseURL: 'http://47.99.64.149:8082/', // baseUrl会在发送请求的时候拼接在url前面 开发环境 // baseURL: 'http://www.7drlb7.com:8082/', // baseUrl会在发送请求的时候拼接在url前面 正式环境 baseURL: 'http://120.26.43.34:8082/', // baseURL: 'http://120.26.43.34:8082/', baseURL: 'http://192.168.0.11:8082/', timeout: 5000 }) src/views/list/devicesBasic.vue
@@ -13,6 +13,13 @@ style="margin-left: 25px" >新建 </a-button> <a-button icon="plus" type="primary" @click="() => this.handleModalVisible1(true)" style="margin-left: 25px" >批量修改准校值 </a-button> </a-col> <a-col :span="4"> <a-form-model-item @@ -86,6 +93,125 @@ ></av-standard-table> </div> </a-card> <a-modal title="批量修改校准值" :visible="visibleCreateModal1" @cancel="handleCreateModalCancel1" destroyOnClose class="modalStylezhi" okText="保存" > <template #footer> <a-button key="back" @click="handleCreateModalCancel1">关闭</a-button> <a-button key="submit" type="primary" :loading="loading" @click="handleOk" >提交</a-button > </template> <div class="modalone"> <div class="theone"> <a-select ref="select" v-model="selectvalue1" allowClear placeholder="请选择因子" :options="selectoptions" @change="handleChangevalue1" style="margin-top: 40px; margin-left: 10px; width: 130px" ></a-select> </div> <div class="thetwo"> <div style="height: 50px"> <div style="margin-top: 15px; margin-left: 20px"> <span style="font-size: 17.5px; color: black">AQI值 :</span ><a-select ref="select" v-model="AQIvalue1" style="width: 100px; margin-left: 16px" allowClear :options="AQIoptions" @change="AQIhandleChange" ></a-select> <a-input v-model="AQIvalue" style="width: 100px; margin-left: 15px" /> </div> </div> <div style="height: 50px"> <div style="margin-left: 20px"> <span style="font-size: 17.5px; color: black">测量值 :</span ><a-select ref="select" v-model="ceAQIvalue" style="width: 100px; margin-left: 10px" allowClear :options="ceAQIoptions" @change="ceAQIhandleChange" ></a-select> <a-input v-model="ceAQIvaluein" style="width: 100px; margin-left: 15px" /> </div> </div> </div> <div class="thethree"> <div style="margin-left: 20px; margin-top: 40px"> <span style="font-size: 16px; color: black">最终公式:</span> <span style="font-size: 17.5px; color: black"> (原AQI系数 {{ AQIvalue1 }} <span style="color: #cbcb28">{{ AQIvalue }} </span>) + (原测量系数 {{ ceAQIvalue }}<span style="color: #cbcb28"> {{ ceAQIvaluein }}</span >)</span > </div> </div> </div> <div class="modaltwo"> <a-select placeholder="选择站点(输入名称搜索)" allow-clear show-search style="width: 200px" > <a-select-option v-for="(item, index) in MonitorPoints" :key="index" :value="item.id" @click="handleChange2" >{{ item.name }} </a-select-option> </a-select> </div> <div> <a-table :row-selection="{ getCheckboxProps: this.rowSelection.getCheckboxProps, onChange: this.rowSelectionChange, }" :columns="tablecolumns" :data-source="datatable" style="margin-top: 20px" bordered row-key="name" :scroll="{ x: 900, y: 300 }" :pagination="false" > <template #bodyCell="{ column, text }"> <template v-if="column.dataIndex === 'name'"> <a>{{ text }}</a> </template> </template> </a-table> </div> </a-modal> <a-modal title="添加-设备" destroyOnClose @@ -948,6 +1074,7 @@ <script lang="tsx"> import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator"; import type { TableProps, TableColumnType } from 'ant-design-vue'; import moment from "moment"; import { get, post } from "@/util/request"; import UpdateTaskForm from "./components/UpdateTaskFormRole.vue"; @@ -1068,6 +1195,8 @@ private visibleCreateModal: boolean = false; private visibleCreateModal1: boolean = false; private editTaskFormVisible: boolean = false; private distributionMenuVisible: boolean = false; @@ -1084,6 +1213,160 @@ }; private updateRecord1: any = {}; private selectvalue1:any = '请选择因子'; private selectoptions:any[]=[ { value: 'a34004', label: 'PM2.5', }, { value: 'a34002', label: 'PM10', }, { value: 'a05024', label: '臭氧', }, { value: 'a21004', label: '二氧化氮', }, { value: 'a21026', label: '二氧化硫', }, { value: 'a21005', label: '一氧化碳', }, { value: 'a99054', label: 'TVOC', }, ] private AQIvalue1:any = '+'; private ceAQIvalue:any = '+'; private ceAQIvaluein:number = 0.01; private AQIvalue:number = 0.01; private AQIoptions:any[]=[ { value: '+', label: '+', }, { value: '-', label: '-', }, { value: '*', label: '*', }, { value: '/', label: '/', }, ] private ceAQIoptions:any[]=[ { value: '+', label: '+', }, { value: '-', label: '-', }, { value: '*', label: '*', }, { value: '/', label: '/', }, ] private handleChangevalue1(value: string){ console.log(value); } private AQIhandleChange(value: string){ console.log(value); } private ceAQIhandleChange(value: string){ console.log(value); } private tablecolumns:TableColumnType<datatable>=[ { title: "名称", dataIndex: "name" }, { title: '修改前', dataIndex: 'value', }, { title: '修改后', dataIndex: 'agehou', }, ] private datatable:any[]=[ // { // key: '1', // name: 'John Brown', // age: 'aqi*0.93+cel*0.07', // age1:0.93, // age2:0.07, // address: 'New York No. 1 Lake Park', // agehou:'' // }, // { // key: '2', // name: 'Jim Green', // age: 'aqi*0.93+cel*0.07', // age1:0.93, // age2:0.07, // address: 'London No. 1 Lake Park', // agehou:'' // }, // { // key: '3', // name: 'Joe Black', // age: 'aqi*0.93+cel*0.07', // age1:0.93, // age2:0.07, // address: 'Sidney No. 1 Lake Park', // agehou:'' // } ] private rowSelectionChange(selectedRowKeys: string[], selectedRows: DataType[]){ // console.log(selectedRows); this.selectedtable=selectedRows } private selectedtable:any[]=[] private rowSelection:TableProps['rowSelection']={ onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => { this.selectedtable=selectedRows // console.log(this.selectedtable); }, getCheckboxProps: (record: DataType) => ({ name: record.name, }), } private handleOk(){ // console.log(this.selectedtable); post('deviceAdjustValue/updateAllAdjust',{ AdjustForm:this.selectedtable }).then((res:any)=>{ console.log(res); if(res.data.code == 0){ this.$message.success('操作成功') this.handleCreateModalCancel1() } }) // this.loading = true; // setTimeout(() => { // this.loading = false; // }, 2000); } private columns: any[] = [ { @@ -1325,6 +1608,9 @@ this.getGovPointByArea('') this.techFlag = false } private handleModalVisible1(isVisible: boolean): void { this.visibleCreateModal1=isVisible } private toggleForm(): void { this.expandForm = !this.expandForm; @@ -1362,12 +1648,68 @@ //下拉查询框方法 private handleChange1(selectedItems:any) { if (selectedItems === undefined) { this.selectMt = null }else { this.selectMt = selectedItems; } this.loadRuleData(1) } private handleChange2(res:any){ // console.log(res.key); if(this.selectvalue1==='请选择因子'){ this.$message.warning('请先选择因子') return } post('deviceAdjustValue/getAllAdjust',{ code:this.selectvalue1, id:res.key, }).then((res:any)=>{ this.datatable=[] this.datatable=res.data.data if(this.selectvalue1==='a99054'){ for(var i=0;i<this.datatable.length;i++){ if(this.ceAQIvalue==='+'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel+Number(this.ceAQIvaluein)).toFixed(2) }else if(this.ceAQIvalue==='-'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel-Number(this.ceAQIvaluein)).toFixed(2) }else if(this.ceAQIvalue==='*'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel*Number(this.ceAQIvaluein)).toFixed(3) }else if(this.ceAQIvalue==='/'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel/Number(this.ceAQIvaluein)).toFixed(2) } this.datatable[i].agehou='ce1*'+this.datatable[i].cel } }else{ for(var i=0;i<this.datatable.length;i++){ // this.datatable[i].aqi=parseFloat(this.datatable[i].aqi+this.AQIvalue).toFixed(2) // this.datatable[i].cel=parseFloat(this.datatable[i].cel+this.ceAQIvaluein).toFixed(2) // this.datatable[i].agehou='aqi*'+this.datatable[i].aqi+'+'+'ce1*'+this.datatable[i].cel if(this.AQIvalue1==='+'){ // console.log(this,'+++'); this.datatable[i].aqi=parseFloat((this.datatable[i].aqi) + Number(this.AQIvalue)).toFixed(2) }else if(this.AQIvalue1==='-'){ this.datatable[i].aqi=parseFloat(this.datatable[i].aqi - Number(this.AQIvalue)).toFixed(2) } else if(this.AQIvalue1==='*'){ this.datatable[i].aqi=parseFloat(this.datatable[i].aqi * Number(this.AQIvalue)).toFixed(3) }else if(this.AQIvalue1==='/'){ this.datatable[i].aqi=parseFloat(this.datatable[i].aqi / Number(this.AQIvalue)).toFixed(2) } if(this.ceAQIvalue==='+'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel + Number(this.ceAQIvaluein)).toFixed(2) }else if(this.ceAQIvalue==='-'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel - Number(this.ceAQIvaluein)).toFixed(2) }else if(this.ceAQIvalue==='*'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel * Number(this.ceAQIvaluein)).toFixed(3) }else if(this.ceAQIvalue==='/'){ this.datatable[i].cel=parseFloat(this.datatable[i].cel / Number(this.ceAQIvaluein)).toFixed(2) } this.datatable[i].agehou='aqi*'+this.datatable[i].aqi+'+'+'ce1*'+this.datatable[i].cel } } }) } @@ -1596,6 +1938,11 @@ // 存放查询的组织id private selectMt: any = null private loading: boolean=false private handleCancel(){ } //新建保存 private handleCreateModalOk() { this.form.validateFields((err: any, values: any) => { @@ -1687,6 +2034,12 @@ lat: '' } this.visibleCreateModal = false; } private handleCreateModalCancel1():any{ this.visibleCreateModal1=false; this.datatable=[] this.selectvalue1='请选择因子' } private handlerSelectChange(arr1: any, arr2: any) { @@ -1957,4 +2310,49 @@ min-height: 0; } } .modalStylezhi { .ant-modal-content { width: 1000px; margin-left: -250px; } .ant-modal-title { font-size: 20px; margin-left: -25px; } .ant-form-item { margin-bottom: 0px; } .ant-form-explain { display: none; min-height: 0; } .ant-modal-header { width: 95%; margin-left: 25px; } } .modalone { height: 120px; border-bottom: 1px solid #e8e8e8; display: flex; .theone { width: 20%; border-right: 1px #e8e8e8 dashed; height: 100px; } .thetwo { width: 35%; border-right: 1px #e8e8e8 dashed; height: 100px; } .thethree { width: 45%; height: 100px; } } .modaltwo { margin-top: 20px; margin-left: 10px; } </style>