Kaynağa Gözat

地图 不能点击的修改样式,加距离

zhaojijng 3 yıl önce
ebeveyn
işleme
34c78da593

+ 2 - 1
src/assets/css/antd-tenants.less

@@ -1,7 +1,8 @@
 @font-variant-base: none;
 @font-feature-settings-base: normal;
 
-@body-background: #eef1f2;
+//@body-background: #eef1f2;
+@body-background: #f7f8fa;
 
 @primary-color: #f0da21;
 @text-color: #4d5262;

+ 37 - 18
src/assets/css/map.less

@@ -46,27 +46,33 @@
   height: 1200px;
   transform-origin: 0% 0%;
   cursor: pointer;
-  .house {
+  .houseWrap {
     position: absolute;
     box-sizing: border-box;
-    border: 3px solid #fff;
+    padding: 3px;
+  }
+  .house {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #fff;
     border-radius: 6px;
-    .noDevice {
-      position: absolute;
-      top: 0;
-      left: 0;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      padding: 4px;
-      white-space: nowrap;
-      //   background: rgba(255, 255, 255, 0.8);
-      .noText {
-        padding: 4px 6px;
-        background-color: #ccc;
-        border-radius: 5px;
-      }
-    }
+    // .noDevice {
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    //   box-sizing: border-box;
+    //   width: 100%;
+    //   height: 100%;
+    //   padding: 4px;
+    //   white-space: nowrap;
+    //   //   background: rgba(255, 255, 255, 0.8);
+    //   .noText {
+    //     padding: 4px 6px;
+    //     background-color: #ccc;
+    //     border-radius: 5px;
+    //   }
+    // }
     .allDevice {
       position: absolute;
       top: 6px;
@@ -121,6 +127,19 @@
         text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
       }
     }
+    .contentDiv {
+      display: inline-block;
+      //   padding: 6px;
+      text-align: center;
+    }
+  }
+  .notclick {
+    background: url(../images/bg_disable.png) repeat;
+    border: 2px solid #dfe3ed;
+    cursor: default;
+    .contentDiv {
+      background-color: #eceff4;
+    }
   }
 }
 

BIN
src/assets/images/bg_disable.png


BIN
src/assets/images/page-enviroment/maptemp1.png


BIN
src/assets/images/page-enviroment/maptemp11.png


BIN
src/assets/images/page-enviroment/maptemp2.png


BIN
src/assets/images/page-enviroment/maptemp22.png


BIN
src/assets/images/page-enviroment/maptemp3.png


BIN
src/assets/images/page-enviroment/maptemp33.png


BIN
src/assets/images/page-enviroment/maptemp4.png


BIN
src/assets/images/page-enviroment/maptemp44.png


BIN
src/assets/images/page-enviroment/maptemp5.png


BIN
src/assets/images/page-enviroment/maptemp55.png


BIN
src/assets/images/page-enviroment/maptemp6.png


BIN
src/assets/images/page-enviroment/maptemp66.png


+ 0 - 1
src/components/SearchInput/index.tsx

