布局调整

src/views/Login/Login.vue

@@ -34,7 +34,7 @@
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
-                    :value="item.value"
+                    :value="item.label"
                   />
                 </el-select>
               </el-form-item>
@@ -149,21 +149,34 @@ const loginData = reactive({
 
 const options = ref([
   {
-    value: 'admin123',
-    label: 'admin'
+    label: '管理员账号',
+    value: 'admin',
+    password: 'admin123'
   },
   {
+    label: '国家粮食交易中心',
     value: '111111',
-    label: 'test111'
+    password: 'admin111111'
   },
   {
+    label: '省交易中心',
     value: '222222',
-    label: 'test222'
-  }
+    password: 'admin222222'
+  },
+  {
+    label: '银行',
+    value: '333333',
+    password: 'admin333333'
+  },
+  {
+    label: '库区',
+    value: '444444',
+    password: 'admin444444'
+  },
 ])
 const isQuick = ref(false)
 const selectValue = ref('')
-const selectLabel = ref('')
+const selectPassword = ref('')
 
 // 获取验证码
 const getCode = async () => {
@@ -249,9 +262,10 @@ const handBack = () => {
 }
 // 选择登录账号
 const handlerChange = (data: any) => {
-  selectLabel.value = options.value.filter((item) => item.value == data)[0].label
-  loginData.loginForm.username = selectLabel.value
-  loginData.loginForm.password = selectValue.value
+  selectValue.value = options.value.filter((item) => item.label == data)[0].value
+  selectPassword.value = options.value.filter((item) => item.label == data)[0].password
+  loginData.loginForm.username = selectValue.value
+  loginData.loginForm.password = selectPassword.value
   isQuick.value = false
 }
 // 取消选择

src/views/VisualDisplay/src/compontent/header.vue

@@ -49,12 +49,14 @@ onBeforeUnmount(() => {
   // background: pink;
   background: url('@/assets/ksh/home/top.png') no-repeat;
   background-size: 100% 100%;
+  position: relative;
   cursor: pointer;
 }
 .header .time {
   position: absolute;
   right: 4%;
-  top: 4.5%;
+  top: 45%;
+  transform: translate(0, -50%);
   font-size: 20px;
   color: white;
   font-weight: 500;

src/views/VisualDisplay/src/pages/cf/index.vue

@@ -1,141 +1,146 @@
 <template>
-  <div class="cf_content">
+  <div class="container-page">
     <div class="header">
       <Header />
     </div>
-    <el-row :gutter="10" style="height: 88%">
-      <el-col :span="9">
-        <div class="kqxx_box">
-          <div class="box_khxx">
-            <div class="box_title">
-              <span class="title-top">客户信息</span>
+    <div class="container-body">
+      <el-row :gutter="10" style="height: 88%">
+        <el-col :span="9">
+          <div class="kqxx_box">
+            <div class="box_khxx">
+              <div class="box_title">
+                <span class="title-top">客户信息</span>
+              </div>
+              <div class="kqxx_content">
+                <div class="box_item">
+                  <div class="box_icon icon_kh1"></div>
+                  <div class="box_content">
+                    <span class="span_left">*客户名称（单位名称）</span>
+                    <span class="span_right" :title="formData.dwmc">{{ formData.dwmc }}</span>
+                  </div>
+                </div>
+                <div class="box_item">
+                  <div class="box_icon icon_kh2"></div>
+                  <div class="box_content">
+                    <span class="span_left">*联系电话</span>
+                    <span class="span_right" :title="formData.lxdh">{{ formData.lxdh }}</span>
+                  </div>
+                </div>
+                <div class="box_item">
+                  <div class="box_icon icon_kh3"></div>
+                  <div class="box_content">
+                    <span class="span_left">*身份证号/社会信用统一代码</span>
+                    <span class="span_right" :title="formData.tyshxydm">{{
+                      formData.tyshxydm
+                    }}</span>
+                  </div>
+                </div>
+              </div>
             </div>
-            <div class="kqxx_content">
-              <div class="box_item">
-                <div class="box_icon icon_kh1"></div>
+            <div class="box_cfxx">
+              <div class="box_title">
+                <span class="title-top">仓房信息</span>
+              </div>
+              <div class="cfxx_content">
                 <div class="box_content">
-                  <span class="span_left">*客户名称（单位名称）</span>
-                  <span class="span_right" :title="formData.dwmc">{{ formData.dwmc }}</span>
+                  <span class="span_left">仓房名称：</span>
+                  <span class="span_right" :title="formData.cfmc">{{ formData.cfmc }}</span>
                 </div>
-              </div>
-              <div class="box_item">
-                <div class="box_icon icon_kh2"></div>
                 <div class="box_content">
-                  <span class="span_left">*联系电话</span>
-                  <span class="span_right" :title="formData.lxdh">{{ formData.lxdh }}</span>
+                  <span class="span_left">仓廒编号：</span>
+                  <span class="span_right" :title="formData.cabh">{{ formData.cabh }}</span>
+                </div>
+                <div class="box_content">
+                  <span class="span_left">仓房类型：</span>
+                  <span class="span_right" :title="formData.cflx">
+                    <dict-tag
+                      v-if="formData.cflx"
+                      :type="DICT_TYPE.SYSTEM_CFLX"
+                      :value="formData.cflx"
+                    />
+                  </span>
                 </div>
-              </div>
-              <div class="box_item">
-                <div class="box_icon icon_kh3"></div>
                 <div class="box_content">
-                  <span class="span_left">*身份证号/社会信用统一代码</span>
-                  <span class="span_right" :title="formData.tyshxydm">{{ formData.tyshxydm }}</span>
+                  <span class="span_left">设计使用年限：</span>
+                  <span class="span_right" :title="formData.sjsynx">{{ formData.sjsynx }}年</span>
+                </div>
+                <div class="box_content">
+                  <span class="span_left">仓内体积（m³）：</span>
+                  <span class="span_right" :title="formData.cntj">{{ formData.cntj }}</span>
+                </div>
+                <div class="box_content">
+                  <span class="span_left">交付使用日期：</span>
+                  <span class="span_right" :title="formData.jfsyrq">{{ formData.jfsyrq }}</span>
+                </div>
+                <div class="box_content">
+                  <span class="span_left">设计仓容（吨）：</span>
+                  <span class="span_right" :title="formData.sjcr">{{ formData.sjcr }}</span>
+                </div>
+                <div class="box_content">
+                  <span class="span_left">仓房状态：</span>
+                  <span class="span_right" :title="formData.cfzt"
+                    ><dict-tag
+                      v-if="formData.cfzt"
+                      :type="DICT_TYPE.SYSTEM_CAZT"
+                      :value="formData.cfzt"
+                  /></span>
                 </div>
               </div>
             </div>
           </div>
-          <div class="box_cfxx">
-            <div class="box_title">
-              <span class="title-top">仓房信息</span>
-            </div>
-            <div class="cfxx_content">
-              <div class="box_content">
-                <span class="span_left">仓房名称：</span>
-                <span class="span_right" :title="formData.cfmc">{{ formData.cfmc }}</span>
-              </div>
-              <div class="box_content">
-                <span class="span_left">仓廒编号：</span>
-                <span class="span_right" :title="formData.cabh">{{ formData.cabh }}</span>
-              </div>
-              <div class="box_content">
-                <span class="span_left">仓房类型：</span>
-                <span class="span_right" :title="formData.cflx">
-                  <dict-tag
-                    v-if="formData.cflx"
-                    :type="DICT_TYPE.SYSTEM_CFLX"
-                    :value="formData.cflx"
+        </el-col>
+        <el-col :span="15">
+          <div class="map-area">
+            <div class="operation-box">
+              <el-radio-group v-model="tabPosition" @change="tabClick" style="width: 80%">
+                <el-radio-button label="hwk" value="hwk">货位卡</el-radio-button>
+                <el-radio-button label="crkjl" value="crkjl">出入库记录</el-radio-button>
+                <el-radio-button label="zj" value="zj">质检</el-radio-button>
+                <el-radio-button label="wsdjc" value="wsdjc">粮情监测</el-radio-button>
+                <el-radio-button label="sy" value="sy">损溢</el-radio-button>
+              </el-radio-group>
+              <div class="changecang">
+                <el-select
+                  @change="cangSelect"
+                  v-model="cangName"
+                  placeholder="选择货位"
+                  style="width: 150px"
+                >
+                  <el-option
+                    v-for="(item, index) in cangOptions"
+                    :key="index"
+                    :label="item.hwmc"
+                    :value="item.hwdm"
                   />
-                </span>
-              </div>
-              <div class="box_content">
-                <span class="span_left">设计使用年限：</span>
-                <span class="span_right" :title="formData.sjsynx">{{ formData.sjsynx }}年</span>
-              </div>
-              <div class="box_content">
-                <span class="span_left">仓内体积（m³）：</span>
-                <span class="span_right" :title="formData.cntj">{{ formData.cntj }}</span>
-              </div>
-              <div class="box_content">
-                <span class="span_left">交付使用日期：</span>
-                <span class="span_right" :title="formData.jfsyrq">{{ formData.jfsyrq }}</span>
-              </div>
-              <div class="box_content">
-                <span class="span_left">设计仓容（吨）：</span>
-                <span class="span_right" :title="formData.sjcr">{{ formData.sjcr }}</span>
-              </div>
-              <div class="box_content">
-                <span class="span_left">仓房状态：</span>
-                <span class="span_right" :title="formData.cfzt"
-                  ><dict-tag
-                    v-if="formData.cfzt"
-                    :type="DICT_TYPE.SYSTEM_CAZT"
-                    :value="formData.cfzt"
-                /></span>
+                </el-select>
+                <el-button class="changecangBtn" type="primary" plain @click="back()"
+                  >返回</el-button
+                >
               </div>
             </div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="15">
-        <div class="map-area">
-          <div class="operation-box">
-            <el-radio-group v-model="tabPosition" @change="tabClick" style="width: 80%">
-              <el-radio-button label="hwk" value="hwk">货位卡</el-radio-button>
-              <el-radio-button label="crkjl" value="crkjl">出入库记录</el-radio-button>
-              <el-radio-button label="zj" value="zj">质检</el-radio-button>
-              <el-radio-button label="wsdjc" value="wsdjc">粮情监测</el-radio-button>
-              <el-radio-button label="sy" value="sy">损溢</el-radio-button>
-            </el-radio-group>
-            <div class="changecang">
-              <el-select
-                @change="cangSelect"
-                v-model="cangName"
-                placeholder="选择货位"
-                style="width: 150px"
-              >
-                <el-option
-                  v-for="(item, index) in cangOptions"
-                  :key="index"
-                  :label="item.hwmc"
-                  :value="item.hwdm"
-                />
-              </el-select>
-              <el-button class="changecangBtn" type="primary" plain @click="back()">返回</el-button>
-            </div>
-          </div>
-          <div class="hw-rightcon">
-            <div v-if="tabPosition == 'hwk'">
-              <h3 class="hwk_title"><i></i>货位信息</h3>
-              <el-form class="formstyletwo" ref="form" :model="baseformhw" label-width="140px">
-                <el-row :gutter="30">
-                  <!-- <el-col :span="16"> -->
-                  <el-col :span="8">
-                    <el-form-item label="仓房名称">
-                      <el-input v-model="baseformhw.cfmc" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="货位名称">
-                      <el-input v-model="baseformhw.hwmc" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="保管员">
-                      <el-input v-model="baseformhw.bgy" />
-                    </el-form-item>
-                  </el-col>
-                  <!-- </el-col> -->
-                  <!-- <el-col :span="8">
+            <div class="hw-rightcon">
+              <div v-if="tabPosition == 'hwk'">
+                <h3 class="hwk_title"><i></i>货位信息</h3>
+                <el-form class="formstyletwo" ref="form" :model="baseformhw" label-width="140px">
+                  <el-row :gutter="30">
+                    <!-- <el-col :span="16"> -->
+                    <el-col :span="8">
+                      <el-form-item label="仓房名称">
+                        <el-input v-model="baseformhw.cfmc" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="货位名称">
+                        <el-input v-model="baseformhw.hwmc" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="保管员">
+                        <el-input v-model="baseformhw.bgy" />
+                      </el-form-item>
+                    </el-col>
+                    <!-- </el-col> -->
+                    <!-- <el-col :span="8">
                   <div class="img" style="width: 100%;text-align:center">
                       <el-image
                         style="width: 240px; height: 240px;cursor: pointer;margin-top: -28px;"
@@ -149,51 +154,51 @@
                       </el-image>
                     </div>
                 </el-col> -->
-                </el-row>
-                <h3 class="hwk_title"><i></i>库存信息</h3>
-                <el-row :gutter="30">
-                  <el-col :span="8">
-                    <el-form-item label="粮食品种">
-                      <el-input v-model="baseformhw.lspzmc" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="粮食等级">
-                      <el-input v-model="baseformhw.lsdjmc" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="收获年度">
-                      <el-input v-model="baseformhw.shnd" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="粮食产地">
-                      <el-input v-model="baseformhw.lscdmc" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="实际数量(吨)">
-                      <el-input v-model="baseformhw.sjsl" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="计价数量(吨)">
-                      <el-input v-model="baseformhw.jjsl" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="入库时间">
-                      <el-input v-model="baseformhw.rksj" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="保管方式">
-                      <el-input v-model="baseformhw.bgfs" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <!-- <h3><i></i>交收信息</h3>
+                  </el-row>
+                  <h3 class="hwk_title"><i></i>库存信息</h3>
+                  <el-row :gutter="30">
+                    <el-col :span="8">
+                      <el-form-item label="粮食品种">
+                        <el-input v-model="baseformhw.lspzmc" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="粮食等级">
+                        <el-input v-model="baseformhw.lsdjmc" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="收获年度">
+                        <el-input v-model="baseformhw.shnd" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="粮食产地">
+                        <el-input v-model="baseformhw.lscdmc" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="实际数量(吨)">
+                        <el-input v-model="baseformhw.sjsl" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="计价数量(吨)">
+                        <el-input v-model="baseformhw.jjsl" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="入库时间">
+                        <el-input v-model="baseformhw.rksj" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="保管方式">
+                        <el-input v-model="baseformhw.bgfs" />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <!-- <h3><i></i>交收信息</h3>
               <el-row :gutter="30">
                 <el-col :span="8">
                   <el-form-item label="单位名称">
@@ -226,225 +231,225 @@
                   </el-form-item>
                 </el-col>
               </el-row> -->
-              </el-form>
-            </div>
-            <div v-if="tabPosition == 'crkjl'">
-              <el-form :inline="true" class="formstylethree" ref="form" :model="searchform">
-                <el-form-item label="业务日期">
-                  <el-date-picker
-                    style="width: 180px"
-                    @change="searchCrk"
-                    clearable
-                    v-model="searchform.ywrq"
-                    type="date"
-                    format="YYYY-MM-DD"
-                    value-format="YYYY-MM-DD"
-                    placeholder="选择日期"
-                  />
-                </el-form-item>
-                <el-form-item label="出入库类型">
-                  <el-select
-                    style="width: 180px"
-                    @change="searchCrk"
-                    v-model="searchform.crklx"
-                    placeholder="请选择"
-                  >
-                    <el-option
-                      v-for="item in crkLxOptions"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
+                </el-form>
+              </div>
+              <div v-if="tabPosition == 'crkjl'">
+                <el-form :inline="true" class="formstylethree" ref="form" :model="searchform">
+                  <el-form-item label="业务日期">
+                    <el-date-picker
+                      style="width: 180px"
+                      @change="searchCrk"
+                      clearable
+                      v-model="searchform.ywrq"
+                      type="date"
+                      format="YYYY-MM-DD"
+                      value-format="YYYY-MM-DD"
+                      placeholder="选择日期"
                     />
-                  </el-select>
-                </el-form-item>
-                <el-button type="primary" class="searchBtn" @click="loadData()">查询</el-button>
-              </el-form>
-              <el-scrollbar style="height: 68vh">
-                <div class="resettablewrap">
-                  <el-table
-                    :data="crkTableData"
-                    style="width: 100%; overflow-x: hidden"
-                    :header-cell-class-name="'headerBg'"
-                    :row-class-name="tableRowClassName"
-                    @row-click="handleCkClick"
-                    highlight-current-row
-                  >
-                    <el-table-column type="index" width="60" label="序号" align="center">
-                      <template #default="scope">
-                        {{ scope.$index + 1 }}
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="ywrq" label="业务时间" align="center" />
-                    <el-table-column prop="lspzmc" label="粮食品种" align="center" />
-                    <el-table-column prop="lsdjbm" label="粮食等级" align="center" />
-                    <el-table-column prop="jz" label="净重（公斤）" align="center" />
-                    <!-- <el-table-column prop="jsdj" label="结算单价（元）" align="center" /> -->
-                    <el-table-column prop="cch" label="车船号" align="center" />
-                    <el-table-column prop="cfhw" label="仓房货位" align="center" />
-                    <el-table-column prop="crklx" label="出入库类型" align="center">
-                      <template #default="scope">
-                        <span v-if="scope.row.crklx == 0">出库</span>
-                        <span v-if="scope.row.crklx == 1">入库</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="fileIds" label="附件个数" width="160" align="center">
-                      <template #default="scope">
-                        <span class="fjBtn" @click="openFiles(scope.row)">{{
-                          scope.row.fileIds
-                        }}</span>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                  <el-pagination
-                    @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange"
-                    :page-sizes="[10, 20, 30, 40]"
-                    layout="->,total, sizes, prev, pager, next, jumper"
-                    :current-page="page.pageNo"
-                    :page-size="page.pageSize"
-                    :total="page.total"
-                  />
-                </div>
-              </el-scrollbar>
-            </div>
-            <div v-if="tabPosition == 'zj'">
-              <!-- <h3><i></i>检测记录</h3> -->
-              <div class="resettablewrap resettablewrap-spe" style="margin-bottom: 10px">
-                <el-scrollbar style="height: 500px">
-                  <el-table
-                    :data="zhijTableData"
-                    style="width: 100%; overflow-x: hidden"
-                    :header-cell-class-name="'headerBg'"
-                    :row-class-name="tableRowClassName"
-                    @current-change="handleJcjlChange"
-                  >
-                    <el-table-column prop="jclx" label="检测类型" align="center" />
-                    <el-table-column prop="jcsj" label="检测时间" align="center" />
-                    <el-table-column prop="lspzmc" label="粮食品种" align="center">
-                      <template #default="scope">
-                        <span>{{ scope.row.lspzmc ? scope.row.lspzmc : '-' }}</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="lsdjbm" label="粮食等级" align="center" />
-                    <el-table-column prop="jcrrxm" label="检测人员姓名" align="center" />
-                    <el-table-column
-                      prop="sfhg"
-                      label="食品安全指标是否合格"
-                      align="center"
-                      width="180"
+                  </el-form-item>
+                  <el-form-item label="出入库类型">
+                    <el-select
+                      style="width: 180px"
+                      @change="searchCrk"
+                      v-model="searchform.crklx"
+                      placeholder="请选择"
                     >
-                      <template #default="scope">
-                        <!-- <span>{{ scope.row.sfhg ? scope.row.sfhg : '-' }}</span> -->
-                        <span v-if="scope.row.sfhg === 1">合格</span>
-                        <span v-if="scope.row.sfhg === 0">不合格</span>
-                        <span v-if="!scope.row.sfhg && scope.row.sfhg !== 0">-</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="zzmd" label="附件个数" align="center" />
-                  </el-table>
+                      <el-option
+                        v-for="item in crkLxOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-button type="primary" class="searchBtn" @click="loadData()">查询</el-button>
+                </el-form>
+                <el-scrollbar style="height: 68vh">
+                  <div class="resettablewrap">
+                    <el-table
+                      :data="crkTableData"
+                      style="width: 100%; overflow-x: hidden"
+                      :header-cell-class-name="'headerBg'"
+                      :row-class-name="tableRowClassName"
+                      @row-click="handleCkClick"
+                      highlight-current-row
+                    >
+                      <el-table-column type="index" width="60" label="序号" align="center">
+                        <template #default="scope">
+                          {{ scope.$index + 1 }}
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="ywrq" label="业务时间" align="center" />
+                      <el-table-column prop="lspzmc" label="粮食品种" align="center" />
+                      <el-table-column prop="lsdjbm" label="粮食等级" align="center" />
+                      <el-table-column prop="jz" label="净重（公斤）" align="center" />
+                      <!-- <el-table-column prop="jsdj" label="结算单价（元）" align="center" /> -->
+                      <el-table-column prop="cch" label="车船号" align="center" />
+                      <el-table-column prop="cfhw" label="仓房货位" align="center" />
+                      <el-table-column prop="crklx" label="出入库类型" align="center">
+                        <template #default="scope">
+                          <span v-if="scope.row.crklx == 0">出库</span>
+                          <span v-if="scope.row.crklx == 1">入库</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="fileIds" label="附件个数" width="160" align="center">
+                        <template #default="scope">
+                          <span class="fjBtn" @click="openFiles(scope.row)">{{
+                            scope.row.fileIds
+                          }}</span>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                    <el-pagination
+                      @size-change="handleSizeChange"
+                      @current-change="handleCurrentChange"
+                      :page-sizes="[10, 20, 30, 40]"
+                      layout="->,total, sizes, prev, pager, next, jumper"
+                      :current-page="page.pageNo"
+                      :page-size="page.pageSize"
+                      :total="page.total"
+                    />
+                  </div>
                 </el-scrollbar>
               </div>
-            </div>
-            <div v-if="tabPosition == 'wsdjc'">
-              <!-- <div class="radiobox">
+              <div v-if="tabPosition == 'zj'">
+                <!-- <h3><i></i>检测记录</h3> -->
+                <div class="resettablewrap resettablewrap-spe" style="margin-bottom: 10px">
+                  <el-scrollbar style="height: 500px">
+                    <el-table
+                      :data="zhijTableData"
+                      style="width: 100%; overflow-x: hidden"
+                      :header-cell-class-name="'headerBg'"
+                      :row-class-name="tableRowClassName"
+                      @current-change="handleJcjlChange"
+                    >
+                      <el-table-column prop="jclx" label="检测类型" align="center" />
+                      <el-table-column prop="jcsj" label="检测时间" align="center" />
+                      <el-table-column prop="lspzmc" label="粮食品种" align="center">
+                        <template #default="scope">
+                          <span>{{ scope.row.lspzmc ? scope.row.lspzmc : '-' }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="lsdjbm" label="粮食等级" align="center" />
+                      <el-table-column prop="jcrrxm" label="检测人员姓名" align="center" />
+                      <el-table-column
+                        prop="sfhg"
+                        label="食品安全指标是否合格"
+                        align="center"
+                        width="180"
+                      >
+                        <template #default="scope">
+                          <!-- <span>{{ scope.row.sfhg ? scope.row.sfhg : '-' }}</span> -->
+                          <span v-if="scope.row.sfhg === 1">合格</span>
+                          <span v-if="scope.row.sfhg === 0">不合格</span>
+                          <span v-if="!scope.row.sfhg && scope.row.sfhg !== 0">-</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="zzmd" label="附件个数" align="center" />
+                    </el-table>
+                  </el-scrollbar>
+                </div>
+              </div>
+              <div v-if="tabPosition == 'wsdjc'">
+                <!-- <div class="radiobox">
                   <el-radio-group @change="zhijianInfo" v-model="wensdRadio">
                     <el-radio-button label="01" value="01">列表信息</el-radio-button>
                     <el-radio-button label="02" value="02">图文信息</el-radio-button>
                   </el-radio-group>
                 </div> -->
-              <div>
-                <el-form class="formstyletwo" ref="form" :model="wensdform" label-width="200px">
-                  <el-row :gutter="30">
-                    <el-col :span="8">
-                      <el-form-item label="仓廒名称">
-                        <el-input v-model="wensdform.camc" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="粮食品种">
-                        <el-input v-model="wensdform.lspzmc" />
-                      </el-form-item>
-                    </el-col>
-                    <!-- <el-col :span="8">
+                <div>
+                  <el-form class="formstyletwo" ref="form" :model="wensdform" label-width="200px">
+                    <el-row :gutter="30">
+                      <el-col :span="8">
+                        <el-form-item label="仓廒名称">
+                          <el-input v-model="wensdform.camc" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="粮食品种">
+                          <el-input v-model="wensdform.lspzmc" />
+                        </el-form-item>
+                      </el-col>
+                      <!-- <el-col :span="8">
                         <el-form-item label="粮食性质">
                           <el-input v-model="wensdform.lsxzmc" />
                         </el-form-item>
                       </el-col> -->
-                    <el-col :span="8">
-                      <el-form-item label="粮食等级">
-                        <el-input v-model="wensdform.lsdjmc" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="粮食数量（吨）">
-                        <el-input v-model="wensdform.kcsl" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="仓房外温（℃）">
-                        <el-input v-model="wensdform.cfww" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="仓房外湿（%）">
-                        <el-input v-model="wensdform.cfws" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="仓房内温（℃）">
-                        <el-input v-model="wensdform.cfnw" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="仓房内湿（%）">
-                        <el-input v-model="wensdform.cfns" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="粮食最高温（℃）">
-                        <el-input v-model="wensdform.lszgw" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="粮食最低温（℃）">
-                        <el-input v-model="wensdform.lszdw" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="粮食平均温（℃）">
-                        <el-input v-model="wensdform.lspjw" />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-row :gutter="30">
-                    <el-col :span="8" v-for="(item, index) in wensdform.fileList" :key="index">
-                      <div class="image_preview">
-                        <el-image
-                          style="width: 100%; height: 100%"
-                          :src="item"
-                          :zoom-rate="1.2"
-                          :max-scale="7"
-                          :min-scale="0.2"
-                          :preview-src-list="[item]"
-                          show-progress
-                          fit="contain"
-                        />
-                      </div>
-                    </el-col>
-                  </el-row>
-                </el-form>
+                      <el-col :span="8">
+                        <el-form-item label="粮食等级">
+                          <el-input v-model="wensdform.lsdjmc" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="粮食数量（吨）">
+                          <el-input v-model="wensdform.kcsl" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="仓房外温（℃）">
+                          <el-input v-model="wensdform.cfww" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="仓房外湿（%）">
+                          <el-input v-model="wensdform.cfws" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="仓房内温（℃）">
+                          <el-input v-model="wensdform.cfnw" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="仓房内湿（%）">
+                          <el-input v-model="wensdform.cfns" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="粮食最高温（℃）">
+                          <el-input v-model="wensdform.lszgw" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="粮食最低温（℃）">
+                          <el-input v-model="wensdform.lszdw" />
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item label="粮食平均温（℃）">
+                          <el-input v-model="wensdform.lspjw" />
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                    <el-row :gutter="30">
+                      <el-col :span="8" v-for="(item, index) in wensdform.fileList" :key="index">
+                        <div class="image_preview">
+                          <el-image
+                            style="width: 100%; height: 100%"
+                            :src="item"
+                            :zoom-rate="1.2"
+                            :max-scale="7"
+                            :min-scale="0.2"
+                            :preview-src-list="[item]"
+                            show-progress
+                            fit="contain"
+                          />
+                        </div>
+                      </el-col>
+                    </el-row>
+                  </el-form>
+                </div>
               </div>
-            </div>
-            <div v-if="tabPosition == 'sy'">
-              <el-scrollbar style="height: 600px">
-                <div class="resettablewrap">
-                  <el-table
-                    :data="crkTableDataSy"
-                    :header-cell-class-name="'headerBg'"
-                    :row-class-name="tableRowClassName"
-                    highlight-current-row
-                  >
-                    <!-- <el-table-column
+              <div v-if="tabPosition == 'sy'">
+                <el-scrollbar style="height: 600px">
+                  <div class="resettablewrap">
+                    <el-table
+                      :data="crkTableDataSy"
+                      :header-cell-class-name="'headerBg'"
+                      :row-class-name="tableRowClassName"
+                      highlight-current-row
+                    >
+                      <!-- <el-table-column
                       type="index"
                       width="60"
                       label="序号"
@@ -454,50 +459,51 @@
                         {{ scope.$index + 1 }}
                       </template>
                     </el-table-column> -->
-                    <!-- <el-table-column prop="cksj" label="出库时间" width="120" align="center">
+                      <!-- <el-table-column prop="cksj" label="出库时间" width="120" align="center">
                       <template #default="scope">
                         {{ scope.row.cksj ? scope.row.cksj.slice(0, 10) : '' }}
                       </template>
                     </el-table-column> -->
-                    <el-table-column prop="rkjz" label="入库净重(吨)" align="center" />
-                    <el-table-column prop="rksf" label="入库水分(%)" align="center" />
-                    <el-table-column prop="rkzz" label="入库杂质(吨)" align="center" />
-                    <el-table-column prop="ckjz" label="出库净重(吨)" align="center" />
-                    <el-table-column prop="cksf" label="出库水分(%)" align="center" />
-                    <el-table-column prop="ckzz" label="出库杂质(%)" align="center" />
-                    <el-table-column prop="sfzc" label="损溢是否正常" align="center">
-                      <template #default="scope">
-                        <span v-if="scope.row.sfzc === 1">正常</span>
-                        <span v-if="scope.row.sfzc === 0">不正常</span>
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="szjl" label="水杂减量(吨)" align="center" />
-                    <el-table-column
-                      prop="zrhde"
-                      label="自然损耗定额(吨)"
-                      width="120"
-                      align="center"
+                      <el-table-column prop="rkjz" label="入库净重(吨)" align="center" />
+                      <el-table-column prop="rksf" label="入库水分(%)" align="center" />
+                      <el-table-column prop="rkzz" label="入库杂质(吨)" align="center" />
+                      <el-table-column prop="ckjz" label="出库净重(吨)" align="center" />
+                      <el-table-column prop="cksf" label="出库水分(%)" align="center" />
+                      <el-table-column prop="ckzz" label="出库杂质(%)" align="center" />
+                      <el-table-column prop="sfzc" label="损溢是否正常" align="center">
+                        <template #default="scope">
+                          <span v-if="scope.row.sfzc === 1">正常</span>
+                          <span v-if="scope.row.sfzc === 0">不正常</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="szjl" label="水杂减量(吨)" align="center" />
+                      <el-table-column
+                        prop="zrhde"
+                        label="自然损耗定额(吨)"
+                        width="120"
+                        align="center"
+                      />
+                      <el-table-column prop="chsl" label="超耗数量(吨)" align="center" />
+                      <el-table-column prop="sysl" label="损溢数量(吨)" align="center" />
+                      <!-- <el-table-column prop="syyy" label="损溢原因" align="center" /> -->
+                    </el-table>
+                    <el-pagination
+                      @size-change="handleSizeChangeSy"
+                      @current-change="handleCurrentChangeSy"
+                      :page-sizes="[10, 20, 30, 40]"
+                      layout="->,total, sizes, prev, pager, next, jumper"
+                      :current-page="pageSy.pageNo"
+                      :page-size="pageSy.pageSize"
+                      :total="pageSy.total"
                     />
-                    <el-table-column prop="chsl" label="超耗数量(吨)" align="center" />
-                    <el-table-column prop="sysl" label="损溢数量(吨)" align="center" />
-                    <!-- <el-table-column prop="syyy" label="损溢原因" align="center" /> -->
-                  </el-table>
-                  <el-pagination
-                    @size-change="handleSizeChangeSy"
-                    @current-change="handleCurrentChangeSy"
-                    :page-sizes="[10, 20, 30, 40]"
-                    layout="->,total, sizes, prev, pager, next, jumper"
-                    :current-page="pageSy.pageNo"
-                    :page-size="pageSy.pageSize"
-                    :total="pageSy.total"
-                  />
-                </div>
-              </el-scrollbar>
+                  </div>
+                </el-scrollbar>
+              </div>
             </div>
           </div>
-        </div>
-      </el-col>
-    </el-row>
+        </el-col>
+      </el-row>
+    </div>
 
     <div class="dialog_file">
       <el-dialog title="" v-model="Dialogfiles" width="1050px" top="15vh">
@@ -873,22 +879,33 @@ onMounted(() => {
   font-family: 'Pangmen';
   src: url('@/assets/font/庞门正道标题体.ttf');
 }
-.cf_content {
+.container-page {
   width: 100%;
   height: 100%;
+  overflow: auto;
   background: url('@/assets/ksh/home/bj.jpg') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
 }
 .header {
-  width: 100%;
+  width: 1920px;
   height: 110px;
 }
+.container-body {
+  width: 1920px;
+  height: 970px;
+}
+@media (min-width: 1920px) and (min-height: 1080px) {
+  .container-page {
+    overflow: hidden;
+  }
+}
 
 .kqxx_box {
   width: 100%;
   // height: 88vh;
-  height: 100%;
+  // height: 100%;
+  height: 930px;
   padding: 10px 15px;
 }
 .kqxx_box .box_khxx {
@@ -992,11 +1009,11 @@ onMounted(() => {
 }
 
 .cfxx_content {
-  padding: 5px 20px 0;
+  padding: 25px 20px 0;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  height: 90%;
+  height: 95%;
 }
 .cfxx_content .box_content {
   display: flex;

src/views/VisualDisplay/src/pages/compontent/Map2.vue

@@ -7,7 +7,7 @@
         :xyPostion="xyPostion"
         :totalData="totalData"
       />
-      <div ref="MapCharts" style="width: 100%; height: 70vh"></div>
+      <div ref="MapCharts" style="width: 100%; height: 75vh"></div>
       <div v-if="mapName == '全国'" class="nanhai"></div>
 
       <div class="back" v-if="isBack" @click="back">
@@ -247,7 +247,7 @@ const initEcharts = (geoJson, name, chart) => {
     geo: [
       {
         layoutCenter: ['50%', '60%'], //位置
-        layoutSize: '230%', //大小
+        layoutSize: '220%', //大小
         show: true,
         map: name,
         roam: true, //是否开启缩放和平移
@@ -570,7 +570,7 @@ onBeforeUnmount(() => {
       //background: pink;
       position: absolute;
       right: 0;
-      bottom: 100px;
+      bottom: 20%;
       background: url('@/assets/map/南海.png') 100% 100% no-repeat;
       background-size: 100% 100%;
       cursor: pointer;

src/views/VisualDisplay/src/pages/compontent/cbkc.vue

@@ -26,7 +26,7 @@
           :key="index"
         >
           <span class="item_color" :style="{ background: item.color }"></span>
-          <span class="item_name">{{ item.name }}</span>
+          <span class="item_name" :title="item.name">{{ item.name }}</span>
           <span class="item_percentage">{{ item.percentage }}</span>
           <span class="item_value">{{ item.value }}</span>
         </div>
@@ -53,7 +53,7 @@
           :key="index"
         >
           <span class="item_color" :style="{ background: item.color }"></span>
-          <span class="item_name">{{ item.name }}</span>
+          <span class="item_name" :title="item.name">{{ item.name }}</span>
           <span class="item_percentage">{{ item.percentage }}</span>
           <span class="item_value">{{ item.value }}</span>
           <span class="item_line" :style="{ background: item.color }"></span>
@@ -134,7 +134,7 @@ const getPieData = async () => {
       return {
         ...item,
         color: colorList.value[index],
-        percentage: "0%"
+        percentage: '0%'
       }
     }
   })
@@ -255,6 +255,18 @@ const chartRander2 = () => {
   })
 }
 
+// span长度检测
+const setClass = () => {
+  const spanElement = document.querySelectorAll('.title_all')
+  const spanWidth = spanElement[0].offsetWidth
+  console.log(spanElement, 'spanWidth-==========')
+
+  if (spanWidth > 284) {
+    spanElement[0].classList.add('title_sp')
+    spanElement[1].classList.add('title_sp')
+  }
+}
+
 watch(
   () => props.xzqhCode,
   () => {
@@ -270,6 +282,9 @@ onMounted(() => {
     getPieData()
     getPieDataShnf()
   }
+  setTimeout(() => {
+    setClass()
+  }, 200)
 })
 </script>
 <style scoped lang="scss">
@@ -285,8 +300,8 @@ onMounted(() => {
 }
 .cbkc_box {
   // padding: 0 0 0 55px;
-  height: 100%;
   width: 95%;
+  height: 930px;
   // background: pink;
   background: url('@/assets/ksh/home/right-bj.png') no-repeat;
   background-size: 100% 100%;
@@ -371,6 +386,9 @@ onMounted(() => {
 .title_left .title_kq {
   font-size: 16px;
 }
+.title_left .title_sp {
+  line-height: 22px !important;
+}
 .cbkc_box .echarts_box {
   width: 100%;
   height: 198px;
@@ -418,12 +436,12 @@ onMounted(() => {
   flex-wrap: wrap;
   // justify-content: space-around;
   .list_item {
-    width: 40%;
+    width: 44%;
     height: 30px;
     line-height: 30px;
     margin-left: 5%;
     display: flex;
-    justify-content: space-around;
+    // justify-content: space-around;
     align-items: center;
     font-size: 12px;
     // font-weight: 700;
@@ -438,8 +456,12 @@ onMounted(() => {
     .item_name {
       flex: 1;
       color: #e9f3f9;
-      margin: 0 15px;
+      margin-left: 25px;
       font-size: 16px;
+      text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .item_percentage {
       flex: 1;

src/views/VisualDisplay/src/pages/index.vue

@@ -3,177 +3,179 @@
     <div class="header">
       <Header />
     </div>
-    <el-row style="height: 85%" :gutter="10">
-      <el-col :span="18">
-        <el-form
-          style="padding-left: 20px; margin-top: 15px"
-          inline
-          ref="mapFormRef"
-          :model="mapFormData"
-        >
-          <el-form-item label="日期" name="cxrq">
-            <el-date-picker
-              style="width: 160px"
-              v-model="mapFormData.cxrq"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              clearable
-            />
-          </el-form-item>
-          <el-form-item label="行政区划" name="xzqhdm">
-            <el-select
-              style="width: 160px"
-              v-model="mapFormData.xzqhdm"
-              placeholder="请选择"
-              clearable
-            >
-              <el-option
-                v-for="item in xzqhdmOptions"
-                :key="item.areaCode"
-                :label="item.areaName"
-                :value="item.areaCode"
+    <div class="container-body">
+      <el-row style="height: 100%" :gutter="10">
+        <el-col :span="18">
+          <el-form
+            style="padding-left: 20px; margin-top: 15px"
+            inline
+            ref="mapFormRef"
+            :model="mapFormData"
+          >
+            <el-form-item label="日期" name="cxrq">
+              <el-date-picker
+                style="width: 160px"
+                v-model="mapFormData.cxrq"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                clearable
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="粮食品种" name="lspzmc">
-            <el-select
-              style="width: 160px"
-              v-model="mapFormData.lspzmc"
-              placeholder="请选择"
-              clearable
-            >
-              <el-option
-                v-for="item in lspzOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="粮食等级" name="lsdjdm">
-            <el-select
-              style="width: 160px"
-              v-model="mapFormData.lsdjdm"
-              placeholder="请选择"
-              :options="lsdjOptions"
-              clearable
-            >
-              <el-option
-                v-for="item in lsdjOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="库区名称" name="kqmc">
-            <!-- <el-input
+            </el-form-item>
+            <el-form-item label="行政区划" name="xzqhdm">
+              <el-select
+                style="width: 160px"
+                v-model="mapFormData.xzqhdm"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option
+                  v-for="item in xzqhdmOptions"
+                  :key="item.areaCode"
+                  :label="item.areaName"
+                  :value="item.areaCode"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="粮食品种" name="lspzmc">
+              <el-select
+                style="width: 160px"
+                v-model="mapFormData.lspzmc"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option
+                  v-for="item in lspzOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="粮食等级" name="lsdjdm">
+              <el-select
+                style="width: 160px"
+                v-model="mapFormData.lsdjdm"
+                placeholder="请选择"
+                :options="lsdjOptions"
+                clearable
+              >
+                <el-option
+                  v-for="item in lsdjOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="库区名称" name="kqmc">
+              <!-- <el-input
               style="width: 160px"
               v-model="mapFormData.kqmc"
               placeholder="请输入"
               clearable
             /> -->
 
-            <el-select
-              style="width: 160px"
-              value-key="id"
-              v-model="mapFormData.kqmc"
-              filterable
-              remote
-              :remote-method="remoteMethod"
-              placeholder="请选择"
-              @change="handlerGetkqmc"
-              clearable
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.kqid"
-                :label="item.kqmc"
-                :value="item.kqmc"
-              />
-            </el-select>
-          </el-form-item>
-          <el-button type="primary" class="primarySele" @click="loadData(1)">查询</el-button>
-          <!-- <el-button class="snowy-buttom-left" @click="() => reset()">重置</el-button> -->
-        </el-form>
-        <div class="map-area">
-          <el-row style="height: 100%" :gutter="10">
-            <el-col style="padding-left: 20px" :span="7">
-              <div class="datacard">
-                <div class="datacard-title">
-                  <span>交收库粮食储备情况</span>
-                </div>
-                <div class="datacard-item">
-                  <div class="item-left">
-                    <span class="item-icon1"></span>
+              <el-select
+                style="width: 160px"
+                value-key="id"
+                v-model="mapFormData.kqmc"
+                filterable
+                remote
+                :remote-method="remoteMethod"
+                placeholder="请选择"
+                @change="handlerGetkqmc"
+                clearable
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.kqid"
+                  :label="item.kqmc"
+                  :value="item.kqmc"
+                />
+              </el-select>
+            </el-form-item>
+            <el-button type="primary" class="primarySele" @click="loadData(1)">查询</el-button>
+            <!-- <el-button class="snowy-buttom-left" @click="() => reset()">重置</el-button> -->
+          </el-form>
+          <div class="map-area">
+            <el-row style="height: 100%" :gutter="10">
+              <el-col style="padding-left: 20px" :span="7">
+                <div class="datacard">
+                  <div class="datacard-title">
+                    <span>交收库粮食储备情况</span>
                   </div>
-                  <div class="item-right">
-                    <span class="item-title">交收库点（个）</span>
-                    <span class="item-content">{{ datacard.cckd }}</span>
+                  <div class="datacard-item">
+                    <div class="item-left">
+                      <span class="item-icon1"></span>
+                    </div>
+                    <div class="item-right">
+                      <span class="item-title">交收库点（个）</span>
+                      <span class="item-content">{{ datacard.cckd }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="datacard-item">
-                  <div class="item-left">
-                    <span class="item-icon2"></span>
+                  <div class="datacard-item">
+                    <div class="item-left">
+                      <span class="item-icon2"></span>
+                    </div>
+                    <div class="item-right">
+                      <span class="item-title">仓房个数（个）</span>
+                      <span class="item-content">{{ datacard.cfsl }}</span>
+                    </div>
                   </div>
-                  <div class="item-right">
-                    <span class="item-title">仓房个数（个）</span>
-                    <span class="item-content">{{ datacard.cfsl }}</span>
+                  <div class="datacard-item">
+                    <div class="item-left">
+                      <span class="item-icon3"></span>
+                    </div>
+                    <div class="item-right">
+                      <span class="item-title">仓容总量（吨）</span>
+                      <span class="item-content">{{ datacard.crzl }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="datacard-item">
-                  <div class="item-left">
-                    <span class="item-icon3"></span>
+                  <div class="datacard-item">
+                    <div class="item-left">
+                      <span class="item-icon4"></span>
+                    </div>
+                    <div class="item-right">
+                      <span class="item-title">出库量（吨）</span>
+                      <span class="item-content">{{ datacard.ckl }}</span>
+                    </div>
                   </div>
-                  <div class="item-right">
-                    <span class="item-title">仓容总量（吨）</span>
-                    <span class="item-content">{{ datacard.crzl }}</span>
+                  <div class="datacard-item">
+                    <div class="item-left">
+                      <span class="item-icon5"></span>
+                    </div>
+                    <div class="item-right">
+                      <span class="item-title">入库量（吨）</span>
+                      <span class="item-content">{{ datacard.rkl }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="datacard-item">
-                  <div class="item-left">
-                    <span class="item-icon4"></span>
-                  </div>
-                  <div class="item-right">
-                    <span class="item-title">出库量（吨）</span>
-                    <span class="item-content">{{ datacard.ckl }}</span>
-                  </div>
-                </div>
-                <div class="datacard-item">
-                  <div class="item-left">
-                    <span class="item-icon5"></span>
-                  </div>
-                  <div class="item-right">
-                    <span class="item-title">入库量（吨）</span>
-                    <span class="item-content">{{ datacard.rkl }}</span>
-                  </div>
-                </div>
-                <div class="datacard-item">
-                  <div class="item-left">
-                    <span class="item-icon6"></span>
-                  </div>
-                  <div class="item-right">
-                    <span class="item-title">储备库存（万吨）</span>
-                    <span class="item-content">{{ datacard.kcsl }}</span>
+                  <div class="datacard-item">
+                    <div class="item-left">
+                      <span class="item-icon6"></span>
+                    </div>
+                    <div class="item-right">
+                      <span class="item-title">储备库存（万吨）</span>
+                      <span class="item-content">{{ datacard.kcsl }}</span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </el-col>
-            <el-col :span="17">
-              <Map
-                :xzqhNum="xzqhNum"
-                :xzqhName="xzqhName"
-                :mapFormData="mapFormData"
-                @map-mounted="getMapList"
-              />
-            </el-col>
-          </el-row>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <Cbkc :xzqhName="xzqhName" :xzqhCode="xzqhCode" :kqid="kqid" :isBack="isBack" />
-      </el-col>
-    </el-row>
+              </el-col>
+              <el-col :span="17">
+                <Map
+                  :xzqhNum="xzqhNum"
+                  :xzqhName="xzqhName"
+                  :mapFormData="mapFormData"
+                  @map-mounted="getMapList"
+                />
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <Cbkc :xzqhName="xzqhName" :xzqhCode="xzqhCode" :kqid="kqid" :isBack="isBack" />
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -361,7 +363,8 @@ onMounted(() => {
 }
 .datacard {
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
+  height: 860px;
   background: url('@/assets/ksh/home/left-bj.png') no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -383,12 +386,12 @@ onMounted(() => {
 }
 .datacard-item {
   width: 100%;
-  height: 98px;
+  height: 99px;
   background: url('@/assets/ksh/home/left-kuang-bj.png') no-repeat;
   background-size: 100% 100%;
   font-size: 18px;
   display: flex;
-  margin-top: 15px;
+  margin-top: 20px;
 }
 .datacard-item .item-left {
   flex: 35%;
@@ -490,19 +493,31 @@ onMounted(() => {
   -webkit-text-fill-color: transparent;
 }
 .container-page {
+  /* width: 1920px !important;
+  height: 1080px !important; */
   width: 100%;
   height: 100%;
+  overflow: auto;
   background: url('@/assets/ksh/home/bj.jpg') no-repeat;
   background-size: 100% 100%;
 }
 .header {
-  width: 100%;
+  width: 1920px;
   height: 110px;
   text-align: center;
   font-size: 24px;
   font-weight: 700;
   font-family: '黑体';
 }
+.container-body {
+  width: 1920px;
+  height: 970px;
+}
+@media (min-width: 1920px) and (min-height: 1080px) {
+  .container-page {
+    overflow: hidden;
+  }
+}
 
 .primarySele {
   background: linear-gradient(to bottom, #081f4e, #1b5198);

src/views/VisualDisplay/src/pages/kq/index.vue

@@ -1,128 +1,132 @@
 <template>
-  <div class="kq_content">
+  <div class="container-page">
     <div class="header">
       <Header />
     </div>
-    <el-row style="height: 85%" :gutter="20">
-      <el-col :span="6">
-        <div class="kqxx_box">
-          <div class="box_title">
-            <span class="title-top">仓房列表</span>
-          </div>
-          <div class="box_table">
-            <el-table
-              :highlight-current-row="false"
-              :row-class-name="tableRowClassName"
-              class="eltable"
-              stripe
-              :header-cell-style="{ background: 'transparent' }"
-              :data="tableData"
-              style="width: 100%; height: 100%"
-              height="100%"
-              @row-click="rowClick"
-            >
-              <el-table-column prop="cfmc" align="center" label="仓房名称" />
-              <el-table-column prop="ccsl" align="center" label="存储量(吨)" />
-              <el-table-column prop="sfjgc" align="center" label="交收仓" />
-            </el-table>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <div class="map-area">
-          <div class="map_top">
-            <div class="kqxx_title">
-              <span class="kqxx_title_top">库区信息</span>
-              <!-- <el-button type="primary" plain class="title_btn" @click="back()">返回</el-button> -->
-              <div class="title_btn2" @click="back()"><span>返回</span> </div>
+    <div class="container-body">
+      <el-row style="height: 100%" :gutter="20">
+        <el-col :span="6">
+          <div class="kqxx_box">
+            <div class="box_title">
+              <span class="title-top">仓房列表</span>
             </div>
-            <div class="kqxx_content">
-              <div class="box_item">
-                <div class="box_icon icon_kq1"></div>
-                <div class="box_content">
-                  <span class="span_left">库区名称：</span>
-                  <span class="span_right span_special" :title="formData.kqmc">{{
-                    formData.kqmc
-                  }}</span>
-                </div>
+            <div class="box_table">
+              <el-table
+                :highlight-current-row="false"
+                :row-class-name="tableRowClassName"
+                class="eltable"
+                stripe
+                :header-cell-style="{ background: 'transparent' }"
+                :data="tableData"
+                style="width: 100%; height: 100%"
+                height="100%"
+                @row-click="rowClick"
+              >
+                <el-table-column prop="cfmc" align="center" label="仓房名称" />
+                <el-table-column prop="ccsl" align="center" label="存储量(吨)" />
+                <el-table-column prop="sfjgc" align="center" label="交收仓" />
+              </el-table>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="map-area">
+            <div class="map_top">
+              <div class="kqxx_title">
+                <span class="kqxx_title_top">库区信息</span>
+                <!-- <el-button type="primary" plain class="title_btn" @click="back()">返回</el-button> -->
+                <div class="title_btn2" @click="back()"><span>返回</span> </div>
               </div>
-              <div class="box_item">
-                <div class="box_icon icon_kq2"></div>
-                <div class="box_content">
-                  <span class="span_left">库区编码：</span>
-                  <span class="span_right span_special2" :title="formData.kqbm">{{
-                    formData.kqbm
-                  }}</span>
+              <div class="kqxx_content">
+                <div class="box_item">
+                  <div class="box_icon icon_kq1"></div>
+                  <div class="box_content">
+                    <span class="span_left">库区名称：</span>
+                    <span class="span_right span_special" :title="formData.kqmc">{{
+                      formData.kqmc
+                    }}</span>
+                  </div>
                 </div>
-              </div>
-              <div class="box_item">
-                <div class="box_icon icon_kq3"></div>
-                <div class="box_content">
-                  <span class="span_left">单位名称：</span>
-                  <span class="span_right span_special" :title="formData.qymc">{{
-                    formData.qymc
-                  }}</span>
+                <div class="box_item">
+                  <div class="box_icon icon_kq2"></div>
+                  <div class="box_content">
+                    <span class="span_left">库区编码：</span>
+                    <span class="span_right span_special2" :title="formData.kqbm">{{
+                      formData.kqbm
+                    }}</span>
+                  </div>
                 </div>
-              </div>
-              <div class="box_item">
-                <div class="box_icon icon_kq4"></div>
-                <div class="box_content">
-                  <span class="span_left span_tyshxydm">统一社会信用代码：</span>
-                  <span class="span_right" :title="formData.tyshxydm">{{ formData.tyshxydm }}</span>
+                <div class="box_item">
+                  <div class="box_icon icon_kq3"></div>
+                  <div class="box_content">
+                    <span class="span_left">单位名称：</span>
+                    <span class="span_right span_special" :title="formData.qymc">{{
+                      formData.qymc
+                    }}</span>
+                  </div>
                 </div>
-              </div>
-              <div class="box_item">
-                <div class="box_icon icon_kq5"></div>
-                <div class="box_content">
-                  <span class="span_left">仓房数量：</span>
-                  <span class="span_right" :title="formData.cfsl">{{ formData.cfsl }}个</span>
+                <div class="box_item">
+                  <div class="box_icon icon_kq4"></div>
+                  <div class="box_content">
+                    <span class="span_left span_tyshxydm">统一社会信用代码：</span>
+                    <span class="span_right" :title="formData.tyshxydm">{{
+                      formData.tyshxydm
+                    }}</span>
+                  </div>
                 </div>
-              </div>
-              <!-- <div class="box_item">
+                <div class="box_item">
+                  <div class="box_icon icon_kq5"></div>
+                  <div class="box_content">
+                    <span class="span_left">仓房数量：</span>
+                    <span class="span_right" :title="formData.cfsl">{{ formData.cfsl }}个</span>
+                  </div>
+                </div>
+                <!-- <div class="box_item">
                 <div class="box_icon icon_kq6"></div>
                 <div class="box_content">
                   <span class="span_left">油罐数量：</span>
                   <span class="span_right" :title="formData.ygs">{{ formData.ygs }}个</span>
                 </div>
               </div> -->
-              <div class="box_item">
-                <div class="box_icon icon_kq8"></div>
-                <div class="box_content">
-                  <span class="span_left">财务情况：</span>
-                  <span class="span_right span_detail" @click="getCwxx"> 详情 </span>
+                <div class="box_item">
+                  <div class="box_icon icon_kq8"></div>
+                  <div class="box_content">
+                    <span class="span_left">财务情况：</span>
+                    <span class="span_right span_detail" @click="getCwxx"> 详情 </span>
+                  </div>
                 </div>
-              </div>
-              <!-- <div class="box_item">
+                <!-- <div class="box_item">
                 <div class="box_icon icon_kq7"></div>
                 <div class="box_content">
                   <span class="span_left">设计仓容：</span>
                   <span class="span_right" :title="formData.crzl">{{ formData.crzl }}吨</span>
                 </div>
               </div> -->
+              </div>
             </div>
-          </div>
-          <div class="map_bottom">
-            <div class="kqxx_title">
-              <span class="kqxx_title_top">{{ formData.kqmc }}平面图</span>
-              <div class="title_btn" @click="openVideo"><span>视频监控</span> </div>
-            </div>
-            <div class="img_content">
-              <!-- <img src="@/assets/ksh/kq/kq.png" alt="平面图" /> -->
-              <img :src="formData.ljdz" alt="平面图" />
+            <div class="map_bottom">
+              <div class="kqxx_title">
+                <span class="kqxx_title_top">{{ formData.kqmc }}平面图</span>
+                <div class="title_btn" @click="openVideo"><span>视频监控</span> </div>
+              </div>
+              <div class="img_content">
+                <!-- <img src="@/assets/ksh/kq/kq.png" alt="平面图" /> -->
+                <img :src="formData.ljdz" alt="平面图" />
+              </div>
             </div>
           </div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <Cbkc
-          :xzqhName="xzqhName"
-          :xzqhCode="xzqhCode"
-          :kqid="kqid"
-          :kqName="kqName"
-          :isBack="isBack"
-        />
-      </el-col>
-    </el-row>
+        </el-col>
+        <el-col :span="6">
+          <Cbkc
+            :xzqhName="xzqhName"
+            :xzqhCode="xzqhCode"
+            :kqid="kqid"
+            :kqName="kqName"
+            :isBack="isBack"
+          />
+        </el-col>
+      </el-row>
+    </div>
 
     <div class="dialog_splb">
       <el-dialog title="" v-model="Dialogvideo" width="1050px" top="15vh">
@@ -583,21 +587,31 @@ onMounted(() => {
   font-family: 'Pangmen';
   src: url('@/assets/font/庞门正道标题体.ttf');
 }
-.kq_content {
+.container-page {
   width: 100%;
   height: 100%;
+  overflow: auto;
   background: url('@/assets/ksh/home/bj.jpg') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
 }
 .header {
-  width: 100%;
+  width: 1920px;
   height: 110px;
 }
+.container-body {
+  width: 1920px;
+  height: 970px;
+}
+@media (min-width: 1920px) and (min-height: 1080px) {
+  .container-page {
+    overflow: hidden;
+  }
+}
 .kqxx_box {
   width: 95%;
   margin-left: 5%;
-  height: 80vh;
+  height: 930px;
   padding: 0 10px;
   background: url('@/assets/ksh/kq/left-bj.png') no-repeat;
   background-size: 100% 100%;
@@ -634,12 +648,13 @@ onMounted(() => {
 }
 .kqxx_box .box_table {
   width: 100%;
-  height: 100%;
+  height: 90%;
+  // padding-bottom: 30px;
 }
 
 .map-area {
   margin-top: 10px;
-  height: 110%;
+  height: 100%;
 }
 .map-area .map_top {
   width: 100%;