feat(): 闸孔运行情况模块开发

src/service/apiurl.js

@@ -183,6 +183,9 @@ const apiurl = {
     }
   },
   gcyx: {
+    yxqk: {
+      list:service_ykz + '/gateInfo/list'
+    },
     jbqk: {
       list: service_ykz + '/projectBasicInfo/list',
       edit: service_ykz + '/projectBasicInfo/update',

src/views/Gcyx/InformationSearch/RunSituation/index.js

@@ -1,52 +1,94 @@
 import React, {  useMemo,useEffect,useState } from 'react';
-import { Table } from 'antd';
+import { Table,Space } from 'antd';
 import apiurl from '../../../../service/apiurl';
-import usePageTable from '../../../../components/crud/usePageTable2';
+import { httppost2 } from '../../../../utils/request';
-import { createCrudService } from '../../../../components/crud/_';
 import clsx from 'clsx'
 import './index.less'
 const Page = () => {
-  const types = {
+
-    0: "防汛物资",
+
-    1: '食品和饮水',
+  const StatusPower = ({ val }) => {
-    2: "防护用具",
+    return (
-    3: "照明设备",
+      <Space>
-    4: "金属材料类",
+        <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: val ? 'yellowgreen' : 'red', display: 'inline-block' }} />
-    5:"其它",
+        <span>{val ? '正常' : '消失'}</span>
+      </Space>
+    )
   }
-  const [searchVal, setSearchVal] = useState({})
+
-  const columns = [
+  const StatusFault = ({ val }) => {
-    { title: '闸孔编号', key: 'inx', dataIndex: 'inx', width: 80},
+    const v = !val;
-    {
+    return (
-      title: '闸门电源状态', key: 'name', dataIndex: 'name', width: 150,
+      <Space>
-      render: (v) => <div style={{display:'flex',alignItems:'center',columnGap:10}}>
+        <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: v ? 'yellowgreen' : 'red', display: 'inline-block' }} />
-        <span className={clsx({noOpen_style:true,open_style:true})}></span>
+        <span>{v ? '正常' : '异常'}</span>
-        <span>正常</span>
+      </Space>
+    )
+  }
+
+  const Status1 = ({ val }) => {
+    if (val === undefined) {
+      return null;
+    }
+    return (
+      <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: val ? 'yellowgreen' : undefined, display: 'inline-block' }}>
       </div>
-     },
+    )
-    { title: '闸门上升中', key: 'adress', dataIndex: 'adress', width: 150},
+  }
-    { title: '闸门下降中', key: 'type', dataIndex: 'type', width: 150},
+  const columns = [
-    { title: '闸门故障状态', key: 'type', dataIndex: 'type', width: 150},
+    { title: '闸孔编号', key: 'gateNumber', dataIndex: 'gateNumber', width: 80},
-    { title: '上限位', key: 'type', dataIndex: 'type', width: 140},
-    { title: '下限位', key: 'type', dataIndex: 'type', width: 140},
-    { title: '实时开度(m)', key: 'type', dataIndex: 'type', width: 140},
     {
-      title: '监测时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 150,
+      title: '闸门电源状态', key: 'powerSignal', dataIndex: 'powerSignal', width: 150,
+      // render: (v) => <div style={{display:'flex',alignItems:'center',columnGap:10}}>
+      //   <span className={clsx({noOpen_style:true,open_style:true})}></span>
+      //   <span>正常</span>
+      // </div>
+      render: (v) => <StatusPower val={!v} />
+     },
+    {
+      title: '闸门上升中', key: 'openingSignal', dataIndex: 'openingSignal', width: 150,
+      render: (v) => <Status1 val={v} />
+    },
+    {
+      title: '闸门下降中', key: 'closeingSignal', dataIndex: 'closeingSignal', width: 150,
+      render: (v) => <Status1 val={v} />
+    },
+    {
+      title: '闸门故障状态', key: 'errorSignal', dataIndex: 'errorSignal', width: 150,
+      render: (v) => <StatusFault val={v} />
+    },
+    {
+      title: '上限位', key: 'openedSignal', dataIndex: 'openedSignal', width: 140,
+      render: (v) => <Status1 val={v} />
+    },
+    {
+      title: '下限位', key: 'closedSignal', dataIndex: 'closedSignal', width: 140,
+      render: (v) => <Status1 val={v} />
+      
+    },
+    { title: '实时开度(m)', key: 'realAperture', dataIndex: 'realAperture', width: 140},
+    {
+      title: '监测时间', key: 'tm', dataIndex: 'tm', width: 150,
     },
   ];
 
   
   const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
 
