@vtx/cs-map-layer 1.0.20 → 1.0.22

package/lib/_components/Template/indexV2.less

@@ -0,0 +1,589 @@
+.cs-map-container .cesium-popup {
+    max-width: 360px;
+
+    .cesium-popup-close {
+        z-index: 99;
+    }
+
+    .cesium-popup-v2 {
+        position: relative;
+        max-width: 360px;
+        width: 360px;
+        margin: -52px -12px -10px;
+    }
+}
+
+.cesium-popup-no-title+.cesium-popup-content {
+    .cesium-popup-v2 {
+        margin: -10px -12px;
+    }
+}
+
+.close-btn {
+    position: absolute;
+    top: 12px;
+    right: 30px;
+    cursor: pointer;
+}
+
+.facility-layer-close-btn {
+    position: absolute;
+    top: 12px;
+    color: #0a4ff8;
+    right: 30px;
+    cursor: pointer;
+}
+
+.facility-layer-custom-btn {
+    position: absolute;
+    line-height: 1;
+    top: 12px;
+    right: 50px;
+    cursor: pointer;
+}
+
+.facility-layer-custom-button {
+    padding: 8px 10px 10px;
+    text-align: right;
+}
+
+.facility-layer-custom-panel-has-button {
+    overflow: hidden;
+    background: #162d56;
+    box-shadow: inset 0 4px 16px 0 #1d7ad0;
+    border-radius: 8px;
+
+    .facility-layer-custom-content-dark {
+        background: transparent;
+        box-shadow: none;
+        border-radius: 8px 8px 0 0;
+    }
+
+    .facility-layer-custom-button {
+        padding: 2px 10px 10px;
+    }
+}
+
+.map-empty {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.map-empty-img {
+    width: 120px;
+    height: auto;
+}
+
+.facility-layer-custom-content {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    cursor: pointer;
+    z-index: 10;
+
+    &-title {
+        height: 35px;
+        background: rgba(24, 144, 255, .1);
+        border-radius: 8px 8px 0 0;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        padding-left: 8px;
+        padding-right: 50px;
+
+        &-left {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 16px;
+            color: #000;
+            margin-left: -1px;
+            margin-right: 9px;
+        }
+
+        &-right {
+            padding: 2px 4px;
+            background: rgba(24, 144, 255, .2);
+            border-radius: 2px;
+            border: 1px solid #1890ff;
+            font-size: 12px;
+            color: #1890ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    &-keyParam {
+        width: 339px;
+        margin-left: 9px;
+        padding-top: 7px;
+
+        &-deviceDetail {
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 14px;
+                height: 14px;
+                margin-right: 3px;
+            }
+
+            &-address {
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        &-line {
+            width: 100%;
+            height: 1px;
+            background-color: #355184;
+        }
+
+        &-item {
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            font-size: 14px;
+            color: rgba(0, 0, 0, .85);
+            line-height: 2.0;
+
+            &-address {
+                margin-left: 8px;
+                width: 311px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    &-keyIndicators {
+        padding: 7px 10px;
+
+        &-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-weight: 400;
+            font-size: 14px;
+            color: #595959;
+            line-height: 2.0;
+
+            &-left {
+                word-break: break-all;
+                flex-wrap: nowrap;
+                align-items: baseline;
+                display: flex;
+
+                &-name {
+                    white-space: nowrap;
+                }
+
+                &-value {
+                    margin-left: 8px;
+                }
+            }
+
+            &-round {
+                width: 5px;
+                height: 5px;
+                background-color: rgba(89, 89, 89, 1);
+                border-radius: 50%;
+                margin-right: 4px;
+            }
+        }
+    }
+
+    &-dark {
+        background: #162d56;
+        box-shadow: inset 0 4px 16px 0 #1d7ad0;
+        border-radius: 8px;
+        color: #fff;
+
+        &-title {
+            height: 35px;
+            background: #135694;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            padding-left: 10px;
+            padding-right: 50px;
+
+            &-left {
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 16px;
+                // color: #000000;
+                margin-left: -1px;
+                margin-right: 9px;
+                color: #fff;
+            }
+
+            &-right {
+                padding: 2px 4px;
+                background: rgba(24, 144, 255, .2);
+                border-radius: 2px;
+                border: 1px solid #1890ff;
+                font-size: 12px;
+                color: #1890ff;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+
+        &-keyParam {
+            width: 339px;
+            margin-left: 10px;
+            padding-top: 7px;
+
+            &-deviceDetail {
+                display: flex;
+                align-items: center;
+
+                img {
+                    width: 14px;
+                    height: 14px;
+                    margin-right: 3px;
+                }
+
+                &-address {
+                    flex: 1;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            &-line {
+                width: 100%;
+                height: 1px;
+                background-color: rgba(232, 232, 232, .2);
+            }
+
+            &-item {
+                display: flex;
+                align-items: center;
+                margin-bottom: 6px;
+                font-weight: 500;
+                font-size: 14px;
+                // color: rgba(0, 0, 0, 0.85);
+                color: #fff;
+
+                &-address {
+                    margin-left: 8px;
+                    width: 311px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+        &-keyIndicators {
+            padding: 7px 10px;
+
+            &-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-weight: 400;
+                font-size: 14px;
+                // color: #595959;
+                margin-bottom: 6px;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                &-left {
+                    display: flex;
+                    align-items: center;
+
+                    &-value {
+                        margin-left: 8px;
+                    }
+                }
+
+                &-round {
+                    width: 5px;
+                    height: 5px;
+                    background-color: #fff;
+                    border-radius: 50%;
+                    margin-right: 2px;
+                }
+
+                &-updateTime {
+                    font-size: 12px;
+                    color: rgba(255, 255, 255, .6);
+                }
+            }
+        }
+    }
+}
+
+.device-layer-custom-content {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    cursor: pointer;
+    z-index: 10;
+
+    &-title {
+        height: 35px;
+        background: rgba(24, 144, 255, .1);
+        border-radius: 8px 8px 0 0;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        padding-left: 8px;
+        padding-right: 50px;
+
+        &-left {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 16px;
+            color: #000;
+            margin-left: -1px;
+            margin-right: 9px;
+        }
+
+        &-right {
+            padding: 2px 4px;
+            background: rgba(24, 144, 255, .2);
+            border-radius: 2px;
+            border: 1px solid #1890ff;
+            font-size: 12px;
+            color: #1890ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    &-keyParam {
+        width: 339px;
+        margin-left: 9px;
+        padding-top: 7px;
+
+        &-deviceDetail {
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 14px;
+                height: 14px;
+                margin-right: 3px;
+            }
+
+            &-address {
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        &-line {
+            width: 100%;
+            height: 1px;
+            background-color: #355184;
+        }
+
+        &-item {
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            font-size: 14px;
+            color: rgba(0, 0, 0, .85);
+            line-height: 2.0;
+
+            &-address {
+                margin-left: 8px;
+                width: 311px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    &-keyIndicators {
+        padding: 7px 10px;
+
+        &-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-weight: 400;
+            font-size: 14px;
+            color: #595959;
+            line-height: 2.0;
+
+            &-left {
+                display: flex;
+                align-items: center;
+
+                &-value {
+                    margin-left: 8px;
+                }
+            }
+
+            &-round {
+                width: 5px;
+                height: 5px;
+                background-color: rgba(89, 89, 89, 1);
+                border-radius: 50%;
+                margin-right: 2px;
+            }
+
+            &-updateTime {
+                font-size: 12px;
+                color: #8c8c8c;
+            }
+        }
+    }
+
+    &-dark {
+        background: #162d56;
+        box-shadow: inset 0 4px 16px 0 #1d7ad0;
+        border-radius: 8px;
+        color: #fff;
+
+        &-title {
+            height: 35px;
+            background: #135694;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            padding-left: 10px;
+            padding-right: 50px;
+
+            &-left {
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 16px;
+                margin-left: -1px;
+                margin-right: 9px;
+                color: #fff;
+            }
+
+            &-right {
+                padding: 2px 4px;
+                background: rgba(24, 144, 255, .2);
+                border-radius: 2px;
+                border: 1px solid #1890ff;
+                font-size: 12px;
+                color: #1890ff;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+
+        &-keyParam {
+            width: 339px;
+            margin-left: 10px;
+            padding-top: 7px;
+
+            &-deviceDetail {
+                display: flex;
+                align-items: center;
+
+                img {
+                    width: 14px;
+                    height: 14px;
+                    margin-right: 3px;
+                }
+
+                &-address {
+                    flex: 1;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            &-line {
+                width: 100%;
+                height: 1px;
+                background-color: rgba(232, 232, 232, .2);
+            }
+
+            &-item {
+                display: flex;
+                align-items: center;
+                margin-bottom: 6px;
+                font-weight: 500;
+                font-size: 14px;
+                color: #fff;
+
+                &-address {
+                    margin-left: 8px;
+                    width: 311px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+        &-keyIndicators {
+            padding: 7px 10px;
+
+            &-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 2.0;
+
+                &-left {
+                    word-break: break-all;
+                    flex-wrap: nowrap;
+                    align-items: baseline;
+                    display: flex;
+
+                    &-name {
+                        white-space: nowrap;
+                    }
+
+                    &-value {
+                        margin-left: 8px;
+
+                        &.is-alarm {
+                          color: #FF2F2F;
+                            flex: 1;
+                        }
+                    }
+                }
+
+                &-round {
+                    width: 5px;
+                    height: 5px;
+                    background-color: #fff;
+                    border-radius: 50%;
+                    margin-right: 4px;
+                }
+            }
+        }
+    }
+}

package/lib/_util/http.d.ts

@@ -0,0 +1,42 @@
+import { AxiosInstance } from 'axios';
+interface OptionI {
+    body?: object | string;
+    extraHeader?: {
+        msg?: string;
+    };
+}
+/**
+ * 基于 axios 封装的请求封装
+ * axios文档 http://www.axios-js.com/zh-cn/docs/
+ * 支持 Get 和 Post 请求
+ */
+declare class Http {
+    instance: AxiosInstance;
+    constructor(options: object);
+    _createAxios(options: object): AxiosInstance;
+    /**
+     * get 请求
+     * @param {*} url
+     * @param {*} options {body}
+     */
+    get(url: string, options?: OptionI): Promise<import("axios").AxiosResponse<any>>;
+    /**
+     * post 请求
+     * @param {*} url
+     * @param {*} options
+     */
+    post(url: string, options?: OptionI): Promise<import("axios").AxiosResponse<any>>;
+    /**
+     * 响应数据的处理
+     * @param {*} response
+     */
+    _responseHandler(response: any): any;
+    /**
+     * 请求错误处理
+     * @param {*} error
+     */
+    _errorHandler(error: any): void;
+    getInstance(): AxiosInstance;
+}
+declare const http: Http;
+export default http;