@@ -64,7 +64,6 @@ const SearchInput: React.FC<SearchInputProps> = () => {
 
   //这是搜索的下拉列表的点击
   const handleChange = (sel: string) => {
-    debugger;
     setValue(null); //清空输入的值
     setMatchData([]); //清空搜索匹配列表
     var filterItem = matchData.filter((item) => {

+ 37 - 28
src/pages/Environment/index.tsx

@@ -12,6 +12,7 @@ import { equipImageMap } from '@/config/image.js';
 import { Spin } from 'antd';
 import Icon from '@/tenants-ui/Icon';
 
+import cx from 'classnames';
 import styles from './index.less';
 import mapstyles from '@/assets/css/map.less';
 
@@ -272,42 +273,50 @@ const Environment: React.FC = () => {
           render={(item: API.MapInfo, index: number) => {
             return (
               <div
+                className={mapstyles.houseWrap}
                 key={index + 'house'}
-                className={mapstyles.house}
                 style={{
                   left: item.left,
                   top: item.top,
                   width: item.width,
                   height: item.height,
-                  background: item.roomFuncType
-                    ? 'rgba(' +
-                      selNav.colorStr +
-                      (selNav.opacity as number) * getColorOpacity(item.avgValues) +
-                      ')'
-                    : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
-                }}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  if (lastTime - firtTime < 200) {
-                    showChartModal(item);
-                  }
-                }}
-                onMouseDown={(event) => {
-                  //event.stopPropagation();
-                  firtTime = new Date().getTime();
-                }}
-                onMouseUp={(event) => {
-                  //event.stopPropagation();
-                  lastTime = new Date().getTime();
                 }}
               >
-                <div className={mapstyles.content}>
-                  <Icon
-                    className=""
-                    type={getSpaceFunc(item.roomFuncType)}
-                    style={{ fontSize: 20 }}
-                  ></Icon>
-                  <div className={mapstyles.name}>{item.localName}</div>
+                <div
+                  className={cx(mapstyles.house, {
+                    [mapstyles.notclick]: !item.roomFuncType,
+                  })}
+                  style={{
+                    background: item.roomFuncType
+                      ? 'rgba(' +
+                        selNav.colorStr +
+                        (selNav.opacity as number) * getColorOpacity(item.avgValues) +
+                        ')'
+                      : '',
+                  }}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    if (lastTime - firtTime < 200) {
+                      showChartModal(item);
+                    }
+                  }}
+                  onMouseDown={(event) => {
+                    //event.stopPropagation();
+                    firtTime = new Date().getTime();
+                  }}
+                  onMouseUp={(event) => {
+                    //event.stopPropagation();
+                    lastTime = new Date().getTime();
+                  }}
+                >
+                  <div className={mapstyles.content}>
+                    <Icon
+                      className=""
+                      type={getSpaceFunc(item.roomFuncType)}
+                      style={{ fontSize: 20 }}
+                    ></Icon>
+                    <div className={mapstyles.name}>{item.localName}</div>
+                  </div>
                 </div>
               </div>
             );

+ 86 - 78
src/pages/Equipment/index.tsx

@@ -10,6 +10,7 @@ import DeviceModal from './components/deviceModal';
 
 import styles from './index.less';
 import mapstyles from '@/assets/css/map.less';
+import cx from 'classnames';
 import { Spin, Modal, message } from 'antd';
 import moment from 'moment';
 
@@ -44,10 +45,8 @@ type statistics = {
 };
 const Environment: React.FC = () => {
   const { getSpaceFunc } = useModel('spaceFunc');
-  const { changeSearchFloorId } = useModel('searchInfo');
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
 
-  const [searchText, setSearchText] = useState<{ text: any }>();
   //const [searchSpace, setSearchSpace] = useState<{}>();
   //   const [searchFloorId, setSearchFloorId] = useState<{}>();
   //   const [searchBuildId, setSearchBuildId] = useState<{}>();
@@ -214,7 +213,6 @@ const Environment: React.FC = () => {
   };
   //获取地图 mapList
   useEffect(() => {
-    //changeSearchFloorId('');
     if (selFloorId) {
       setLoading(true);
 
@@ -392,90 +390,100 @@ const Environment: React.FC = () => {
             render={(item, index) => {
               return (
                 <div
+                  className={mapstyles.houseWrap}
                   key={index + item.id}
-                  className={mapstyles.house}
                   style={{
                     left: item.left,
                     top: item.top,
                     width: item.width,
                     height: item.height,
-                    background: item.roomFuncType
-                      ? selNav.id == 'all'
-                        ? 'rgba(196, 196, 196, 0.2)'
-                        : getColorOpacity(item[selNav.id])
-                      : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
-                  }}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    if (lastTime - firtTime < 200) {
-                      spaceControl(item, index);
-                    }
-                  }}
-                  onMouseDown={(event) => {
-                    //event.stopPropagation();
-                    firtTime = new Date().getTime();
-                  }}
-                  onMouseUp={(event) => {
-                    //event.stopPropagation();
-                    lastTime = new Date().getTime();
                   }}
                 >
-                  {selNav.id !== 'all' && item[selNav.id] == 'not' && (
-                    <div className={mapstyles.noDevice}>
-                      <span className={mapstyles.noText}>无设备</span>
+                  <div
+                    style={{
+                      backgroundColor: item.roomFuncType
+                        ? selNav.id == 'all'
+                          ? 'rgba(196, 196, 196, 0.4)'
+                          : getColorOpacity(item[selNav.id])
+                        : '',
+                    }}
+                    className={cx(mapstyles.house, {
+                      [mapstyles.notclick]:
+                        !item.roomFuncType || (selNav.id !== 'all' && item[selNav.id] == 'not'),
+                    })}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (lastTime - firtTime < 200) {
+                        spaceControl(item, index);
+                      }
+                    }}
+                    onMouseDown={(event) => {
+                      //event.stopPropagation();
+                      firtTime = new Date().getTime();
+                    }}
+                    onMouseUp={(event) => {
+                      //event.stopPropagation();
+                      lastTime = new Date().getTime();
+                    }}
+                  >
+                    {/* {selNav.id !== 'all' && item[selNav.id] == 'not' && (
+                      <div className={mapstyles.noDevice}>
+                        <span className={mapstyles.noText}>无设备</span>
+                      </div>
+                    )} */}
+                    {selNav.id == 'all' && (
+                      <div className={mapstyles.allDevice}>
+                        {/* 所有设备的图标列表 */}
+                        {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
+                          return (
+                            <div
+                              key={dindex + 'device'}
+                              className={mapstyles.icon}
+                              style={{
+                                backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
+                              }}
+                            >
+                              <Icon
+                                className=""
+                                type={ditem.equipType}
+                                style={{ color: '#ffffff', fontWeight: 'bold' }}
+                              ></Icon>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                    {item.roomFuncType && (
+                      <div
+                        className={mapstyles.showModal}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          if (lastTime - firtTime < 200) {
+                            showModalClick(item);
+                          }
+                        }}
+                        onMouseDown={(event) => {
+                          //event.stopPropagation();
+                          firtTime = new Date().getTime();
+                        }}
+                        onMouseUp={(event) => {
+                          //event.stopPropagation();
+                          lastTime = new Date().getTime();
+                        }}
+                      >
+                        <Icon className="" type="hover"></Icon>
+                      </div>
+                    )}
+                    <div className={mapstyles.content}>
+                      <div className={mapstyles.contentDiv}>
+                        <Icon
+                          className=""
+                          type={getSpaceFunc(item.roomFuncType)}
+                          style={{ fontSize: 20 }}
+                        ></Icon>
+                        <div className={mapstyles.name}>{item.localName}</div>
+                      </div>
                     </div>
-                  )}
-                  {selNav.id == 'all' && (
-                    <div className={mapstyles.allDevice}>
-                      {/* 所有设备的图标列表 */}
-                      {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
-                        return (
-                          <div
-                            key={dindex + 'device'}
-                            className={mapstyles.icon}
-                            style={{
-                              backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
-                            }}
-                          >
-                            <Icon
-                              className=""
-                              type={ditem.equipType}
-                              style={{ color: '#ffffff', fontWeight: 'bold' }}
-                            ></Icon>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                  {item.roomFuncType && (
-                    <div
-                      className={mapstyles.showModal}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        if (lastTime - firtTime < 200) {
-                          showModalClick(item);
-                        }
-                      }}
-                      onMouseDown={(event) => {
-                        //event.stopPropagation();
-                        firtTime = new Date().getTime();
-                      }}
-                      onMouseUp={(event) => {
-                        //event.stopPropagation();
-                        lastTime = new Date().getTime();
-                      }}
-                    >
-                      <Icon className="" type="hover"></Icon>
-                    </div>
-                  )}
-
-                  <div className={mapstyles.content}>
-                    <Icon
-                      className=""
-                      type={getSpaceFunc(item.roomFuncType)}
-                      style={{ fontSize: 20 }}
-                    ></Icon>
-                    <div className={mapstyles.name}>{item.localName}</div>
                   </div>
                 </div>
               );

+ 50 - 41
src/pages/Runtime/index.tsx

@@ -191,59 +191,68 @@ const Runtime: React.FC = () => {
           render={(item, index) => {
             return (
               <div
+                className={mapstyles.houseWrap}
                 key={index + 'house'}
-                className={mapstyles.house}
                 style={{
                   left: item.left,
                   top: item.top,
                   width: item.width,
                   height: item.height,
-                  background: item.roomFuncType
-                    ? item.runTimeStatus == 'meetingBook'
-                      ? 'rgba(0, 220, 35, 0.2)'
-                      : item.runTimeStatus == 'overtimeWork'
-                      ? 'rgba(94, 139, 207, 0.2)'
-                      : 'rgba(196, 196, 196, 0.2)'
-                    : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
                 }}
               >
-                <div className={mapstyles.allTime}>
-                  {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
+                <div
+                  key={index + 'house'}
+                  className={cx(mapstyles.house, {
+                    [mapstyles.notclick]: !item.roomFuncType,
+                  })}
+                  style={{
+                    background: item.roomFuncType
+                      ? item.runTimeStatus == 'meetingBook'
+                        ? 'rgba(0, 220, 35, 0.2)'
+                        : item.runTimeStatus == 'overtimeWork'
+                        ? 'rgba(94, 139, 207, 0.2)'
+                        : 'rgba(196, 196, 196, 0.2)'
+                      : '',
+                  }}
+                >
+                  <div className={mapstyles.allTime}>
+                    {/* {(item.timeList || []).map(function (titem: string, tindex: number) {
                   return <span key={tindex + 'time'}>{titem},</span>;
                 })} */}
-                  {item.showTimeList && item.showTimeList.length > 1 && (
-                    <Popover
-                      content={(item.showTimeList || []).map((timeItem, index) => {
-                        return (
-                          <div key={'time' + index}>
-                            {timeItem[0]}-{timeItem[1]}
-                          </div>
-                        );
-                      })}
-                      trigger="hover"
-                      style={{ color: 'none' }}
-                    >
-                      <span
-                        className={cx({
-                          [mapstyles.overworkTime]: item.runTimeStatus == 'overtimeWork',
-                          [mapstyles.meetTime]: item.runTimeStatus == 'meetingBook',
+                    {item.showTimeList && item.showTimeList.length > 1 && (
+                      <Popover
+                        content={(item.showTimeList || []).map((timeItem, index) => {
+                          return (
+                            <div key={'time' + index}>
+                              {timeItem[0]}-{timeItem[1]}
+                            </div>
+                          );
                         })}
+                        trigger="hover"
+                        style={{ color: 'none' }}
                       >
-                        {item.showTimeStr}
-                      </span>
-                    </Popover>
-                  )}
-                  {item.showTimeList && item.showTimeList.length == 1 && (
-                    <span>{item.showTimeStr}</span>
-                  )}
-                </div>
-                <div className={mapstyles.content}>
-                  <Icon
-                    className=""
-                    type={getSpaceFunc(item.roomFuncType)}
-                    style={{ fontSize: 20 }}
-                  ></Icon>
-                  <div className={mapstyles.name}>{item.localName}</div>
+                        <span
+                          className={cx({
+                            [mapstyles.overworkTime]: item.runTimeStatus == 'overtimeWork',
+                            [mapstyles.meetTime]: item.runTimeStatus == 'meetingBook',
+                          })}
+                        >
+                          {item.showTimeStr}
+                        </span>
+                      </Popover>
+                    )}
+                    {item.showTimeList && item.showTimeList.length == 1 && (
+                      <span>{item.showTimeStr}</span>
+                    )}
+                  </div>
+                  <div className={mapstyles.content}>
+                    <Icon
+                      className=""
+                      type={getSpaceFunc(item.roomFuncType)}
+                      style={{ fontSize: 20 }}
+                    ></Icon>
+                    <div className={mapstyles.name}>{item.localName}</div>
+                  </div>
                 </div>
               </div>
             );