-  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
+ const [gateList, setGateList] = useState([])
-  useEffect(()=>{
+  const getGateStatus = async () => {
-    const params = {
+    try {
-      search: {
+      const res = await httppost2(apiurl.gcyx.yxqk.list)
-        ...searchVal,
+      if (res.code == 200) {
+        setGateList(res.data)
       }
-    };
+    } catch (error) {
-    search(params)
+      console.log(error);
-  }, [searchVal])
+    }
+  }
+  useEffect(() => {
+    getGateStatus();
+  }, []);
   
   
   return (
@@ -54,7 +96,13 @@ const Page = () => {
       <div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
         <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
           <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
-          <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
+            <Table
+              columns={columns}
+              rowKey="stcd"
+              pagination={false}
+              dataSource={gateList}
+              scroll={{ x: width, y: "calc( 100vh - 400px )" }}
+            />
           </div>
         </div>
       </div>

src/views/Home/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { useNavigate } from 'react-router';
 import {
-  RightCircleFilled, LeftCircleFilled
+  RightCircleFilled, LeftCircleFilled, BarsOutlined
 } from '@ant-design/icons';
 import autofit from 'autofit.js'
 import Zmjk from "./zmjk"
@@ -15,7 +15,7 @@ import apiurl from '../../service/apiurl';
 import { useDispatch, useSelector } from 'react-redux';
 import HFivePlayer from '../../components/video1Plary';
 import moment from 'moment';
-import {loadMenu,loadRole} from '../../models/auth/_'
+import { loadMenu, loadRole } from '../../models/auth/_'
 const MenuTitleCard = ({ key, title }) => {
   return (
     <div className='menuItem_style' key={key} title={title}>
@@ -26,11 +26,13 @@ const MenuTitleCard = ({ key, title }) => {
 export default function Home() {
   const menu = useSelector((state) => state.auth.menu);
   const [title, setTitle] = useState([])
+  const [showTabLeft, setShowTabLeft] = useState(false)
+  const [showTabRight, setShowTabRight] = useState(false)
   // const title = menu.map(item => ({ title: item.menuName, key: item.path || item.redirect }))
   const jcdType = {
     0: "闸后流量",
     2: '闸前水位',
-    3:'闸后水位'
+    3: '闸后水位'
   }
   const types1 = {
     0: "闸后流量(m³/s)",
@@ -66,12 +68,12 @@ export default function Home() {
     try {
       const res = await httppost2(apiurl.jcsj.jcsj.realData)
       if (res.code == 200) {
-      const uptData = res.data.map(item => ({
+        const uptData = res.data.map(item => ({
           ...item,
           name: types1[item.type],
-          value:item.val,
+          value: item.val,
-          time:item.tm
+          time: item.tm
-      }))
+        }))
         setRealData(uptData)
         getHistoryData(uptData[0])
       }
@@ -82,88 +84,88 @@ export default function Home() {
 
   const [historyList, setHistoryList] = useState([])
 
-    const pxOptions = useMemo(() => {
+  const pxOptions = useMemo(() => {
-      if (historyList) {
+    if (historyList) {
-        return options(historyList)
+      return options(historyList)
-      } else {
+    } else {
-        return options([])
+      return options([])
-      }
+    }
-    }, [historyList])
+  }, [historyList])
 
   const getHistoryData = async (val) => {
-      const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
-      const end = moment().format('YYYY-MM-DD 23:59:59')
+    const end = moment().format('YYYY-MM-DD 23:59:59')
-      let params = {
+    let params = {
-        pageSo: {
+      pageSo: {
-          pageSize: 999,
+        pageSize: 999,
-          pageNumber:1
+        pageNumber: 1
-          },
+      },
-          type:val.type,
+      type: val.type,
-          dateTimeRangeSo:{
+      dateTimeRangeSo: {
-            start,
+        start,
-            end
+        end
-          }
-        }
-        try {
-          const res = await httppost2(apiurl.jcsj.jcsj.historyList,params)
-          if (res.code == 200) {
-            setHistoryList(res.data)
-          }
-        } catch (error) {
-          console.log(error);
-        }
       }
+    }
+    try {
+      const res = await httppost2(apiurl.jcsj.jcsj.historyList, params)
+      if (res.code == 200) {
+        setHistoryList(res.data)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
   //安全监测数据 
   const [safeData, setSafeData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: "SY01", dm: '1#断面', kpa: 2749, time: '2024-08-15 15:00:00' })))
   //操作日志 
   const [operateData, setOperateData] = useState([])
   const getLogData = async () => {
-    const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
     const end = moment().format('YYYY-MM-DD 23:59:59')
     let params = {
       pageSo: {
         pageSize: 999,
-        pageNumber:1
+        pageNumber: 1
-        },
+      },
-        dateTimeRangeSo:{
+      dateTimeRangeSo: {
-          start,
+        start,
-          end
+        end
-        }
-      }
-      try {
-        const res = await httppost2(apiurl.gcyx.czrz.page, params)
-        if (res.code == 200) {
-          setOperateData(res.data?.records)
-        }
-      } catch (error) {
-        console.log(error);
       }
     }
+    try {
+      const res = await httppost2(apiurl.gcyx.czrz.page, params)
+      if (res.code == 200) {
+        setOperateData(res.data?.records)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
 
   //报警信息
   const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
   const getPoliceData = async (val) => {
-    const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
     const end = moment().format('YYYY-MM-DD 23:59:59')
     let params = {
       pageSo: {
         pageSize: 999,
-        pageNumber:1
+        pageNumber: 1
-        },
+      },
-        dateTimeRangeSo:{
+      dateTimeRangeSo: {
-          start,
+        start,
-          end
+        end
-        }
-      }
-      try {
-        const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page,params)
-        if (res.code == 200) {
-          setPoliceData(res.data.records)
-        }
-      } catch (error) {
-        console.log(error);
       }
     }
+    try {
+      const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page, params)
+      if (res.code == 200) {
+        setPoliceData(res.data.records)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
 
 
   const navigate = useNavigate();
@@ -246,141 +248,174 @@ export default function Home() {
       <div className='content-box'>
         <Zmjk />
       </div>
-      <div className='content-left'>
+      <div style={{
-        {/* 工程简介 */}
+        display: "flex",
-        <div className='project-introduce'>
+        alignItems: "center",
-          <div className='project-title'>工程简介</div>
+        justifyContent: "center",
-          <div className='project-content'>
+        width: 25,
-            <img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/them.jpg`}></img>
+        height: 50,
-            盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
+        backgroundColor: "#3b7cff",
-            业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
+        position: "fixed",
-          </div>
+        top: "57%",
-        </div>
+        left: !showTabLeft ? "20.7%" : 0,
-        {/* 运行监测数据 */}
+        cursor: "pointer",
-        <div className='runWatch'>
+      }}
-          <div className='project-title'>运行监测数据</div>
+        onClick={() => setShowTabLeft(!showTabLeft)}
-          <div className='project-content'>
+      ><BarsOutlined style={{ color: "#fff" }} /></div>
-            {RealData.map((item, i) => (
+      {!showTabLeft &&
-              <div className={clsx({ 'run_list': true, active: activeOne == i })} key={item.name} onClick={() => { setActiveOne(i); getHistoryData(item)}}>
+        <div className='content-left'>
-                <span style={{ width: 94 }}>{item.name}</span>
+          {/* 工程简介 */}
-                <span>{item.value}</span>
+          <div className='project-introduce'>
-                <span>{item.time}</span>
+            <div className='project-title'>工程简介</div>
-              </div>
+            <div className='project-content'>
-            ))}
+              <img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/them.jpg`}></img>
-            <div className='run_chart'>
+              盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
-              {historyList.length > 0 ?
+              业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
-                <ReactEcharts
-                  option={pxOptions || {}}
-                  style={{ width: "100%", height: '100%' }}
-                  notMerge={true}
-                />
-                :<Empty style={{marginTop:20}}/>
-              }
             </div>
           </div>
-        </div>
+          {/* 运行监测数据 */}
-        {/* 安全监测数据 */}
+          <div className='runWatch'>
-        <div className='safeWatch'>
+            <div className='project-title'>运行监测数据</div>
-          <div className='project-introduce'>
+            <div className='project-content'>
-            <div className='project-title'>安全监测数据</div>
+              {RealData.map((item, i) => (
+                <div className={clsx({ 'run_list': true, active: activeOne == i })} key={item.name} onClick={() => { setActiveOne(i); getHistoryData(item) }}>
+                  <span style={{ width: 94 }}>{item.name}</span>
+                  <span>{item.value}</span>
+                  <span>{item.time}</span>
+                </div>
+              ))}
+              <div className='run_chart'>
+                {historyList.length > 0 ?
+                  <ReactEcharts
+                    option={pxOptions || {}}
+                    style={{ width: "100%", height: '100%' }}
+                    notMerge={true}
+                  />
+                  : <Empty style={{ marginTop: 20 }} />
+                }
+              </div>
+            </div>
+          </div>
+          {/* 安全监测数据 */}
+          <div className='safeWatch'>
+            <div className='project-introduce'>
+              <div className='project-title'>安全监测数据</div>
+              <div className='project-content'>
+                <table style={{ width: '100%' }}>
+                  <thead>
+                    <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
+                      <th>测点编号</th>
+                      <th>监测断面</th>
+                      <th>渗压(KPa)</th>
+                      <th style={{ width: 137 }}>监测时间</th>
+                    </tr>
+                  </thead>
+                  <tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
+                    {safeData.length > 0 ? safeData.map((item, i) => (
+                      <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
+                        <td>{item.cd}</td>
+                        <td>{item.dm}</td>
+                        <td>{item.kpa}</td>
+                        <td style={{ width: 137 }}>{item.time}</td>
+                      </tr>
+                    )) : <Empty />
+                    }
+                  </tbody>
+
+                </table>
+              </div>
+            </div>
+          </div>
+
+        </div>}
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 25,
+        height: 50,
+        backgroundColor: "#3b7cff",
+        position: "fixed",
+        top: "57%",
+        right: !showTabRight ? "20.7%" : 0,
+        cursor: "pointer",
+      }}
+        onClick={() => setShowTabRight(!showTabRight)}
+      ><BarsOutlined style={{ color: "#fff" }} /></div>
+      {
+        !showTabRight &&
+        <div className='content-right'>
+          {/* 操作日志 */}
+          <div className='operate-log'>
+            <div className='project-title'>操作日志</div>
             <div className='project-content'>
               <table style={{ width: '100%' }}>
                 <thead>
                   <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
-                    <th>测点编号</th>
+                    <th>闸孔编号</th>
-                    <th>监测断面</th>
+                    <th>操作内容</th>
-                    <th>渗压(KPa)</th>
+                    <th>操作人员</th>
-                    <th style={{ width: 137 }}>监测时间</th>
+                    <th style={{ width: 137 }}>操作时间</th>
                   </tr>
                 </thead>
-                <tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
+                <tbody style={{ height: 170, overflow: operateData.length > 6 ? 'scroll' : 'hidden' }}>
-                  {safeData.length >0 ? safeData.map((item, i) => (
+                  {operateData.length > 0 ? operateData.map((item, i) => (
                     <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
-                      <td>{item.cd}</td>
+                      <td>{item.gatePoreCode}</td>
-                      <td>{item.dm}</td>
+                      <td>{item.opContent}</td>
-                      <td>{item.kpa}</td>
+                      <td>{item.createUserName}</td>
-                      <td style={{ width: 137 }}>{item.time}</td>
+                      <td style={{ width: 137 }}>{item.createTime}</td>
                     </tr>
-                  )):<Empty  />
+                  )) : <Empty />
-                }
+                  }
                 </tbody>
 
               </table>
             </div>
           </div>
-        </div>
+          {/* 报警信息 */}
-      </div>
+          <div className='operate-log'>
-      <div className='content-right'>
+            <div className='project-title'>报警信息</div>
-        {/* 操作日志 */}
+            <div className='project-content'>
-        <div className='operate-log'>
+              <table style={{ width: '100%' }}>
-          <div className='project-title'>操作日志</div>
+                <thead>
-          <div className='project-content'>
+                  <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
-            <table style={{ width: '100%' }}>
+                    <th>监测点</th>
-              <thead>
+                    <th>监测值</th>
-                <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
+                    <th style={{ width: 58 }}>阈值下限</th>
-                  <th>闸孔编号</th>
+                    <th style={{ width: 60 }}>阈值上限</th>
-                  <th>操作内容</th>
+                    <th style={{ width: 129 }}>报警时间</th>
-                  <th>操作人员</th>
-                  <th style={{ width: 137 }}>操作时间</th>
-                </tr>
-              </thead>
-              <tbody style={{ height: 170,overflow: operateData.length > 6 ? 'scroll' : 'hidden'  }}>
-                {operateData.length > 0 ?operateData.map((item, i) => (
-                  <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
-                    <td>{item.gatePoreCode}</td>
-                    <td>{item.opContent}</td>
-                    <td>{item.createUserName}</td>
-                    <td style={{ width: 137 }}>{item.createTime}</td>
                   </tr>
-                )):<Empty  />
+                </thead>
-              }
+                <tbody style={{ height: 170, overflow: policeData.length > 6 ? 'scroll' : 'hidden' }} >
-              </tbody>
+                  {policeData.length > 0 ? policeData.map((item, i) => (
+                    <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
+                      <td style={{ width: 58 }}>{jcdType[item.type]}</td>
+                      <td>{item.val}</td>
+                      <td style={{ width: 58 }}>{item.lowerLimit}</td>
+                      <td style={{ width: 58 }}>{item.upperLimit}</td>
+                      <td style={{ width: 129 }}>{item.warnTime}</td>
+                    </tr>
+                  )) : <Empty />
+                  }
+                </tbody>
 
-            </table>
+              </table>
+            </div>
+          </div>
+          {/* 视频监控 */}
+          <div className='operate-log'>
+            <div className='project-title'>
+              视频监控
+            </div>
+            <div className='project-content video-style'>
+              {index !== 0 && <LeftCircleFilled className="leftIcon" onClick={() => delClick()} />}
+              <HFivePlayer wsUrl={videoArr} playerID={'111'} />
+              {index !== videoList.length - 1 && <RightCircleFilled className="rightIcon" onClick={() => addClick()} />}
+            </div>
           </div>
         </div>
-        {/* 报警信息 */}
+      }
-        <div className='operate-log'>
-          <div className='project-title'>报警信息</div>
-          <div className='project-content'>
-            <table style={{ width: '100%' }}>
-              <thead>
-                <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
-                  <th>监测点</th>
-                  <th>监测值</th>
-                  <th style={{ width: 58 }}>阈值下限</th>
-                  <th style={{ width: 60 }}>阈值上限</th>
-                  <th style={{ width: 129 }}>报警时间</th>
-                </tr>
-              </thead>
-              <tbody style={{ height: 170, overflow: policeData.length > 6 ? 'scroll' : 'hidden' }} >
-                {policeData.length > 0 ? policeData.map((item, i) => (
-                  <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
-                    <td style={{ width: 58 }}>{jcdType[item.type]}</td>
-                    <td>{item.val}</td>
-                    <td style={{ width: 58 }}>{item.lowerLimit}</td>
-                    <td style={{ width: 58 }}>{item.upperLimit}</td>
-                    <td style={{ width: 129 }}>{item.warnTime}</td>
-                  </tr>
-                )):<Empty  />
-                }
-              </tbody>
-
-            </table>
-          </div>
-        </div>
-        {/* 视频监控 */}
-        <div className='operate-log'>
-          <div className='project-title'>
-            视频监控
-          </div>
-          <div className='project-content video-style'>
-            {index !== 0 && <LeftCircleFilled className="leftIcon" onClick={() => delClick()} />}
-            <HFivePlayer wsUrl={videoArr} playerID={'111'} />
-            {index !== videoList.length - 1 && <RightCircleFilled className="rightIcon" onClick={() => addClick()} />}
-          </div>
-        </div>
-      </div>
     </div>
   )
 }

src/views/Home/index.less

@@ -73,6 +73,7 @@
     .content-box{
         display: flex;
         justify-content: center;
+       
     }
     .content-left{
         position: absolute;