Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/smartBuilding

董国庆

2026-01-19 8bd7d5c79d4f25b7229858708c2bf75dc7d962b4

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/smartBuilding

 estate-frontend-v2024/package.json

@@ -52,7 +52,7 @@
    "xlsx": "^0.16.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-app-rewired start",
    "build": "react-app-rewired --max-old-space-size=4096 build ",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",

 estate-frontend-v2024/public/index.html

@@ -6,6 +6,13 @@
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "c75eccf0742998b2ea43823e08cacccd",
    };
  </script>
  <script src="https://webapi.amap.com/loader.js"></script>
  <meta name="description" content="岱观智评管理平台" />
  <title>岱观智评管理平台</title>
</head>

 estate-frontend-v2024/src/views/business/forms/edit-dataProblem-form.jsx

@@ -78,16 +78,16 @@
        return (
            <div className="border">
                <div className="list-item">
                    <div className="title text-center">复核内容</div>
                    <div className="content text-center">{reviewRecord.content || '-'}</div>
                    <div className="text-center title">复核内容</div>
                    <div className="text-center content">{reviewRecord.content || '-'}</div>
                </div>
                <div className="list-item">
                    <div className="title text-center">复核状态</div>
                    <div className="content text-center">{stateText}</div>
                    <div className="text-center title">复核状态</div>
                    <div className="text-center content">{stateText}</div>
                </div>
                <div className="list-item">
                    <div className="title text-center">复核图片</div>
                    <div className="content text-center">
                    <div className="text-center title">复核图片</div>
                    <div className="text-center content">
                        {images.length > 0 ? (
                            <span onClick={this.handleOpenImagePreview} className="link" style={{ cursor: 'pointer' }}>
                                {images.length}张
@@ -98,16 +98,16 @@
                    </div>
                </div>
                <div className="list-item">
                    <div className="title text-center">复核人</div>
                    <div className="content text-center">{reviewRecord.creator ? reviewRecord.creator.name : '-'}</div>
                    <div className="text-center title">复核人</div>
                    <div className="text-center content">{reviewRecord.creator ? reviewRecord.creator.name : '-'}</div>
                </div>
                <div className="list-item">
                    <div className="title text-center">创建时间</div>
                    <div className="content text-center">{reviewRecord.createTime || '-'}</div>
                    <div className="text-center title">创建时间</div>
                    <div className="text-center content">{reviewRecord.createTime || '-'}</div>
                </div>
                <div className="list-item">
                    <div className="title text-center">更新时间</div>
                    <div className="content text-center">{reviewRecord.updateTime || '-'}</div>
                    <div className="text-center title">更新时间</div>
                    <div className="text-center content">{reviewRecord.updateTime || '-'}</div>
                </div>
            </div>
        )
@@ -134,48 +134,52 @@
                    <TabPane tab="基本信息" key="1">
                <div className="border">
                    <div className="list-item">
                        <div className="title text-center">计划名称</div>
                        <div className="content text-center">{data.planName}</div>
                        <div className="text-center title">计划名称</div>
                        <div className="text-center content">{data.planName}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">项目名称</div>
                        <div className="content text-center">{data.projectName}</div>
                        <div className="text-center title">项目名称</div>
                        <div className="text-center content">{data.projectName}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">检查内容</div>
                        <div className="content text-center">{data.hierarchyName}</div>
                        <div className="text-center title">检查内容</div>
                        <div className="text-center content">{data.hierarchyName}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">问题部位</div>
                        <div className="content text-center">{data.problemPart}</div>
                        <div className="text-center title">责任人</div>
                        <div className="text-center content"></div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">规范条款</div>
                        <div className="content text-center">{this.problem.specificTerms}</div>
                        <div className="text-center title">问题部位</div>
                        <div className="text-center content">{data.problemPart}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">建议措施</div>
                        <div className="content text-center">{this.problem.suggestActions}</div>
                        <div className="text-center title">规范条款</div>
                        <div className="text-center content">{this.problem.specificTerms}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">问题数量</div>
                        <div className="content text-center">{this.numberFactor.name}</div>
                        <div className="text-center title">建议措施</div>
                        <div className="text-center content">{this.problem.suggestActions}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">扣除分数</div>
                        <div className="content text-center">{this.numberFactor.deductPoint}</div>
                        <div className="text-center title">问题数量</div>
                        <div className="text-center content">{this.numberFactor.name}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">附加扣分</div>
                        <div className="content text-center">{this.numberFactor.additionPoint}</div>
                        <div className="text-center title">扣除分数</div>
                        <div className="text-center content">{this.numberFactor.deductPoint}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">备注</div>
                        <div className="content text-center">{data.remark}</div>
                        <div className="text-center title">附加扣分</div>
                        <div className="text-center content">{this.numberFactor.additionPoint}</div>
                    </div>
                    <div className="list-item">
                        <div className="title text-center">创建时间</div>
                        <div className="content text-center">{data.createTime}</div>
                        <div className="text-center title">备注</div>
                        <div className="text-center content">{data.remark}</div>
                    </div>
                    <div className="list-item">
                        <div className="text-center title">创建时间</div>
                        <div className="text-center content">{data.createTime}</div>
                    </div>
                </div>
                    </TabPane>

 estate-frontend-v2024/src/views/business/forms/edit-project-form.jsx

@@ -1,6 +1,7 @@
import React from "react";
import {Cascader, Form, Input, InputNumber, Modal, Select} from "antd";
import { Cascader, Form, Input, InputNumber, Modal, Select, Button, message } from "antd";
import '../style/projects.less'
import AMapLoader from '@amap/amap-jsapi-loader';
import {
    getUsageTypeOptions,
    inputLongStyle,
@@ -9,10 +10,10 @@
    provinceArr
} from "../../common/constants";
import BaseForm from "../../common/edit-form-base";
import {createProjectNumber, toOptionsData} from "../../common/common_func";
import {getClientOptions} from "../../../api/business";
import {getCityList, getDistrictList} from "../../common/address_func";
import {flatPath, formatNodeForCascader, getDepartmentRoot} from "../../../api/hierarchy";
import { createProjectNumber, toOptionsData } from "../../common/common_func";
import { getClientOptions } from "../../../api/business";
import { getCityList, getDistrictList } from "../../common/address_func";
import { flatPath, formatNodeForCascader, getDepartmentRoot } from "../../../api/hierarchy";

const { Option } = Select;

@@ -46,13 +47,14 @@
        // 在state中添加cityList和districtList
        this.setState({
            cityList: [],
            districtList: []
            districtList: [],
            keyword: ''
        })
    }

    getDepartmentRootFunc() {
        getDepartmentRoot().then((data) => {
            if(data.data.status === 'OK')
            if (data.data.status === 'OK')
                this.departmentList = formatNodeForCascader(data.data.data)
        })
    }
@@ -64,366 +66,550 @@
        }
    }

  handleProvinceChange = (e) => {
      this.refreshCityList(e.key, e.label)
  }
    handleProvinceChange = (e) => {
        this.refreshCityList(e.key, e.label)
    }

  refreshCityList = (province, provinceLabel) => {
    getCityList(province, (data) => {
        this.setState({
            cityList: data
        }, () => {
            if (data && data.length > 0) {
                const firstCity = data[0];
                this.props.form.setFieldsValue({
                    city: { key: firstCity.value, label: firstCity.label }, // Adjusted to match the expected format
    refreshCityList = (province, provinceLabel) => {
        getCityList(province, (data) => {
            this.setState({
                cityList: data
            }, () => {
                if (data && data.length > 0) {
                    const firstCity = data[0];
                    this.props.form.setFieldsValue({
                        city: { key: firstCity.value, label: firstCity.label }, // Adjusted to match the expected format
                    });
                    this.setFieldValue('addressInfo', {
                        ...this.state.editableData.addressInfo,
                        province: provinceLabel,
                        city: firstCity.label,
                        district: ''
                    })
                    this.refreshDistrictList(firstCity.value, firstCity.label)
                } else {
                    // Handle the case where there are no cities (e.g., clear the selection)
                    this.props.form.setFieldsValue({
                        city: { key: '', label: '' }
                    });
                }
            })
        })
    }
    handleCityChange = (e) => {
        this.refreshDistrictList(e.key, e.label)
    }

    handleTypeChange = (e) => {
        this.setFieldValue('type', e.key)

        let usageTypeList = projectTypeRelationMap[e.key]
        let usageType = usageTypeList && usageTypeList.length > 0 ? usageTypeList[0] : null
        this.setFieldValue('usageType', usageType)
    }

    refreshDistrictList = (city, cityLabel) => {
        getDistrictList(city, (data) => {
            this.setState({
                districtList: data
            }, () => {
                if (data && data.length > 0) {
                    const firstDistrict = data[0];
                    this.props.form.setFieldsValue({
                        district: { key: firstDistrict.value, label: firstDistrict.label } // Adjusted to match the expected format
                    });
                    this.setFieldValue('addressInfo', {
                        ...this.state.editableData.addressInfo,
                        district: firstDistrict.label
                    })
                } else {
                    // Handle the case where there are no districts (e.g., clear the selection)
                    this.props.form.setFieldsValue({
                        district: { key: '', label: '' } // Reset or clear the selection
                    });
                }
            })
        })
    }

    viewWillAppear() {
        this.initMap();
    }

    initMap = () => {
        AMapLoader.load({
            key: "232929db1cb31f26d42b3645a7456154",
            version: "2.0",
            plugins: ['AMap.ToolBar', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.Marker'],
        }).then((AMap) => {
            this.AMap = AMap;
            this.geocoder = new AMap.Geocoder({
                extensions: "all"
            });
            const { addressInfo } = this.state.editableData;
            let center = [104.04, 30.40];
            if (addressInfo && addressInfo.longitude && addressInfo.latitude) {
                center = [addressInfo.longitude, addressInfo.latitude];
            }

            if (!this.map) {
                this.map = new AMap.Map("mapContainer", {
                    zoom: 15,
                    resizeEnable: true,
                    center: center
                });
                this.map.on('click', this.onMapClick);
            } else {
                this.map.setCenter(center);
            }

            if (addressInfo && addressInfo.longitude && addressInfo.latitude) {
                this.addMarker(center);
            }
        }).catch(e => {
            console.error(e);
        })
    }

    onMapClick = (e) => {
        const lng = e.lnglat.getLng();
        const lat = e.lnglat.getLat();
        this.addMarker([lng, lat]);
        this.getAddress(lng, lat);
    }

    addMarker = (position) => {
        if (this.marker) {
            this.marker.setPosition(position);
        } else {
            this.marker = new this.AMap.Marker({
                position: position,
                map: this.map
            });
        }
        this.map.setCenter(position);
    }

    updateAddressInfo = (lng, lat) => {
        // Update form field and state
        const { form } = this.props;
        form.setFieldsValue({
            gps: `${lng},${lat}`
        });

        // Update editableData
        const { addressInfo } = this.state.editableData;
        this.setFieldValue('addressInfo', {
            ...addressInfo,
            longitude: lng,
            latitude: lat
        });
    }

    getAddress = (lng, lat) => {
        if (!this.geocoder) return;
        this.geocoder.getAddress([lng, lat], (status, result) => {
            if (status === 'complete' && result.regeocode) {
                const addressComponent = result.regeocode.addressComponent;
                const formattedAddress = result.regeocode.formattedAddress;

                // Update basic info
                this.updateAddressInfo(lng, lat);

                // Update Detailed Address
                const { form } = this.props;
                form.setFieldsValue({
                    address: formattedAddress
                });
                this.setFieldValue('addressInfo', {
                    ...this.state.editableData.addressInfo,
                    province: provinceLabel,
                    city: firstCity.label,
                    district: ''
                })
                this.refreshDistrictList(firstCity.value, firstCity.label)
            } else {
                // Handle the case where there are no cities (e.g., clear the selection)
                this.props.form.setFieldsValue({
                    city: { key: '', label: '' }
                    detail: formattedAddress
                });

                // Handle Province
                const pName = addressComponent.province;
                const pOpt = provinceArr.find(item => pName.includes(item.label) || item.label.includes(pName));

                if (pOpt) {
                    form.setFieldsValue({
                        province: { key: pOpt.value, label: pOpt.label }
                    });
                    this.setFieldValue('addressInfo', {
                        ...this.state.editableData.addressInfo,
                        province: pOpt.label
                    });

                    // Handle City
                    getCityList(pOpt.value, (cityData) => {
                        this.setState({ cityList: cityData }, () => {
                            let cName = addressComponent.city;
                            if (!cName || cName.length === 0) {
                                cName = pName; // Handle municipality
                            }
                            const cOpt = cityData.find(item => cName.includes(item.label) || item.label.includes(cName));

                            if (cOpt) {
                                form.setFieldsValue({
                                    city: { key: cOpt.value, label: cOpt.label }
                                });
                                this.setFieldValue('addressInfo', {
                                    ...this.state.editableData.addressInfo,
                                    city: cOpt.label
                                });

                                // Handle District
                                getDistrictList(cOpt.value, (districtData) => {
                                    this.setState({ districtList: districtData }, () => {
                                        const dName = addressComponent.district;
                                        const dOpt = districtData.find(item => dName.includes(item.label) || item.label.includes(dName));

                                        if (dOpt) {
                                            form.setFieldsValue({
                                                district: { key: dOpt.value, label: dOpt.label }
                                            });
                                            this.setFieldValue('addressInfo', {
                                                ...this.state.editableData.addressInfo,
                                                district: dOpt.label
                                            });
                                        }
                                    })
                                })
                            }
                        })
                    })
                }
            }
        })
    })
  }
  handleCityChange = (e) => {
    this.refreshDistrictList(e.key, e.label)
  }
        });
    }

handleTypeChange = (e) => {
    this.setFieldValue('type', e.key)
    handleSearch = () => {
        const { keyword } = this.state;
        if (!keyword || !this.AMap) return;

    let usageTypeList = projectTypeRelationMap[e.key]
    let usageType = usageTypeList && usageTypeList.length > 0 ? usageTypeList[0] : null
    this.setFieldValue('usageType', usageType)
}
        this.AMap.plugin('AMap.PlaceSearch', () => {
            const placeSearch = new this.AMap.PlaceSearch({
                extensions: 'all',
            });
            placeSearch.search(keyword, (status, result) => {
                if (status === 'complete' && result.poiList.pois.length > 0) {
                    const poi = result.poiList.pois[0];
                    const lng = poi.location.lng;
                    const lat = poi.location.lat;
                    this.addMarker([lng, lat]);
                    this.getAddress(lng, lat);
                    message.success(`已定位到: ${poi.name}`);
                } else {
                    message.warning('未找到相关位置');
                }
            });
        });
    }

  refreshDistrictList = (city, cityLabel) => {
    getDistrictList(city, (data) => {
        this.setState({
            districtList: data
        }, () => {
            if (data && data.length > 0) {
                const firstDistrict = data[0];
                this.props.form.setFieldsValue({
                    district: { key: firstDistrict.value, label: firstDistrict.label } // Adjusted to match the expected format
                });
                this.setFieldValue('addressInfo', {
                    ...this.state.editableData.addressInfo,
                    district: firstDistrict.label
                })
            } else {
                // Handle the case where there are no districts (e.g., clear the selection)
                this.props.form.setFieldsValue({
                    district: { key: '', label: '' } // Reset or clear the selection
                });
            }
        })
    })
  }
    render() {
        const { visible, onCancel, onOk, form, currentRowData } = this.props;
        const { getFieldDecorator } = form;
        const { name, type, usageType, departmentPath, client, constructionLicense, itemCode, branchCompany, constructionCompanyInfo, supervisorCompanyInfo, developmentCompanyInfo, addressInfo, projectCost } = this.state.editableData;
        return (
            <Modal
                title={currentRowData ? "编辑项目" : "添加项目"}
                visible={visible}
                onCancel={onCancel}
                onOk={onOk}
                width={900}
                destroyOnClose
            >
                <Form
                    labelCol={{ style: { width: '100%', height: '30px' } }} //label样式
                    labelAlign="left" //label样式
                >
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="项目名称:">
                                {getFieldDecorator("name", {
                                    initialValue: name,
                                    rules: [{ required: true, message: '请输入项目名称！' }],
                                    onChange: this.handleFieldChange('name')
                                })(<Input />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="项目类型:">
                                {getFieldDecorator("type", {
                                    initialValue: { key: type, label: projectTypeMap[type] },
                                    rules: [{ required: true, message: '请选择项目类型！' }],
                                    onChange: (e) => this.handleTypeChange(e)
                                })(
                                    <Select
                                        labelInValue
                                    >
                                        {projectTypeMap.toOptions().map((item, index) => (
                                            <Option value={item.value} key={item.value}>{item.label}</Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="用途类型:">
                                {getFieldDecorator("usageType", {
                                    initialValue: usageType ? { key: usageType, label: projectUsageTypeMap[usageType] } : { key: '', label: '' },
                                    rules: [{ required: false, message: '请选择用途类型！' }],
                                    onChange: this.handleSelectChange('usageType')
                                })(
                                    <Select
                                        labelInValue
                                    >
                                        {getUsageTypeOptions(type).map((item, index) => (
                                            <Option value={item.value} key={item.value}>{item.label}</Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                        </div>
                    </div>
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="部门:">
                                {getFieldDecorator("departmentPath", {
                                    initialValue: departmentPath ? flatPath(departmentPath) : [],
                                    onChange: this.handleCascaderChange('departmentPath'),
                                    rules: [{ required: false, message: '请选择部门！' }],
                                })(
                                    <Cascader
                                        options={this.departmentList ? this.departmentList : []}
                                        expandTrigger="hover" />
                                )}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="委托方:">
                                {getFieldDecorator("clientId", {
                                    initialValue: client ? { key: client.id, label: client.name } : undefined,
                                    rules: [{ required: true, message: '请选择委托方！' }],
                                    onChange: this.handleEntitySelectChange('client')
                                })(
                                    <Select
                                        labelInValue
                                        disabled={this.state.isEdit}
                                    >
                                        {this.clientOptions.map((item, index) => (
                                            <Option value={item.value} key={item.value}>{item.label}</Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="项目规格:">
                                {getFieldDecorator("clientId", {
                                    initialValue: client ? { key: client.id, label: client.name } : undefined,
                                    rules: [{ required: true, message: '请选择委托方！' }],
                                    onChange: this.handleEntitySelectChange('client')
                                })(
                                    <Input placeholder="请输入项目规格" />
                                )}
                            </Form.Item>
                        </div>
                    </div>
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="施工许可证号:">
                                {getFieldDecorator("constructionLicense", {
                                    initialValue: constructionLicense,
                                    onChange: this.handleFieldChange('constructionLicense')
                                })(<Input placeholder="请输入施工许可证号" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="项目编码:">
                                {getFieldDecorator("itemCode", {
                                    initialValue: itemCode,
                                    onChange: this.handleFieldChange('itemCode')
                                })(<Input disabled={true} />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="所属分公司:">
                                {getFieldDecorator("branchCompany", {
                                    initialValue: branchCompany,
                                    onChange: this.handleFieldChange('branchCompany')
                                })(<Input placeholder="请输入所属分公司" />)}
                            </Form.Item>
                        </div>
                    </div>
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="施工单位:">
                                {getFieldDecorator("constructionCompanyInfo.name", {
                                    initialValue: constructionCompanyInfo ? constructionCompanyInfo.name : '',
                                    onChange: this.handleEntityFieldSelectChange('constructionCompanyInfo', 'name')
                                })(<Input placeholder="施工单位" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="项目经理:">
                                {getFieldDecorator("constructionCompanyInfo.leader", {
                                    initialValue: constructionCompanyInfo ? constructionCompanyInfo.leader : '',
                                    onChange: this.handleEntityFieldSelectChange('constructionCompanyInfo', 'leader')
                                })(<Input placeholder="项目经理" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="手机号:">
                                {getFieldDecorator("constructionCompanyInfo.phone", {
                                    initialValue: constructionCompanyInfo ? constructionCompanyInfo.phone : '',
                                    onChange: this.handleEntityFieldSelectChange('constructionCompanyInfo', 'phone')
                                })(<Input placeholder="手机号" />)}
                            </Form.Item>
                        </div>
                    </div>
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="监理单位:">
                                {getFieldDecorator("supervisorCompanyInfo.name", {
                                    initialValue: supervisorCompanyInfo ? supervisorCompanyInfo.name : '',
                                    onChange: this.handleEntityFieldSelectChange('supervisorCompanyInfo', 'name')
                                })(<Input placeholder="监理单位" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="项目经理:">
                                {getFieldDecorator("supervisorCompanyInfo.leader", {
                                    initialValue: supervisorCompanyInfo ? supervisorCompanyInfo.leader : '',
                                    onChange: this.handleEntityFieldSelectChange('supervisorCompanyInfo', 'leader')
                                })(<Input placeholder="项目经理" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="手机号:">
                                {getFieldDecorator("supervisorCompanyInfo.phone", {
                                    initialValue: supervisorCompanyInfo ? supervisorCompanyInfo.phone : '',
                                    onChange: this.handleEntityFieldSelectChange('supervisorCompanyInfo', 'phone')
                                })(<Input placeholder="手机号" />)}
                            </Form.Item>
                        </div>
                    </div>

  render() {
    const { visible, onCancel, onOk, form, currentRowData } = this.props;
    const { getFieldDecorator } = form;
    const { name, type, usageType, departmentPath, client, constructionLicense, itemCode, branchCompany, constructionCompanyInfo, supervisorCompanyInfo, developmentCompanyInfo, addressInfo, projectCost } = this.state.editableData;
    return (
      <Modal
        title={currentRowData ? "编辑项目" : "添加项目"}
        visible={visible}
        onCancel={onCancel}
        onOk={onOk}
        width={900}
        destroyOnClose
      >
        <Form
            labelCol={{ style: { width: '100%', height: '30px' } }} //label样式
            labelAlign="left" //label样式
        >
          <div className="grid grid-1-1-1">
            <div className="p-10">
                <Form.Item label="项目名称:">
                    {getFieldDecorator("name", {
                        initialValue: name,
                        rules: [{required: true, message: '请输入项目名称！'}],
                        onChange: this.handleFieldChange('name')
                    })(<Input/>)}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="项目类型:">
                    {getFieldDecorator("type", {
                        initialValue: { key: type, label: projectTypeMap[type] },
                        rules: [{required: true, message: '请选择项目类型！'}],
                        onChange: (e) => this.handleTypeChange(e)
                    })(
                    <Select
                        labelInValue
                    >
                        { projectTypeMap.toOptions().map((item, index) => (
                            <Option value={item.value} key={item.value}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="用途类型:">
                    {getFieldDecorator("usageType", {
                        initialValue: usageType ? {key: usageType, label: projectUsageTypeMap[usageType]} : {key: '', label: ''},
                        rules: [{required: false, message: '请选择用途类型！'}],
                        onChange: this.handleSelectChange('usageType')
                    })(
                    <Select
                        labelInValue
                    >
                        {getUsageTypeOptions(type).map((item, index) => (
                            <Option value={item.value} key={item.value}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
                </Form.Item>
            </div>
          </div>
          <div className="grid grid-1-1-1">
            <div className="p-10">
                <Form.Item label="部门:">
                    {getFieldDecorator("departmentPath", {
                        initialValue: departmentPath ? flatPath(departmentPath) : [],
                        onChange: this.handleCascaderChange('departmentPath'),
                        rules: [{required: false, message: '请选择部门！'}],
                    })(
                    <Cascader
                        options={this.departmentList ? this.departmentList : []}
                        expandTrigger="hover" />
                    )}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="委托方:">
                    {getFieldDecorator("clientId", {
                        initialValue: client? {key: client.id, label: client.name} : undefined,
                        rules: [{required: true, message: '请选择委托方！'}],
                        onChange: this.handleEntitySelectChange('client')
                    })(
                    <Select
                        labelInValue
                        disabled={this.state.isEdit}
                    >
                        {this.clientOptions.map((item, index) => (
                            <Option value={item.value} key={item.value}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="项目规格:">
                    {getFieldDecorator("clientId", {
                        initialValue: client? {key: client.id, label: client.name} : undefined,
                        rules: [{required: true, message: '请选择委托方！'}],
                        onChange: this.handleEntitySelectChange('client')
                    })(
                    <Input placeholder="请输入项目规格" />
                    )}
                </Form.Item>
            </div>
          </div>
          <div className="grid grid-1-1-1">
            <div className="p-10">
                <Form.Item label="施工许可证号:">
                    {getFieldDecorator("constructionLicense", {
                        initialValue: constructionLicense,
                        onChange: this.handleFieldChange('constructionLicense')
                    })(<Input placeholder="请输入施工许可证号" />)}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="项目编码:">
                    {getFieldDecorator("itemCode", {
                        initialValue: itemCode,
                        onChange: this.handleFieldChange('itemCode')
                    })(<Input disabled={true}/>)}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="所属分公司:">
                    {getFieldDecorator("branchCompany", {
                        initialValue: branchCompany,
                        onChange: this.handleFieldChange('branchCompany')
                    })(<Input placeholder="请输入所属分公司" />)}
                </Form.Item>
            </div>
          </div>
          <div className="grid grid-1-1-1">
            <div className="p-10">
                <Form.Item label="施工单位:">
                    {getFieldDecorator("constructionCompanyInfo.name", {
                        initialValue: constructionCompanyInfo ? constructionCompanyInfo.name : '',
                        onChange: this.handleEntityFieldSelectChange('constructionCompanyInfo', 'name')
                    })(<Input placeholder="施工单位" />)}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="项目经理:">
                    {getFieldDecorator("constructionCompanyInfo.leader", {
                        initialValue: constructionCompanyInfo ? constructionCompanyInfo.leader : '',
                        onChange: this.handleEntityFieldSelectChange('constructionCompanyInfo', 'leader')
                    })(<Input placeholder="项目经理" />)}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="手机号:">
                    {getFieldDecorator("constructionCompanyInfo.phone", {
                        initialValue: constructionCompanyInfo ? constructionCompanyInfo.phone : '',
                        onChange: this.handleEntityFieldSelectChange('constructionCompanyInfo', 'phone')
                    })(<Input placeholder="手机号" />)}
                </Form.Item>
            </div>
          </div>
            <div className="grid grid-1-1-1">
                <div className="p-10">
                    <Form.Item label="监理单位:">
                        {getFieldDecorator("supervisorCompanyInfo.name", {
                            initialValue: supervisorCompanyInfo ? supervisorCompanyInfo.name : '',
                            onChange: this.handleEntityFieldSelectChange('supervisorCompanyInfo', 'name')
                        })(<Input placeholder="监理单位" />)}
                    </Form.Item>
                </div>
                <div className="p-10">
                    <Form.Item label="项目经理:">
                        {getFieldDecorator("supervisorCompanyInfo.leader", {
                            initialValue: supervisorCompanyInfo ? supervisorCompanyInfo.leader : '',
                            onChange: this.handleEntityFieldSelectChange('supervisorCompanyInfo', 'leader')
                        })(<Input placeholder="项目经理" />)}
                    </Form.Item>
                </div>
                <div className="p-10">
                    <Form.Item label="手机号:">
                        {getFieldDecorator("supervisorCompanyInfo.phone", {
                            initialValue: supervisorCompanyInfo ? supervisorCompanyInfo.phone : '',
                            onChange: this.handleEntityFieldSelectChange('supervisorCompanyInfo', 'phone')
                        })(<Input placeholder="手机号" />)}
                    </Form.Item>
                </div>
            </div>
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="开发单位:">
                                {getFieldDecorator("developmentCompanyInfo.name", {
                                    initialValue: developmentCompanyInfo ? developmentCompanyInfo.name : '',
                                    onChange: this.handleEntityFieldSelectChange('developmentCompanyInfo', 'name')
                                })(<Input placeholder="开发单位" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="项目经理:">
                                {getFieldDecorator("developmentCompanyInfo.leader", {
                                    initialValue: developmentCompanyInfo ? developmentCompanyInfo.leader : '',
                                    onChange: this.handleEntityFieldSelectChange('developmentCompanyInfo', 'leader')
                                })(<Input placeholder="项目经理" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="手机号:">
                                {getFieldDecorator("developmentCompanyInfo.phone", {
                                    initialValue: developmentCompanyInfo ? developmentCompanyInfo.phone : '',
                                    onChange: this.handleEntityFieldSelectChange('developmentCompanyInfo', 'phone')
                                })(<Input placeholder="手机号" />)}
                            </Form.Item>
                        </div>
                    </div>

            <div className="grid grid-1-1-1">
                <div className="p-10">
                    <Form.Item label="开发单位:">
                        {getFieldDecorator("developmentCompanyInfo.name", {
                            initialValue: developmentCompanyInfo ? developmentCompanyInfo.name : '',
                            onChange: this.handleEntityFieldSelectChange('developmentCompanyInfo', 'name')
                        })(<Input placeholder="开发单位" />)}
                    </Form.Item>
                </div>
                <div className="p-10">
                    <Form.Item label="项目经理:">
                        {getFieldDecorator("developmentCompanyInfo.leader", {
                            initialValue: developmentCompanyInfo ? developmentCompanyInfo.leader : '',
                            onChange: this.handleEntityFieldSelectChange('developmentCompanyInfo', 'leader')
                        })(<Input placeholder="项目经理" />)}
                    </Form.Item>
                </div>
                <div className="p-10">
                    <Form.Item label="手机号:">
                        {getFieldDecorator("developmentCompanyInfo.phone", {
                            initialValue: developmentCompanyInfo ? developmentCompanyInfo.phone : '',
                            onChange: this.handleEntityFieldSelectChange('developmentCompanyInfo', 'phone')
                        })(<Input placeholder="手机号" />)}
                    </Form.Item>
                </div>
            </div>

          <div className="grid grid-1-1-1">
            <div className="p-10">
                <Form.Item label="省:">
                    {getFieldDecorator("province", {
                        initialValue: addressInfo && addressInfo.province ? {key: 0, label: addressInfo.province} : {key: 0, label: ''},
                        onChange: this.handleAddressFieldSelectChange('addressInfo', 'province', this.handleProvinceChange)
                    })(
                    <Select
                        labelInValue
                    >
                        {provinceArr.map((item, index) => (
                            <Option value={item.value} key={item.value}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="市:">
                    {getFieldDecorator("city", {
                        initialValue: addressInfo && addressInfo.city ? {key: 0, label: addressInfo.city} : {key: 0, label: ''},
                        onChange:this.handleAddressFieldSelectChange('addressInfo', 'city', this.handleCityChange)
                    })(
                    <Select
                        labelInValue
                    >
                        {this.state.cityList && this.state.cityList.map((item, index) => (
                            <Option value={item.value} key={item.value}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="区:">
                {getFieldDecorator("district", {
                    initialValue: addressInfo && addressInfo.district ? {key: 0, label: addressInfo.district} : {key: 0, label: ''},
                    onChange: this.handleAddressFieldSelectChange('addressInfo', 'district')
                    })(
                    <Select
                        labelInValue
                    >
                        {this.state.districtList && this.state.districtList.map((item, index) => (
                            <Option value={item.value} key={item.value}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
                </Form.Item>
            </div>
          </div>
          <div className="grid grid-1-1-1">
            <div className="p-10">
                <Form.Item label="详细地址:">
                    {getFieldDecorator("address", {
                        initialValue: addressInfo && addressInfo.detail ? addressInfo.detail : '',
                        rules: [{required: true, message: '请输入详细地址！'}],
                        onChange: this.handleEntityFieldSelectChange('addressInfo', 'detail')
                        })(<Input placeholder="详细地址" />)}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="经纬度:">
                    {getFieldDecorator("address", {
                        initialValue: addressInfo && addressInfo.detail ? addressInfo.detail : '',
                        rules: [{required: true, message: '请输入经纬度！'}],
                        onChange: this.handleEntityFieldSelectChange('addressInfo', 'detail')
                        })(<Input placeholder="经纬度" />)}
                </Form.Item>
            </div>
            <div className="p-10">
                <Form.Item label="工程造价:" >
                    {getFieldDecorator("projectCost", {
                        initialValue: projectCost,
                        onChange: this.handleNumberChange('projectCost')
                        })(<InputNumber style={inputLongStyle} placeholder="工程造价" />)}
                </Form.Item>
            </div>
          </div>
        </Form>
      </Modal>
    );
  }
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="省:">
                                {getFieldDecorator("province", {
                                    initialValue: addressInfo && addressInfo.province ? { key: 0, label: addressInfo.province } : { key: 0, label: '' },
                                    onChange: this.handleAddressFieldSelectChange('addressInfo', 'province', this.handleProvinceChange)
                                })(
                                    <Select
                                        labelInValue
                                    >
                                        {provinceArr.map((item, index) => (
                                            <Option value={item.value} key={item.value}>{item.label}</Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="市:">
                                {getFieldDecorator("city", {
                                    initialValue: addressInfo && addressInfo.city ? { key: 0, label: addressInfo.city } : { key: 0, label: '' },
                                    onChange: this.handleAddressFieldSelectChange('addressInfo', 'city', this.handleCityChange)
                                })(
                                    <Select
                                        labelInValue
                                    >
                                        {this.state.cityList && this.state.cityList.map((item, index) => (
                                            <Option value={item.value} key={item.value}>{item.label}</Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="区:">
                                {getFieldDecorator("district", {
                                    initialValue: addressInfo && addressInfo.district ? { key: 0, label: addressInfo.district } : { key: 0, label: '' },
                                    onChange: this.handleAddressFieldSelectChange('addressInfo', 'district')
                                })(
                                    <Select
                                        labelInValue
                                    >
                                        {this.state.districtList && this.state.districtList.map((item, index) => (
                                            <Option value={item.value} key={item.value}>{item.label}</Option>
                                        ))}
                                    </Select>
                                )}
                            </Form.Item>
                        </div>
                    </div>
                    <div className="grid grid-1-1-1">
                        <div className="p-10">
                            <Form.Item label="详细地址:">
                                {getFieldDecorator("address", {
                                    initialValue: addressInfo && addressInfo.detail ? addressInfo.detail : '',
                                    rules: [{ required: true, message: '请输入详细地址！' }],
                                    onChange: this.handleEntityFieldSelectChange('addressInfo', 'detail')
                                })(<Input placeholder="详细地址" />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="经纬度:">
                                {getFieldDecorator("gps", {
                                    initialValue: addressInfo && addressInfo.longitude && addressInfo.latitude ? `${addressInfo.longitude},${addressInfo.latitude}` : '',
                                    rules: [{ required: true, message: '请选择地图位置或搜索！' }],
                                })(<Input placeholder="请选择地图位置或搜索" readOnly />)}
                            </Form.Item>
                        </div>
                        <div className="p-10">
                            <Form.Item label="工程造价:" >
                                {getFieldDecorator("projectCost", {
                                    initialValue: projectCost,
                                    onChange: this.handleNumberChange('projectCost')
                                })(<InputNumber style={inputLongStyle} placeholder="工程造价" />)}
                            </Form.Item>
                        </div>
                    </div>
                    <div style={{ padding: '0 10px' }}>
                        <div style={{ marginBottom: 10, display: 'flex' }}>
                            <Input
                                placeholder="请输入搜索关键字"
                                value={this.state.keyword}
                                onChange={(e) => this.setState({ keyword: e.target.value })}
                                style={{ marginRight: 10 }}
                            />
                            <Button type="primary" onClick={this.handleSearch}>搜索</Button>
                        </div>
                        <div id="mapContainer" className="mapBox" style={{ height: '400px', width: '100%', border: '1px solid #d9d9d9' }}></div>
                    </div>
                </Form>
            </Modal>
        );
    }
}

export default Form.create({ name: "EditProjectForm" })(EditProjectForm);

 screen/public/index.html

@@ -9,7 +9,7 @@
  <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "c75eccf0742998b2ea43823e08cacccd」",
      securityJsCode: "c75eccf0742998b2ea43823e08cacccd",
    };
  </script>
  <script src="https://webapi.amap.com/loader.js"></script>

 screen/src/App.vue

@@ -24,8 +24,7 @@
  },
  created() {
    if (!localStorage.getItem('token')) {
      this.$router.replace('/home');
      // this.$router.replace('/');
      this.$router.replace('/');
      return
    }
  },

 screen/src/assets/img/home/Shape.png

 screen/src/components/customTable.vue

@@ -66,13 +66,22 @@
    color: #ffffff;
    font-family: "Source Han Sans CN Medium";
  }

  tr {
    background-color: transparent;
  }
  
  .oneRow {
    background-color: #02004d !important;
    height: 50px;
    td {
      background-color: #02004d !important;
    }
  }
  .twoRow {
    background: rgba(14, 95, 255, .2) !important;
    height: 50px;
    td {
      background: rgba(14, 95, 255, 0.2) !important;
    }
  }
}
</style>

 screen/src/router/index.js

@@ -61,7 +61,7 @@
      title: '事故案例'
    }
  },
   {
  {
    path: '/accidentCase/detail',
    component: () => import('../view/accidentCase/detail.vue'),
    meta: {
@@ -74,6 +74,34 @@
    meta: {
      title: '项目端'
    }
  },
  {
    path: '/planOfAudit',
    component: () => import('../view/planOfAudit/index.vue'),
    meta: {
      title: '检查计划列表'
    }
  },
  {
    path: '/majorRisk',
    component: () => import('../view/majorRisk/index.vue'),
    meta: {
      title: '重大风险源'
    }
  },
  {
    path: '/personnelOnDuty',
    component: () => import('../view/personnelOnDuty/index.vue'),
    meta: {
      title: '人员在岗信息'
    }
  },
  {
    path: '/subentry',
    component: () => import('../view/subentry/index.vue'),
    meta: {
      title: '分项隐患数'
    }
  }
]


 screen/src/view/accidentCase/index.vue

@@ -287,6 +287,10 @@
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;

 screen/src/view/equipmentList/index.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <HeaderBox />
    <HeaderBox :title="projectName" />
    <div class="pt--35 px--20 pb--54">
      <!-- 返回 -->
      <div @click="backFun" class="flex a-center cursor-pointer">
@@ -13,6 +13,7 @@
      <!-- 搜索 -->
      <div class="flex a-center gap--16 mt--24 mb--20">
        <div
          v-if="!projectId"
          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
        >
          <el-select
@@ -140,7 +141,11 @@
        height="800"
        style="border: 2px solid #3d7fff"
      >
        <el-table-column label="设备名称" prop="projectName" />
        <el-table-column
          v-if="!projectId"
          label="项目名称"
          prop="projectName"
        />
        <el-table-column label="设备类型" prop="projectName" />
        <el-table-column label="设备编号" prop="projectName" />
        <el-table-column label="设备出厂日期" prop="projectName" />
@@ -260,6 +265,7 @@
    return {
      dateTime: null,
      projectId: null,
      projectName: '',
      dateTxt: "",
      currentPage: 1,
      projectVisible: false,
@@ -282,14 +288,22 @@
      immediate: true,
    },
  },
  created() {},
  created() {
    if (this.$route.query.projectId) {
      this.projectId = this.$route.query.projectId;
    }
    if (this.$route.query.projectName) {
      this.projectName = this.$route.query.projectName;
    }
  },
  mounted() {},
  methods: {
    toHiddenDanger(row, type) {
      this.$router.push({
        path: "/hiddenDanger",
        query: {
          projectId: row.projectId,
          projectId: this.projectId,
          projectName: this.projectName,
          activeTab: type,
        },
      });
@@ -377,6 +391,10 @@
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;

 screen/src/view/hiddenDanger/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="relative">
    <HeaderBox />
    <HeaderBox :title="projectName" />
    <div class="pt--35 px--20 pb--54">
      <!-- 返回 -->
      <div>
@@ -30,6 +30,7 @@
      <!-- 搜索 -->
      <div class="flex a-center gap--16 mt--24 mb--20">
        <div
          v-if="!projectId"
          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
        >
          <el-select
@@ -203,7 +204,11 @@
        height="800"
        style="border: 2px solid #3d7fff"
      >
        <el-table-column label="项目名称" prop="projectName" />
        <el-table-column
          v-if="!projectId"
          label="项目名称"
          prop="projectName"
        />
        <el-table-column label="检查计划" prop="projectName" />
        <el-table-column label="检查内容" prop="projectName" />
        <el-table-column label="问题描述" prop="projectName" />
@@ -233,15 +238,15 @@
              <div class="ripple">
                <div
                  class="ripple-wave wave-1"
                  :class="{ bgColor3: $index === 0 }"
                  :class="{ bgColor33: $index === 0 }"
                ></div>
                <div
                  class="ripple-wave wave-2"
                  :class="{ bgColor4: $index === 0 }"
                  :class="{ bgColor44: $index === 0 }"
                ></div>
                <div
                  class="ripple-wave wave-3"
                  :class="{ bgColor5: $index === 0 }"
                  :class="{ bgColor55: $index === 0 }"
                ></div>
              </div>
              <div class="ml--6 SHSR">{{ $index }}</div>
@@ -300,133 +305,137 @@
    <CustomDialog title="项目名称" :visible.sync="detailVisible" width="1420px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClickTab">
        <el-tab-pane label="基本信息" name="first">
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">计划名称：</div>
          <div class="oa" style="height: 700px">
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">计划名称：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">项目名称：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">检查内容：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">责任人：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">问题部门：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">创建时间：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
            <div class="mt--30">
              <div class="SHSR fs--16 lh--16 mb--17 color1">规范条款：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">项目名称：</div>
            <div class="mt--30">
              <div class="SHSR fs--16 lh--16 mb--17 color1">建议措施：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">检查内容：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">问题数量：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">扣除积分：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">责任人：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">附加分数：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">问题部门：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">创建时间：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
          </div>
          <div class="mt--30">
            <div class="SHSR fs--16 lh--16 mb--17 color1">规范条款：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="mt--30">
            <div class="SHSR fs--16 lh--16 mb--17 color1">建议措施：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">问题数量：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">扣除积分：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">附加分数：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">备注：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">备注：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="复查记录（无）" name="second">
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">复合内容：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
          <div class="oa" style="height: 700px">
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">复合内容：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">复合状态：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">复合状态：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">复合图片：</div>
                <div
                  class="lh--60 px--19 btnColor SHSBold fs--18 w100 cursor-pointer"
                  :class="false && 'disableColor'"
                  @click="previewVisible = true"
                >
                  1张
                </div>
              </div>
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">复核人：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">复合图片：</div>
              <div
                class="lh--60 px--19 btnColor SHSBold fs--18 w100 cursor-pointer"
                :class="false && 'disableColor'"
                @click="previewVisible = true"
              >
                1张
            <div class="flex j-between gap--30 mt--30">
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">创建时间：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">复核人：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">创建时间：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">更新时间：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              <div class="flex1">
                <div class="SHSR fs--16 lh--16 mb--17 color1">更新时间：</div>
                <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                  计划名称计划名称计划名称
                </div>
              </div>
            </div>
          </div>
@@ -453,6 +462,7 @@
      activeTab: 1,
      dateTime: null,
      projectId: null,
      projectName: "",
      dateTxt: "",
      currentPage: 1,
      updatePeople: false,
@@ -476,6 +486,12 @@
  created() {
    if (this.$route.query.activeTab) {
      this.activeTab = this.$route.query.activeTab;
    }
    if (this.$route.query.projectId) {
      this.projectId = this.$route.query.projectId;
    }
    if (this.$route.query.projectName) {
      this.projectName = this.$route.query.projectName;
    }
  },
  mounted() {},
@@ -586,6 +602,10 @@
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
@@ -666,4 +686,65 @@
    }
  }
}

.ripple {
  position: relative;
  width: 14px;
  height: 14px;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wave-1 {
  width: 14px;
  height: 14px;
  background-color: rgba(255, 55, 95, 1);
}

.wave-2 {
  width: 20px;
  height: 20px;
  background-color: rgba(255, 55, 95, 0.6);
  animation: ripple-effect 2s ease-out infinite;
}

.wave-3 {
  width: 24px;
  height: 24px;
  background-color: rgba(255, 55, 95, 0.4);
  animation: ripple-effect 2s ease-out infinite 1s;
}

.bgColor33 {
  background: rgba(67, 221, 189, 1) !important;
}

.bgColor44 {
  background: rgba(67, 221, 189, 0.6) !important;
}

.bgColor55 {
  background: rgba(67, 221, 189, 0.4) !important;
}

@keyframes ripple-effect {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 1;
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}
</style>

 screen/src/view/home/index.vue

@@ -930,6 +930,10 @@
      display: none;
    }

  ::v-deep .el-range-separator {
    display: none;
  }

    ::v-deep .el-input__inner {
      background: transparent;
      border: none;

 screen/src/view/majorRisk/index.vue

New file
@@ -0,0 +1,356 @@
<template>
  <div>
    <HeaderBox :title="projectName" />
    <div class="pt--35 px--20 pb--54">
      <!-- 返回 -->
      <div @click="backFun" class="flex a-center cursor-pointer">
        <img
          src="../../assets/img/back.png"
          class="w--22 h--20 shrink0 mr--13"
        />
        <div class="c-fff lh--22 fs--22 SHSBold">重大风险源</div>
      </div>
      <!-- 搜索 -->
      <div class="flex a-center gap--16 mt--24 mb--20">
        <div
          @click="handleClick(1)"
          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
        >
          <el-date-picker
            v-model="dateTime"
            ref="datetime1"
            type="datetime"
            placeholder=""
          >
          </el-date-picker>
          <div
            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
            style="width: calc(100% - 20px)"
            v-if="dateTxt"
          >
            {{ dateTxt }}
          </div>
          <div
            v-else
            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
          >
            请选择日期
          </div>
          <img
            src="../../assets/img/home/Shape@2x (6).png"
            class="w--13 h--13 shrink0"
          />
        </div>
        <div
          @click="handleClick(2)"
          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
        >
          <el-date-picker
            v-model="dateTime"
            ref="datetime2"
            type="datetime"
            placeholder=""
          >
          </el-date-picker>
          <div
            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
            style="width: calc(100% - 20px)"
            v-if="dateTxt"
          >
            {{ dateTxt }}
          </div>
          <div
            v-else
            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
          >
            请选择日期
          </div>
          <img
            src="../../assets/img/home/Shape@2x (6).png"
            class="w--13 h--13 shrink0"
          />
        </div>
        <div
          class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
        >
          <el-select
            filterable
            v-model="projectId"
            placeholder="请输入搜索内容"
            class="flex1"
          >
            <el-option
              v-for="item in [1, 2]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <div class="btn SHSR">搜索</div>
        </div>
      </div>
      <!-- 表格 -->
      <CustomTable
        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
        height="800"
        style="border: 2px solid #3d7fff"
      >
        <el-table-column label="序号">
          <template #default="{ row, $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="projectName" />
        <el-table-column label="项目详情" prop="projectName" />
        <el-table-column label="形象进度" prop="projectName" />
        <el-table-column label="危大工程" prop="projectName" />
        <el-table-column label="超危大工程" prop="projectName" />
        <el-table-column label="近一季度施工进展情况" prop="projectName" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              @click="detailVisible = true"
              type="text"
              class="btnColor"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </CustomTable>
      <CustomPagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="10"
        :total="400"
      />
    </div>
    <!-- 详情弹窗 -->
    <CustomDialog title="项目详情" :visible.sync="detailVisible" width="1420px">
      <div class="oa" style="height: 700px">
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">项目详情：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">形象进度：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">危大工程：</div>
            <div class="flex a-center oa gap--14 flex-warp">
              <div v-for="item in 10" :key="item" class="tagItem">111</div>
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">超危大工程：</div>
            <div class="flex a-center oa gap--14 flex-warp">
              <div v-for="item in 10" :key="item" class="tagItem">111</div>
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">
              近一季度施工进展情况：
            </div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">更新时间：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              2020-12-12
            </div>
          </div>
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
export default {
  components: { HeaderBox },
  props: {},
  data() {
    return {
      dateTime: null,
      projectId: null,
      projectName: null,
      dateTxt: "",
      currentPage: 1,
      detailVisible: false,
    };
  },
  computed: {},
  watch: {
    dateTime: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.dateTxt = moment(newVal).format("YYYY年MM月DD日 HH:mm:ss");
        }
      },
      immediate: true,
    },
  },
  created() {
    this.projectId = this.$route.query.projectId;
    this.projectName = this.$route.query.projectName;
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClick(type) {
      this.$refs[`datetime${type}`].focus();
    },

    backFun() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="less">
.color1 {
  color: rgba(255, 255, 255, 0.9);
}

.bgcolor1 {
  background: rgba(2, 0, 77, 0.8);
  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
  border: 2px solid #0d53b7;
}

.bgColor2 {
  background: rgba(24, 69, 135, 0.9);
}

.bgColor3 {
  background: rgba(67, 221, 189, 1) !important;
}

.bgColor4 {
  background: rgba(67, 221, 189, 0.6) !important;
}

.bgColor5 {
  background: rgba(67, 221, 189, 0.4) !important;
}

.bgcolor6 {
  background: linear-gradient(270deg, #64aef0 0%, #4b70ec 100%);
}

.bgcolor7 {
  background: linear-gradient(270deg, #3dabea 0%, #28a5ec 100%);
}

.bgcolor8 {
  background: rgba(24, 83, 200, 0.2);
}

.tagItem {
  flex-shrink: 0;
  line-height: 30px;
  padding: 0 12px;
  color: #fff;
  background: rgba(24, 83, 200, 0.2);
}

.picker {
  ::v-deep .el-input__icon {
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: transparent;
  }

  ::v-deep .el-range-input {
    background: transparent;
    border: none;
    color: transparent;
  }
}

.searchBox {
  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
  }

  ::v-deep .el-input__suffix {
    display: none;
  }

  .btn {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(
      90deg,
      #3467d0 0%,
      #0d226a 50.35%,
      #376fe0 100%
    );
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    padding: 0 26px;
    border: 1px solid #307ad9;
    box-sizing: border-box;
    cursor: pointer;
  }
}

.btnColor {
  color: #00ebfc;
}

::v-deep .el-descriptions {
  .el-descriptions__body {
    background-color: transparent;

    .el-descriptions-item__container {
      color: #ffffff;
      font-family: "Source Han Sans CN Regular";
    }
  }
}
</style>

 screen/src/view/personnelOnDuty/index.vue

New file
@@ -0,0 +1,522 @@
<template>
  <div>
    <HeaderBox :title="projectName" />
    <div class="pt--35 px--20 pb--54">
      <!-- 返回 -->
      <div @click="backFun" class="flex a-center cursor-pointer">
        <img
          src="../../assets/img/back.png"
          class="w--22 h--20 shrink0 mr--13"
        />
        <div class="c-fff lh--22 fs--22 SHSBold">人员在岗信息</div>
      </div>
      <!-- 搜索 -->
      <div class="flex a-center gap--16 mt--24 mb--20">
        <div
          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
        >
          <el-select
            filterable
            v-model="projectId"
            placeholder="请选择检查计划"
            class="flex1"
          >
            <el-option
              v-for="item in [1, 2]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <img
            src="../../assets/img/down-circle@2x.png"
            class="w--15 h--16 shrink0"
          />
        </div>
        <div
          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
        >
          <el-select
            filterable
            v-model="projectId"
            placeholder="请选择岗位"
            class="flex1"
          >
            <el-option
              v-for="item in [1, 2]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <img
            src="../../assets/img/down-circle@2x.png"
            class="w--15 h--16 shrink0"
          />
        </div>
        <div
          @click="handleClick(1)"
          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
        >
          <el-date-picker
            v-model="dateTime"
            ref="datetime1"
            type="datetime"
            placeholder=""
          >
          </el-date-picker>
          <div
            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
            style="width: calc(100% - 20px)"
            v-if="dateTxt"
          >
            {{ dateTxt }}
          </div>
          <div
            v-else
            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
          >
            请选择日期
          </div>
          <img
            src="../../assets/img/home/Shape@2x (6).png"
            class="w--13 h--13 shrink0"
          />
        </div>
        <div
          @click="handleClick(2)"
          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
        >
          <el-date-picker
            v-model="dateTime"
            ref="datetime2"
            type="datetime"
            placeholder=""
          >
          </el-date-picker>
          <div
            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
            style="width: calc(100% - 20px)"
            v-if="dateTxt"
          >
            {{ dateTxt }}
          </div>
          <div
            v-else
            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
          >
            请选择日期
          </div>
          <img
            src="../../assets/img/home/Shape@2x (6).png"
            class="w--13 h--13 shrink0"
          />
        </div>
        <div
          class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
        >
          <el-select
            filterable
            v-model="projectId"
            placeholder="请输入搜索内容"
            class="flex1"
          >
            <el-option
              v-for="item in [1, 2]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <div class="btn SHSR">搜索</div>
        </div>
      </div>
      <!-- 表格 -->
      <CustomTable
        :data="[
          { projectName: '项目777' },
          { projectName: '项目2' },
          { projectName: '项目4' },
        ]"
        height="800"
        style="border: 2px solid #3d7fff"
      >
        <el-table-column label="计划名称" prop="projectName" />
        <el-table-column label="检查内容" prop="projectName" />
        <el-table-column label="岗位" prop="projectName" />
        <el-table-column label="问题备注" prop="projectName" />
        <el-table-column label="图片" prop="projectName">
          <template #default="{ row }"
            ><div
              class="btnColor cursor-pointer"
              :class="false && 'disableColor'"
              @click="previewVisible = true"
            >
              1张
            </div>
          </template>
        </el-table-column>
        <el-table-column label="检查时间" prop="projectName" />
        <el-table-column label="在岗情况" prop="projectName">
          <template #default="{ row, $index }">
            <div class="flex a-center j-center">
              <div class="ripple">
                <div
                  class="ripple-wave wave-1"
                  :class="['bgColor33', 'bgColor66'][$index + 1]"
                ></div>
                <div
                  class="ripple-wave wave-2"
                  :class="['bgColor44', 'bgColor77'][$index + 1]"
                ></div>
                <div
                  class="ripple-wave wave-3"
                  :class="['bgColor55', 'bgColor88'][$index + 1]"
                ></div>
              </div>
              <div class="ml--6 SHSR">{{ $index }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              @click="detailVisible = true"
              type="text"
              class="btnColor"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </CustomTable>
      <CustomPagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="10"
        :total="400"
      />
    </div>
    <!-- 详情弹窗 -->
    <CustomDialog title="项目详情" :visible.sync="detailVisible" width="1420px">
      <div class="oa" style="height: 700px">
        <div class="flex j-between gap--30 mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">计划名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">项目名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">检查内容：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">岗位：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
          </div>
          <div class="flex j-between gap--30 mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">问题备注：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">在岗情况：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
                计划名称计划名称计划名称
              </div>
            </div>
          </div>
          <div class="mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">检查时间：</div>
              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
                2020-12-12
              </div>
            </div>
          </div>
          <div class="mt--30">
            <div class="flex1">
              <div class="SHSR fs--16 lh--16 mb--17 color1">图片：</div>
              <div class="flex a-center oa gap--14">
                <img
                  v-for="item in 6"
                  :key="item"
                  src="../../assets/img/home/@3x@2x.png"
                  class="w--150 h--120"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </CustomDialog>
    <!-- 图片预览 -->
    <CustomPreview
      :show="previewVisible"
      :imgArr="[]"
      @close="previewVisible = false"
    />
  </div>
</template>

<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
export default {
  components: { HeaderBox },
  props: {},
  data() {
    return {
      dateTime: null,
      projectId: null,
      projectName: null,
      dateTxt: "",
      currentPage: 1,
      detailVisible: false,
      previewVisible: false,
    };
  },
  computed: {},
  watch: {
    dateTime: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.dateTxt = moment(newVal).format("YYYY年MM月DD日 HH:mm:ss");
        }
      },
      immediate: true,
    },
  },
  created() {
    this.projectId = this.$route.query.projectId;
    this.projectName = this.$route.query.projectName;
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClick(type) {
      this.$refs[`datetime${type}`].focus();
    },

    backFun() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="less">
.color1 {
  color: rgba(255, 255, 255, 0.9);
}

.bgcolor1 {
  background: rgba(2, 0, 77, 0.8);
  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
  border: 2px solid #0d53b7;
}

.bgColor2 {
  background: rgba(24, 69, 135, 0.9);
}

.bgColor3 {
  background: rgba(67, 221, 189, 1) !important;
}

.bgColor4 {
  background: rgba(67, 221, 189, 0.6) !important;
}

.bgColor5 {
  background: rgba(67, 221, 189, 0.4) !important;
}

.bgcolor6 {
  background: linear-gradient(270deg, #64aef0 0%, #4b70ec 100%);
}

.bgcolor7 {
  background: linear-gradient(270deg, #3dabea 0%, #28a5ec 100%);
}

.bgcolor8 {
  background: rgba(24, 83, 200, 0.2);
}

.tagItem {
  flex-shrink: 0;
  line-height: 30px;
  padding: 0 12px;
  color: #fff;
  background: rgba(24, 83, 200, 0.2);
}

.picker {
  ::v-deep .el-input__icon {
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: transparent;
  }

  ::v-deep .el-range-input {
    background: transparent;
    border: none;
    color: transparent;
  }
}

.searchBox {
  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
  }

  ::v-deep .el-input__suffix {
    display: none;
  }

  .btn {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(
      90deg,
      #3467d0 0%,
      #0d226a 50.35%,
      #376fe0 100%
    );
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    padding: 0 26px;
    border: 1px solid #307ad9;
    box-sizing: border-box;
    cursor: pointer;
  }
}

.btnColor {
  color: #00ebfc;
}

::v-deep .el-descriptions {
  .el-descriptions__body {
    background-color: transparent;

    .el-descriptions-item__container {
      color: #ffffff;
      font-family: "Source Han Sans CN Regular";
    }
  }
}
.ripple {
  position: relative;
  width: 14px;
  height: 14px;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wave-1 {
  width: 14px;
  height: 14px;
  background-color: rgba(255, 55, 95, 1);
}

.wave-2 {
  width: 20px;
  height: 20px;
  background-color: rgba(255, 55, 95, 0.6);
  animation: ripple-effect 2s ease-out infinite;
}

.wave-3 {
  width: 24px;
  height: 24px;
  background-color: rgba(255, 55, 95, 0.4);
  animation: ripple-effect 2s ease-out infinite 1s;
}

.bgColor33 {
  background: rgba(67, 221, 189, 1) !important;
}

.bgColor44 {
  background: rgba(67, 221, 189, 0.6) !important;
}

.bgColor55 {
  background: rgba(67, 221, 189, 0.4) !important;
}

.bgColor66 {
  background: rgba(221, 211, 67, 1) !important;
}

.bgColor77 {
  background: rgba(221, 211, 67, 0.6) !important;
}

.bgColor88 {
  background: rgba(221, 211, 67, 0.4) !important;
}

@keyframes ripple-effect {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 1;
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}
</style>

 screen/src/view/planOfAudit/index.vue

New file
@@ -0,0 +1,474 @@
<template>
  <div>
    <HeaderBox :title="projectName" />
    <div class="pt--35 px--20 pb--54">
      <!-- 返回 -->
      <div @click="backFun" class="flex a-center cursor-pointer">
        <img
          src="../../assets/img/back.png"
          class="w--22 h--20 shrink0 mr--13"
        />
        <div class="c-fff lh--22 fs--22 SHSBold">检查计划列表</div>
      </div>
      <!-- 搜索 -->
      <div class="flex a-center gap--16 mt--24 mb--20">
        <div
          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
        >
          <el-select
            filterable
            v-model="projectId"
            placeholder="请选择计划类型"
            class="flex1"
          >
            <el-option
              v-for="item in [1, 2]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <img
            src="../../assets/img/down-circle@2x.png"
            class="w--15 h--16 shrink0"
          />
        </div>
        <div
          @click="handleClick(1)"
          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
        >
          <el-date-picker
            v-model="dateTime"
            ref="datetime1"
            type="datetime"
            placeholder=""
          >
          </el-date-picker>
          <div
            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
            style="width: calc(100% - 20px)"
            v-if="dateTxt"
          >
            {{ dateTxt }}
          </div>
          <div
            v-else
            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
          >
            请选择日期
          </div>
          <img
            src="../../assets/img/home/Shape@2x (6).png"
            class="w--13 h--13 shrink0"
          />
        </div>
        <div
          @click="handleClick(2)"
          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
        >
          <el-date-picker
            v-model="dateTime"
            ref="datetime2"
            type="datetime"
            placeholder=""
          >
          </el-date-picker>
          <div
            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
            style="width: calc(100% - 20px)"
            v-if="dateTxt"
          >
            {{ dateTxt }}
          </div>
          <div
            v-else
            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
          >
            请选择日期
          </div>
          <img
            src="../../assets/img/home/Shape@2x (6).png"
            class="w--13 h--13 shrink0"
          />
        </div>
        <div
          class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
        >
          <el-select
            filterable
            v-model="projectId"
            placeholder="请输入搜索内容"
            class="flex1"
          >
            <el-option
              v-for="item in [1, 2]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <div class="btn SHSR">搜索</div>
        </div>
      </div>
      <!-- 表格 -->
      <CustomTable
        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
        height="800"
        style="border: 2px solid #3d7fff"
      >
        <el-table-column label="检查计划" prop="projectName" />
        <el-table-column label="计划类型" prop="projectName" />
        <el-table-column label="检查时间" prop="projectName" />
        <el-table-column label="本月检查风险" prop="projectName" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              @click="projectVisible = true"
              type="text"
              class="btnColor"
              >检查资料</el-button
            >
            <el-popover trigger="click" popper-class="custom-popper">
              <template #reference>
                <el-button type="text" class="btnColor">查看报告</el-button>
              </template>
              <div
                class="h100 flex flex-column a-center j-between c-fff fs--16 SHSBold"
              >
                <div
                  @click="openReport('safe')"
                  class="py--12 w100 txt-center br--10 bgcolor6 cursor-pointer"
                >
                  安全报告
                </div>
                <div
                  @click="openReport('device')"
                  class="py--12 w100 txt-center br--10 bgcolor7 cursor-pointer"
                >
                  设备报告
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </CustomTable>
      <CustomPagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="10"
        :total="400"
      />
    </div>
    <!-- 检查资料列表弹窗 -->
    <CustomDialog title="项目" :visible.sync="projectVisible" width="1420px">
      <CustomTable
        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
        height="630"
      >
        <el-table-column label="检查标题" prop="projectName" />
        <el-table-column label="检查时间" prop="projectName" />
        <el-table-column label="安全告知单" prop="projectName" />
        <el-table-column label="检查人员照片" prop="projectName" />
        <el-table-column label="廉政告知单" prop="projectName" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              @click="detailVisible = true"
              type="text"
              class="btnColor"
              >详情</el-button
            ></template
          >
        </el-table-column>
      </CustomTable>
    </CustomDialog>
    <!-- 检查报告弹窗 -->
    <CustomDialog title="检查报告" :visible.sync="reportVisible" width="1420px">
      <div style="height: 691px" class="oa">
        <iframe
          v-if="reportUrl"
          :src="reportUrl"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
      </div>
    </CustomDialog>
    <!-- 检查资料详情弹窗 -->
    <CustomDialog
      title="检查资料详情"
      :visible.sync="detailVisible"
      width="1420px"
    >
      <div class="oa" style="height: 700px">
        <div class="flex j-between gap--30 mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">计划名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">项目名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
        </div>
        <div class="flex j-between gap--30 mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">检测标题：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">检测时间：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              计划名称计划名称计划名称
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">安全告知单：</div>
            <div class="flex a-center oa gap--14">
              <img
                v-for="item in 6"
                :key="item"
                src="../../assets/img/home/@3x@2x.png"
                class="w--150 h--120"
              />
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">检查人员照片：</div>
            <div class="flex a-center oa gap--14">
              <img
                v-for="item in 6"
                :key="item"
                src="../../assets/img/home/@3x@2x.png"
                class="w--150 h--120"
              />
            </div>
          </div>
        </div>
        <div class="mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">廉政告知单：</div>
            <div class="flex a-center oa gap--14">
              <img
                v-for="item in 6"
                :key="item"
                src="../../assets/img/home/@3x@2x.png"
                class="w--150 h--120"
              />
            </div>
          </div>
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
export default {
  components: { HeaderBox },
  props: {},
  data() {
    return {
      dateTime: null,
      projectId: null,
      projectName: null,
      dateTxt: "",
      currentPage: 1,
      projectVisible: false,
      reportVisible: false,
      detailVisible: false,
      reportUrl: "",
      safeReportUrl:
        "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
      deviceReportUrl:
        "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
    };
  },
  computed: {},
  watch: {
    dateTime: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.dateTxt = moment(newVal).format("YYYY年MM月DD日 HH:mm:ss");
        }
      },
      immediate: true,
    },
  },
  created() {
    this.projectId = this.$route.query.projectId;
    this.projectName = this.$route.query.projectName;
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClick(type) {
      this.$refs[`datetime${type}`].focus();
    },

    backFun() {
      this.$router.go(-1);
    },
    openReport(type) {
      if (type === "safe") {
        this.reportUrl = this.safeReportUrl;
      } else if (type === "device") {
        this.reportUrl = this.deviceReportUrl;
      } else {
        this.reportUrl = "";
      }
      this.reportVisible = !!this.reportUrl;
    },
  },
};
</script>
<style lang="less">
.custom-popper {
  background: transparent;
  background-image: url("../../assets/img/home/77Combined Shape@2x.png");
  background-size: 100% 100%;
  padding: 31px 38px;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  width: 227px;
  height: 180px;

  .popper__arrow {
    display: none;
  }
}
</style>
<style scoped lang="less">
.color1 {
  color: rgba(255, 255, 255, 0.9);
}

.bgcolor1 {
  background: rgba(2, 0, 77, 0.8);
  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
  border: 2px solid #0d53b7;
}

.bgColor2 {
  background: rgba(24, 69, 135, 0.9);
}

.bgColor3 {
  background: rgba(67, 221, 189, 1) !important;
}

.bgColor4 {
  background: rgba(67, 221, 189, 0.6) !important;
}

.bgColor5 {
  background: rgba(67, 221, 189, 0.4) !important;
}

.bgcolor6 {
  background: linear-gradient(270deg, #64aef0 0%, #4b70ec 100%);
}

.bgcolor7 {
  background: linear-gradient(270deg, #3dabea 0%, #28a5ec 100%);
}

.bgcolor8 {
  background: rgba(24, 83, 200, 0.2);
}

.picker {
  ::v-deep .el-input__icon {
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: transparent;
  }

  ::v-deep .el-range-input {
    background: transparent;
    border: none;
    color: transparent;
  }
}

.searchBox {
  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
  }

  ::v-deep .el-input__suffix {
    display: none;
  }

  .btn {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(
      90deg,
      #3467d0 0%,
      #0d226a 50.35%,
      #376fe0 100%
    );
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    padding: 0 26px;
    border: 1px solid #307ad9;
    box-sizing: border-box;
    cursor: pointer;
  }
}

.btnColor {
  color: #00ebfc;
}

::v-deep .el-descriptions {
  .el-descriptions__body {
    background-color: transparent;

    .el-descriptions-item__container {
      color: #ffffff;
      font-family: "Source Han Sans CN Regular";
    }
  }
}
</style>

 screen/src/view/projectHome/index.vue

@@ -71,7 +71,7 @@
                </div>
              </div>
              <div class="info-item">
                <div class=" flex">
                <div class="flex">
                  <div class="label time">最近一次检查时间</div>
                  <div class="value">SPS-2021-01-01</div>
                </div>
@@ -80,12 +80,16 @@
          </template>
        </TitleBox>
      </div>
      <div class="mt--30">
      <div class="mt--30" @click="toEquipmentInfo">
        <TitleBox>
          <template #title> 设备信息 </template>
          <template #content>
            <div class="equipment-info">
              <img src="../../assets//img/project/chartBg.png" class="chart-bg" alt="">
              <img
                src="../../assets//img/project/chartBg.png"
                class="chart-bg"
                alt=""
              />
              <div class="pie-canvas" ref="pieChart"></div>
              <div class="legend">
                <div class="legend-item" v-for="(it, idx) in legendData" :key="idx">
@@ -127,13 +131,15 @@
                  <div class="item-type">文明施工</div>
                  <div class="item-number">
                    <div class="flex a--center">
                      <div class="flex a--center"><span>本月</span>
                      <div class="flex a--center">
                        <span>本月</span>
                        <div class="number">25</div>
                      </div>
                      <div class="now"></div>
                    </div>
                    <div class="flex a--center">
                      <div class="flex a--center"><span>上月</span>
                      <div class="flex a--center">
                        <span>上月</span>
                        <div class="number">25</div>
                      </div>
                      <div class="before"></div>
@@ -144,18 +150,16 @@
              </div>

              <div class="info-bottom"></div>

            </div>
          </template>
        </TitleBox>
      </div>

    </div>
    <!-- 中间内容 -->
    <div class="mid-card">
      <div class="mid-info">
      <div @click="toHiddenDanger(1)" class="mid-info">
        <div class="flex a--center">
          <div class="mid-title">隐患数量</div>
          <div @click.stop="toHiddenDanger(2)" class="mid-title">隐患数量</div>
          <div class="flex a--center tab-border">
            <div class="mid-tab">所有隐患数</div>
            <div class="mid-tab active-tab">重大隐患数</div>
@@ -178,7 +182,7 @@
          </div>
        </div>
      </div>
      <div class="mid-more">查看报告</div>
      <div @click="toPlanOfAudit" class="mid-more">查看报告</div>
    </div>
    <!-- 右边 -->
    <div class="right-card">
@@ -186,7 +190,7 @@
        <TitleBox>
          <template #title>人员在岗率 </template>
          <template #right>
            <div class="card-more">
            <div @click="toPersonnelOnDuty" class="card-more">
              <span>详情</span>
              <img src="../../assets/img/project/more.png" />
            </div>
@@ -196,8 +200,15 @@
              <div class="people-card">
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -207,8 +218,15 @@
                </div>
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -218,8 +236,15 @@
                </div>
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -231,8 +256,15 @@
              <div class="people-card2">
                <div class="people-item mr--67">
                  <div class="people-chart">
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -242,8 +274,15 @@
                </div>
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -260,7 +299,7 @@
        <TitleBox>
          <template #title>重大风险源 </template>
          <template #right>
            <div class="card-more">
            <div @click="toMajorRiskList" class="card-more">
              <span>详情</span>
              <img src="../../assets/img/project/more.png" />
            </div>
@@ -337,7 +376,7 @@
<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
import * as echarts from 'echarts'
import * as echarts from "echarts";
export default {
  components: {
    HeaderBox,
@@ -426,15 +465,60 @@
      immediate: true,
    },
  },
  created() { },
  created() {},
  mounted() {
    this.setMapload()
    this.initPie3D()
    this.initRiskChart()
  },
  beforeDestroy() {
  },
  beforeDestroy() {},
  methods: {
    toPersonnelOnDuty() {
      this.$router.push({
        path: "/personnelOnDuty",
        query: {
          projectId: 111,
          projectName: '项目1',
        },
      });
    },
    toHiddenDanger(type) {
      this.$router.push({
        path: "/hiddenDanger",
        query: {
          projectId: 111,
          projectName: '项目1',
          activeTab: type,
        },
      });
    },
    toEquipmentInfo() {
      this.$router.push({
        path: "/equipmentList",
        query: {
          projectId: 111,
          projectName: '项目1',
        },
      });
    },
    toMajorRiskList() {
      this.$router.push({
        path: "/majorRisk",
        query: {
          projectId: 111,
          projectName: '项目1',
        },
      });
    },
    toPlanOfAudit() {
      this.$router.push({
        path: "/planOfAudit",
        query: {
          projectId: 111,
          projectName: '项目1',
        },
      });
    },
    setMapload() {
      AMapLoader.load({
        key: "232929db1cb31f26d42b3645a7456154",
@@ -459,9 +543,9 @@
    },
    // 初始化 3D 环饼图（echarts-gl）
    initPie3D() {
      const el = this.$refs.pieChart
      if (!el) return
      this._pie = echarts.init(el)
      const el = this.$refs.pieChart;
      if (!el) return;
      this._pie = echarts.init(el);

      // 使用动态数据或默认数据
      const data = this.legendData.length > 0 ? this.legendData : [];
@@ -475,40 +559,43 @@
          tooltip: {
            show: true,
          },
          data: data.map(item => item.name),
          right: '2%',
          top: 'center',
          data: data.map((item) => item.name),
          right: "2%",
          top: "center",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: '#fff',
            color: "#fff",
            fontSize: 12,
          },
          show: false
          show: false,
        },
        graphic: {
          elements: [
            {
              type: 'circle',
              type: "circle",
              shape: {
                cx: '50%',
                cy: '50%',
                r: '35%'
                cx: "50%",
                cy: "50%",
                r: "35%",
              },
              style: {
                fill: 'transparent',
                fill: "transparent",
                shadowBlur: 20,
                shadowColor: 'rgba(0, 191, 255, 0.4)',
                opacity: 0.6
                shadowColor: "rgba(0, 191, 255, 0.4)",
                opacity: 0.6,
              },
              z: -1
            }
          ]
              z: -1,
            },
          ],
        },
        animation: true,
        tooltip: {
          formatter: params => {
            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
          formatter: (params) => {
            if (
              params.seriesName !== "mouseoutSeries" &&
              params.seriesName !== "pie2d"
            ) {
              const series = option.series[params.seriesIndex];
              if (series && series.pieData) {
                return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${series.pieData.value}`;
@@ -516,29 +603,29 @@
            }
          },
          textStyle: {
            fontSize: 12
          },
        },
        title: {
          x: 'center',
          top: '20',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        backgroundColor: 'transparent',
        title: {
          x: "center",
          top: "20",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        backgroundColor: "transparent",
        labelLine: {
          show: false,
          lineStyle: {
            color: 'transparent',
            color: "transparent",
          },
        },
        label: {
          show: false,
          color: 'transparent',
          position: 'outside',
          formatter: '{b} \n{c} {d}%',
          color: "transparent",
          position: "outside",
          formatter: "{b} \n{c} {d}%",
        },
        xAxis3D: {
          min: -1,
@@ -555,8 +642,8 @@
        grid3D: {
          show: false,
          boxHeight: 2,
          bottom: '-10%',
          left: '-15%',
          bottom: "-10%",
          left: "-15%",
          viewControl: {
            alpha: 18,
            beta: 50,
@@ -564,8 +651,8 @@
            autoRotate: true,
            rotateSensitivity: 0,
            zoomSensitivity: 0,
            panSensitivity: 0
          }
            panSensitivity: 0,
          },
        },
        series: series,
      };
@@ -574,11 +661,11 @@
      this._pie.setOption(option);

      // 鼠标事件交互
      let selectedIndex = '';
      let hoveredIndex = '';
      let selectedIndex = "";
      let hoveredIndex = "";

      this._pie.on('click', (params) => {
        if (params.seriesName === 'mouseoutSeries') return;
      this._pie.on("click", (params) => {
        if (params.seriesName === "mouseoutSeries") return;
        const s = option.series[params.seriesIndex];
        if (!s || !s.pieData || !s.pieStatus) return;

@@ -588,41 +675,69 @@
        const startRatio = s.pieData.startRatio;
        const endRatio = s.pieData.endRatio;

        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
          const prev = option.series[selectedIndex];
          if (prev && prev.pieData && prev.pieStatus) {
            prev.parametricEquation = this.getParametricEquation(prev.pieData.startRatio, prev.pieData.endRatio, false, false, k, prev.pieData.value);
            prev.parametricEquation = this.getParametricEquation(
              prev.pieData.startRatio,
              prev.pieData.endRatio,
              false,
              false,
              k,
              prev.pieData.value
            );
            prev.pieStatus.selected = false;
          }
        }

        s.parametricEquation = this.getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, s.pieData.value);
        s.parametricEquation = this.getParametricEquation(
          startRatio,
          endRatio,
          isSelected,
          isHovered,
          k,
          s.pieData.value
        );
        s.pieStatus.selected = isSelected;
        if (isSelected) selectedIndex = params.seriesIndex;

        this._pie.setOption(option);
      });

      this._pie.on('mouseover', (params) => {
      this._pie.on("mouseover", (params) => {
        if (hoveredIndex === params.seriesIndex) return;

        // 取消之前的高亮
        if (hoveredIndex !== '') {
        if (hoveredIndex !== "") {
          let prev = option.series[hoveredIndex];
          if (prev && prev.pieData && prev.pieStatus) {
            const k = prev.pieStatus.k;
            prev.parametricEquation = this.getParametricEquation(prev.pieData.startRatio, prev.pieData.endRatio, prev.pieStatus.selected, false, k, prev.pieData.value);
            prev.parametricEquation = this.getParametricEquation(
              prev.pieData.startRatio,
              prev.pieData.endRatio,
              prev.pieStatus.selected,
              false,
              k,
              prev.pieData.value
            );
            prev.pieStatus.hovered = false;
            hoveredIndex = '';
            hoveredIndex = "";
          }
        }

        // 当前高亮（排除透明圆环）
        if (params.seriesName !== 'mouseoutSeries') {
        if (params.seriesName !== "mouseoutSeries") {
          let cur = option.series[params.seriesIndex];
          if (cur && cur.pieData && cur.pieStatus) {
            const k = cur.pieStatus.k;
            cur.parametricEquation = this.getParametricEquation(cur.pieData.startRatio, cur.pieData.endRatio, cur.pieStatus.selected, true, k, cur.pieData.value);
            cur.parametricEquation = this.getParametricEquation(
              cur.pieData.startRatio,
              cur.pieData.endRatio,
              cur.pieStatus.selected,
              true,
              k,
              cur.pieData.value
            );
            cur.pieStatus.hovered = true;
            hoveredIndex = params.seriesIndex;
          }
@@ -631,14 +746,21 @@
        this._pie.setOption(option);
      });

      this._pie.on('globalout', () => {
        if (hoveredIndex !== '') {
      this._pie.on("globalout", () => {
        if (hoveredIndex !== "") {
          let prev = option.series[hoveredIndex];
          if (prev && prev.pieData && prev.pieStatus) {
            const k = prev.pieStatus.k;
            prev.parametricEquation = this.getParametricEquation(prev.pieData.startRatio, prev.pieData.endRatio, prev.pieStatus.selected, false, k, prev.pieData.value);
            prev.parametricEquation = this.getParametricEquation(
              prev.pieData.startRatio,
              prev.pieData.endRatio,
              prev.pieStatus.selected,
              false,
              k,
              prev.pieData.value
            );
            prev.pieStatus.hovered = false;
            hoveredIndex = '';
            hoveredIndex = "";
            this._pie.setOption(option);
          }
        }
@@ -646,7 +768,14 @@
    },

    // 生成扇形的曲面参数方程
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
    getParametricEquation(
      startRatio,
      endRatio,
      isSelected,
      isHovered,
      k,
      height
    ) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2;

@@ -660,7 +789,7 @@
      }

      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3;
      k = typeof k !== "undefined" ? k : 1 / 3;

      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
@@ -674,40 +803,50 @@
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
          step: Math.PI / 32,
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
          step: Math.PI / 20,
        },
        x: function (u, v) {
          if (u < startRadian) {
            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        y: function (u, v) {
          if (u < startRadian) {
            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        z: function (u, v) {
          if (u < - Math.PI * 0.5) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u);
          }
          return Math.sin(v) > 0 ? 0.6 * height : -0.6;
        }
        },
      };
    },

@@ -718,32 +857,42 @@
      let startValue = 0;
      let endValue = 0;
      let legendData = [];
      let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
      let k =
        typeof internalDiameterRatio !== "undefined"
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;

      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value;

        let seriesItem = {
          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
          type: 'surface',
          name:
            typeof pieData[i].name === "undefined"
              ? `series${i}`
              : pieData[i].name,
          type: "surface",
          parametric: true,
          wireframe: {
            show: false
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          }
            k: k,
          },
        };

        if (typeof pieData[i].itemStyle != 'undefined') {
        if (typeof pieData[i].itemStyle != "undefined") {
          let itemStyle = {};

          typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
          typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
          typeof pieData[i].itemStyle.color != "undefined"
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null;
          typeof pieData[i].itemStyle.opacity != "undefined"
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null;

          seriesItem.itemStyle = itemStyle;
        }
@@ -757,7 +906,14 @@
        console.log(series[i]);
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        );

        startValue = endValue;

@@ -942,20 +1098,19 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;

  span {
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    color: #ffffff;
    line-height: 12px;
  }

  img {
    width: 12px;
    height: 12px;

  }

}

.left-card {
@@ -986,7 +1141,7 @@
    .label {
      font-weight: 500;
      font-size: 12px;
      color: #DCDFE6;
      color: #dcdfe6;
      flex-shrink: 0;
      width: 64px;
    }
@@ -1002,7 +1157,7 @@
    .value {
      font-weight: bold;
      font-size: 12px;
      color: #4CEFE6;
      color: #4cefe6;
      max-width: 144px;
    }
  }
@@ -1137,14 +1292,13 @@
      span {
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        color: #ffffff;
      }
    }

    .info-body {
      height: 363px;
      overflow-y: auto;

    }

    .info-item {
@@ -1155,7 +1309,7 @@
      align-items: center;

      &:nth-child(2n) {
        background: rgba(14, 95, 255, .2);
        background: rgba(14, 95, 255, 0.2);
      }

      .item-type {
@@ -1163,7 +1317,7 @@
        text-align: left;
        font-weight: bold;
        font-size: 12px;
        color: #FFFFFF;
        color: #ffffff;
        line-height: 18px;
      }

@@ -1185,13 +1339,13 @@
          font-weight: 400;
          font-size: 10px;
          line-height: 15px;
          color: rgba(255, 255, 255, 0.80);
          color: rgba(255, 255, 255, 0.8);
        }

        .now {
          width: 114px;
          height: 8px;
          background: linear-gradient(90deg, #FFAD0E 0%, #FCE003 100%);
          background: linear-gradient(90deg, #ffad0e 0%, #fce003 100%);
          border-radius: 20px;
          margin-left: 8px;
        }
@@ -1199,7 +1353,7 @@
        .before {
          width: 60px;
          height: 8px;
          background: linear-gradient(90deg, #008366 0%, #00FFCE 100%);
          background: linear-gradient(90deg, #008366 0%, #00ffce 100%);
          border-radius: 20px;
          margin-left: 8px;
        }
@@ -1211,15 +1365,14 @@

        font-weight: 800;
        font-size: 12px;
        color: #66FFFF;
        color: #66ffff;
        line-height: 14px;
        font-style: normal;
      }

      .down {
        color: rgba(253, 66, 62, 1)
        color: rgba(253, 66, 62, 1);
      }

    }

    .info-bottom {
@@ -1231,7 +1384,6 @@
      background-image: url(../../assets/img/project/bottom.png);
      background-size: 100% 100%;
    }

  }

  .a--center {
@@ -1250,18 +1402,20 @@
  justify-content: center;

  .mid-info {
    cursor: pointer;
    // width: 272px;
    // height: 149px;
    margin-right: 22px;
    background: rgba(2, 0, 77, 0.8);
    box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
    border: 2px solid #0D53B7;
    border: 2px solid #0d53b7;
    padding: 12px 12px 12px 15px;

    .mid-title {
      cursor: pointer;
      font-weight: bold;
      font-size: 16px;
      color: #FFFFFF;
      color: #ffffff;
      line-height: 24px;
      margin-right: 40px;
    }
@@ -1275,11 +1429,11 @@
      padding: 6px 5px;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      color: #ffffff;
    }

    .active-tab {
      background: #0600E4;
      background: #0600e4;
      box-shadow: inset 0px 0px 20px 0px rgba(102, 255, 255, 0.52);
    }

@@ -1305,7 +1459,12 @@
          font-size: 24px;
          // color: linear-gradient(90deg, #66FFFF 0%, #F7B500 100%, #F7B500 100%);
          line-height: 28px;
          background: linear-gradient(90deg, #66FFFF 0%, #F7B500 100%, #F7B500 100%);
          background: linear-gradient(
            90deg,
            #66ffff 0%,
            #f7b500 100%,
            #f7b500 100%
          );
          /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
          -webkit-background-clip: text;
          /*将设置的背景颜色限制在文字中*/
@@ -1317,11 +1476,9 @@
        .name {
          font-weight: 500;
          font-size: 10px;
          color: #66FFFF;
          color: #66ffff;
          line-height: 15px;

        }

      }

      .mid-item {
@@ -1341,13 +1498,13 @@
        .mid-txt {
          font-weight: 400;
          font-size: 12px;
          color: #FFFFFF;
          color: #ffffff;
        }

        .mid-num {
          font-weight: bold;
          font-size: 20px;
          color: #FFFFFF;
          color: #ffffff;
        }
      }
    }
@@ -1357,16 +1514,29 @@
    width: 42px;
    height: 150px;
    box-sizing: border-box;
    background: linear-gradient(90deg, #040622 0%, #0952CF 22.29%, #155EDF 53.43%, #0952CF 81.31%, #011845 100%);
    background: linear-gradient(
      90deg,
      #040622 0%,
      #0952cf 22.29%,
      #155edf 53.43%,
      #0952cf 81.31%,
      #011845 100%
    );
    border-radius: 96px;
    border: 2px solid;
    border-image: linear-gradient(90deg, rgba(159, 255, 255, 0), rgba(133, 255, 255, 1), rgba(102, 255, 255, 0)) 3 1;
    border-image: linear-gradient(
        90deg,
        rgba(159, 255, 255, 0),
        rgba(133, 255, 255, 1),
        rgba(102, 255, 255, 0)
      )
      3 1;
    padding: 24px 12px;
    font-weight: bold;
    font-size: 17px;
    color: #FFC500;
    color: #ffc500;
    line-height: 24px;
    text-shadow: 0px 0px 10px #612B00;
    text-shadow: 0px 0px 10px #612b00;
  }
}

@@ -1425,22 +1595,21 @@
        .progress-num {
          font-weight: 800;
          font-size: 18px;
          color: #66FFFF;
          color: #66ffff;
        }

        .progress-unit {
          font-weight: 800;
          font-size: 12px;
          color: #66FFFF;
          color: #66ffff;
          margin-left: 2px;
        }

      }

      .people-name {
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        color: #ffffff;
        line-height: 15px;
      }
    }

 screen/src/view/projectList/index.vue

@@ -201,7 +201,12 @@
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" class="btnColor">详情</el-button>
            <el-button
              @click="toProjectDetail(row)"
              type="text"
              class="btnColor"
              >详情</el-button
            >
            <el-button
              @click="toHiddenDanger(row, 2)"
              type="text"
@@ -265,7 +270,11 @@
      </CustomTable>
    </CustomDialog>
    <!-- 单位信息弹窗 -->
    <CustomDialog title="单位信息" :visible.sync="companyVisible" width="1420px">
    <CustomDialog
      title="单位信息"
      :visible.sync="companyVisible"
      width="1420px"
    >
      <el-descriptions>
        <el-descriptions-item label="施工单位">成都喜望</el-descriptions-item>
        <el-descriptions-item label="项目经理">张三</el-descriptions-item>
@@ -335,14 +344,23 @@
  created() {},
  mounted() {},
  methods: {
    toHiddenDanger(row,type) {
    toProjectDetail(row) {
      this.$router.push({
        path: '/hiddenDanger',
        path: "/projectHome",
        query: {
          projectId: row.projectId,
        },
      });
    },

    toHiddenDanger(row, type) {
      this.$router.push({
        path: "/hiddenDanger",
        query: {
          projectId: row.projectId,
          activeTab: type,
        }
      })
        },
      });
    },

    handleSizeChange(val) {
@@ -426,6 +444,10 @@
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;

 screen/src/view/subentry/index.vue

New file
@@ -0,0 +1,385 @@
<template>
  <div>
    <HeaderBox :title="projectName" />
    <div class="pt--35 px--20 pb--54">
      <!-- 返回 -->
      <div @click="backFun" class="flex a-center cursor-pointer">
        <img
          src="../../assets/img/back.png"
          class="w--22 h--20 shrink0 mr--13"
        />
        <div class="c-fff lh--22 fs--22 SHSBold">分项隐患数</div>
      </div>
      <!-- 搜索 -->
      <div class="flex a-center j-between mt--24 mb--20">
        <div class="flex a-center gap--16">
          <div class="flex a-center searchTabs">
            <div
              @click="handleTabClick(item)"
              v-for="item in searchTabs"
              :key="item"
              :class="{ activeTabs: item === activeTabs }"
            >
              {{ item }}
            </div>
          </div>
          <div
            @click="handleClick(2)"
            class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
          >
            <el-date-picker
              v-model="monthrange"
              ref="monthrangeRef"
              type="monthrange"
              placeholder=""
              :disabled="activeTabs != '自定义'"
            >
            </el-date-picker>
            <div class="absolute w100 h100 flex a-center c-fff fs--14 SHS">
              <div class="flex a-center flex1 shrink0 gap--13">
                <img
                  src="../../assets/img/home/Shape@2x (6).png"
                  class="w--13 h--13 shrink0"
                />
                <div style="width: calc(100% - 20px)" v-if="dateTxt1">
                  {{ dateTxt1 }}
                </div>
                <div v-else>请选择日期</div>
              </div>
              <div class="flex a-center flex1 shrink0 gap--13">
                <img
                  src="../../assets/img/home/Shape@2x (6).png"
                  class="w--13 h--13 shrink0"
                />
                <div style="width: calc(100% - 20px)" v-if="dateTxt2">
                  {{ dateTxt2 }}
                </div>
                <div v-else>请选择日期</div>
              </div>
            </div>
          </div>
          <div
            class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
          >
            <el-select
              filterable
              v-model="projectId"
              placeholder="请输入搜索内容"
              class="flex1"
            >
              <el-option
                v-for="item in [1, 2]"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <div class="btn SHSR">搜索</div>
          </div>
        </div>
        <div
          @click="formVisible = true"
          class="flex a-center j-center w--150 h--40 cursor-pointer br--4 bgcolor88"
        >
          <img
            src="../../assets/img/home/Shape.png"
            class="w--12 h--12 shrink0 mr--9"
          />
          <div class="fs--14 lh--14 c-fff SHSR">分析图表</div>
        </div>
      </div>
      <!-- 表格 -->
      <CustomTable
        :data="[
          { projectName: '文明施工' },
          { projectName: '文明施工' },
          { projectName: '文明施工' },
        ]"
        height="800"
        style="border: 2px solid #3d7fff"
      >
        <el-table-column label="隐患类型" prop="projectName" />
        <el-table-column
          v-for="(item, index) in tableHeader"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        />
      </CustomTable>
      <CustomPagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="10"
        :total="400"
      />
    </div>
  </div>
</template>

<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
export default {
  components: { HeaderBox },
  props: {},
  data() {
    return {
      monthrange: null,
      projectId: null,
      projectName: null,
      searchTabs: ["本年", "上一年", "自定义"],
      activeTabs: "本年",
      dateTxt1: "",
      dateTxt2: "",
      currentPage: 1,
      tableHeader: [
        {
          label: "2025年1月",
          prop: "one",
        },
      ],
    };
  },
  computed: {},
  watch: {
    monthrange: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length === 2) {
          this.dateTxt1 = moment(newVal[0]).format("YYYY年MM月");
          this.dateTxt2 = moment(newVal[1]).format("YYYY年MM月");
          this.generateTableHeader(newVal[0], newVal[1]);
        } else {
          this.dateTxt1 = "";
          this.dateTxt2 = "";
          this.tableHeader = [];
        }
      },
      immediate: true,
    },
  },
  created() {
    this.projectId = this.$route.query.projectId;
    this.projectName = this.$route.query.projectName;
    if (this.activeTabs !== "自定义") {
      this.updateByActiveTab();
    }
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClick(type) {
      this.$refs.monthrangeRef.focus();
    },

    handleTabClick(item) {
      this.activeTabs = item;
      this.updateByActiveTab();
    },

    updateByActiveTab() {
      const currentYear = moment().year();
      if (this.activeTabs === "本年") {
        const start = moment().year(currentYear).month(0).startOf("month").toDate();
        const end = moment().year(currentYear).month(11).startOf("month").toDate();
        this.monthrange = [start, end];
      } else if (this.activeTabs === "上一年") {
        const lastYear = currentYear - 1;
        const start = moment().year(lastYear).month(0).startOf("month").toDate();
        const end = moment().year(lastYear).month(11).startOf("month").toDate();
        this.monthrange = [start, end];
      }
    },

    generateTableHeader(startDate, endDate) {
      const start = moment(startDate).startOf("month");
      const end = moment(endDate).startOf("month");
      const list = [];
      const current = start.clone();
      while (current.isSameOrBefore(end, "month")) {
        list.push({
          label: current.format("YYYY年M月"),
          prop: current.format("YYYYMM"),
        });
        current.add(1, "month");
      }
      this.tableHeader = list;
    },

    backFun() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="less">
::v-deep .el-table {
  .el-table__body-wrapper {
    .el-table__body {
      .el-table__row {
        td:first-child {
          background-color: rgba(0, 112, 255, 0.4) !important;
        }
      }
    }
  }
}

.color1 {
  color: rgba(255, 255, 255, 0.9);
}

.bgcolor1 {
  background: rgba(2, 0, 77, 0.8);
  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
  border: 2px solid #0d53b7;
}

.bgColor2 {
  background: rgba(24, 69, 135, 0.9);
}

.bgColor3 {
  background: rgba(67, 221, 189, 1) !important;
}

.bgColor4 {
  background: rgba(67, 221, 189, 0.6) !important;
}

.bgColor5 {
  background: rgba(67, 221, 189, 0.4) !important;
}

.bgcolor6 {
  background: linear-gradient(270deg, #64aef0 0%, #4b70ec 100%);
}

.bgcolor7 {
  background: linear-gradient(270deg, #3dabea 0%, #28a5ec 100%);
}

.bgcolor8 {
  background: rgba(24, 83, 200, 0.2);
}

.bgcolor88 {
  background: linear-gradient(270deg, #09b9ff 0%, #4d68ff 100%);
}

.tagItem {
  flex-shrink: 0;
  line-height: 30px;
  padding: 0 12px;
  color: #fff;
  background: rgba(24, 83, 200, 0.2);
}

.searchTabs {
  background: rgba(2, 0, 77, 0.8);
  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Source Han Sans CN Normal";
  text-align: center;
  flex-shrink: 0;

  div {
    padding: 2px;
    width: 76px;
    cursor: pointer;
    line-height: 34px;
    border: 1px solid #0d53b7;

    &:hover {
      background: #017be7;
      color: #ffffff;
    }
  }

  .activeTabs {
    background: #017be7;
    color: #ffffff;
  }
}

.picker {
  ::v-deep .el-input__icon {
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: transparent;
  }

  ::v-deep .el-range-input {
    background: transparent;
    border: none;
    color: transparent;
  }
}

.searchBox {
  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
  }

  ::v-deep .el-input__suffix {
    display: none;
  }

  .btn {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(
      90deg,
      #3467d0 0%,
      #0d226a 50.35%,
      #376fe0 100%
    );
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    padding: 0 26px;
    border: 1px solid #307ad9;
    box-sizing: border-box;
    cursor: pointer;
  }
}

.btnColor {
  color: #00ebfc;
}

::v-deep .el-descriptions {
  .el-descriptions__body {
    background-color: transparent;

    .el-descriptions-item__container {
      color: #ffffff;
      font-family: "Source Han Sans CN Regular";
    }
  }
}
</style>

 screen/src/view/workList/index.vue

@@ -458,6 +458,10 @@
    display: none;
  }

  ::v-deep .el-range-separator {
    display: none;
  }

  ::v-deep .el-input__inner {
    background: transparent;
    border: none;