电子沙盘多边形图片更改

shuishen

2023-07-07 dd7b7fbca6e6cddcd013956161fdd730c172c725

电子沙盘多边形图片更改

 public/warnings/核心区1.png

 public/warnings/核心区2.png

 public/warnings/核心区3.png

 public/warnings/缓冲区1.png

 public/warnings/缓冲区2.png

 public/warnings/缓冲区3.png

 public/warnings/警戒线1.png

 public/warnings/警戒线2.png

 public/warnings/警戒线3.png

 public/warnings/防范区1.png

 public/warnings/防范区2.png

 public/warnings/防范区3.png

 src/components/warningSelect/index.vue

New file
@@ -0,0 +1,131 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-04-04 16:24:42
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-07-07 15:09:44
 * @FilePath: \srs-police-affairs\src\components\warningSelect\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="container" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
        <div v-for="(item, index) in imageUrls" :key="index" @click.stop="curImgClick(item)">
            <div class="content">
                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                    <img :src="item.url" alt />
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
import { getIconsAll } from "@/api/icons/index"
export default {
    name: 'WarningSelect',

    data () {
        return {
            imageUrls: [],
            loading: false
        }
    },

    created () {
        this.requireImage()
    },

    methods: {
        requireImage () {
            this.imageUrls = [
                {
                    url: '/warnings/防范区1.png',
                    title: '防范区1',
                },
                {
                    url: '/warnings/防范区2.png',
                    title: '防范区2',
                },
                {
                    url: '/warnings/防范区3.png',
                    title: '防范区3',
                },
                {
                    url: '/warnings/核心区1.png',
                    title: '核心区1',
                },
            ]


            // getIconsAll().then(res => {
            //     res.data.data.forEach(item => {
            //         let imgArr = item.split('/')

            //         let title = imgArr[imgArr.length - 1].split('.')[0]

            //         this.imageUrls.push({
            //             url: item,
            //             title
            //         })
            //     })
            //     this.loading = false
            // })
        },

        curImgClick (item) {
            this.$emit('curClick', item.url)
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 999999;
    display: flex;
    flex-wrap: wrap;

    min-width: 420px;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    background: $el-dialog-bg-color;
    border-radius: 10px;

    &>div {
        padding: 6px;
        margin: 10px;
        width: 400px;
        height: 80px;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 8px;
        box-sizing: content-box;

        &:hover {
            color: #409eff;
            border-color: #409eff;
        }

        .content {
            position: relative;
            height: 80px;

            img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 400px;
                height: 80px;
            }
        }
    }
}
</style>

 src/utils/turfPolygon.js

@@ -2,158 +2,166 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-31 10:52:25
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-08 18:21:01
 * @LastEditTime: 2023-07-07 14:34:41
 * @FilePath: \srs-police-affairs\src\utils\turfPolygon.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import * as turf from '@turf/turf'
import * as turf from "@turf/turf";

function getAllRegionCenter (data) {
    let arr = []
function getAllRegionCenter(data) {
  let arr = [];

    data.forEach(item => {
        if (item.position && item.position.length > 0) {
            arr.push(getRegionCenter(item.position))
        }
    })

    arr.push(arr[0])

    if (arr.length == 1) {
        return arr[0]
    } else if (arr.length == 2) {

        return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1]))).geometry.coordinates
    } else {
        arr.push(arr[0])

        return turf.centroid(turf.polygon([arr])).geometry.coordinates
  data.forEach((item) => {
    if (item.position && item.position.length > 0) {
      arr.push(getRegionCenter(item.position));
    }
  });

  arr.push(arr[0]);

  if (arr.length == 1) {
    return arr[0];
  } else if (arr.length == 2) {
    return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1])))
      .geometry.coordinates;
  } else {
    arr.push(arr[0]);

    return turf.centroid(turf.polygon([arr])).geometry.coordinates;
  }
}

function getRegionCenter (params) {
    let arr = []
function getRegionCenter(params) {
  let arr = [];

    params.forEach(areaArray => {
        JSON.parse(areaArray).coordinates.forEach(item => {
            arr.push(turf.centroid(turf.polygon([item[0]])).geometry.coordinates)
        })
    })
  params.forEach((areaArray) => {
    JSON.parse(areaArray).coordinates.forEach((item) => {
      arr.push(turf.centroid(turf.polygon([item[0]])).geometry.coordinates);
    });
  });

    if (arr.length == 1) {
        return arr[0]
    } else if (arr.length == 2) {
  if (arr.length == 1) {
    return arr[0];
  } else if (arr.length == 2) {
    return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1])))
      .geometry.coordinates;
  } else {
    arr.push(arr[0]);

        return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1]))).geometry.coordinates
    } else {
        arr.push(arr[0])

        return turf.centroid(turf.polygon([arr])).geometry.coordinates
    }
    return turf.centroid(turf.polygon([arr])).geometry.coordinates;
  }
}

export const computerCapacity = (data, type = '') => {
export const computerCapacity = (data, type = "") => {
  if (type != "") {
    const center = getAllRegionCenter(data);

    if (type != '') {

        const center = getAllRegionCenter(data)

        if (type == 'all') {

            global.viewer.flyToPosition(
                new global.DC.Position(
                    Number(center[0] + 0.03),
                    Number(center[1] - 0.30),
                    Number(36000),
                    Number(-3),
                    Number(-45),
                    Number(0)
                ),
                function () { },
                3
            )

        } else {

            global.viewer.flyToPosition(
                new global.DC.Position(
                    Number(center[0] + 0.0046),
                    Number(center[1] - 0.04),
                    Number(4000),
                    Number(-3),
                    Number(-45),
                    Number(0)
                ),
                function () { },
                3
            )

        }
    if (type == "all") {
      global.viewer.flyToPosition(
        new global.DC.Position(
          Number(center[0] + 0.03),
          Number(center[1] - 0.3),
          Number(36000),
          Number(-3),
          Number(-45),
          Number(0)
        ),
        function () {},
        3
      );
    } else {
        console.log(data, 564)
        let pointArr = []
        data.forEach(item => {
            if (item.longitude && item.latitude) {
                pointArr.push(turf.point([item.longitude, item.latitude]))
                return
            }

            if (item.lng && item.lat) {
                pointArr.push(turf.point([item.lng, item.lat]))
                return
            }
        })

        const features = turf.featureCollection(pointArr)

        const scope = turf.envelope(features).bbox

        // const poly = turf.polygon([[[0, 29], [3.5, 29], [2.5, 32], [0, 29]]])

        console.log([[scope[0], scope[1]], [scope[2], scope[1]], [scope[2], scope[3]], [scope[0], scope[3]]])

        var poly = turf.polygon([[[scope[0], scope[1]], [scope[2], scope[1]], [scope[2], scope[3]], [scope[0], scope[3]], [scope[0], scope[1]]]])
        var scaledPoly = turf.transformScale(poly, 4)

        let boxPoint = []
        scaledPoly.geometry.coordinates[0].forEach(item => {
            boxPoint.push(turf.point(item))
        })

        const boxFeatures = turf.featureCollection(boxPoint)

        const boxScope = turf.envelope(boxFeatures).bbox

        global.viewer.flyToBounds(boxScope,
            { heading: 0, pitch: -90, roll: 0 },
            (e) => { },
            3
        )
      global.viewer.flyToPosition(
        new global.DC.Position(
          Number(center[0] + 0.0046),
          Number(center[1] - 0.04),
          Number(4000),
          Number(-3),
          Number(-45),
          Number(0)
        ),
        function () {},
        3
      );
    }
}
  } else {
    console.log(data, 564);
    let pointArr = [];
    data.forEach((item) => {
      if (item.longitude && item.latitude) {
        pointArr.push(turf.point([item.longitude, item.latitude]));
        return;
      }

export const getMapBounds = (data, type = '') => {
    let pointArr = []
      if (item.lng && item.lat) {
        pointArr.push(turf.point([item.lng, item.lat]));
        return;
      }
    });

    data.forEach(item => {
        pointArr.push(turf.point([item.x, item.y]))
        return
    })
    const features = turf.featureCollection(pointArr);

    const features = turf.featureCollection(pointArr)

    const scope = turf.envelope(features).bbox
    const scope = turf.envelope(features).bbox;

    // const poly = turf.polygon([[[0, 29], [3.5, 29], [2.5, 32], [0, 29]]])

    return scope
}
    console.log([
      [scope[0], scope[1]],
      [scope[2], scope[1]],
      [scope[2], scope[3]],
      [scope[0], scope[3]],
    ]);

export const getLineSpeed = (data) => {
    var line = turf.lineString(data)
    var length = turf.length(line, { units: 'miles' })
    var poly = turf.polygon([
      [
        [scope[0], scope[1]],
        [scope[2], scope[1]],
        [scope[2], scope[3]],
        [scope[0], scope[3]],
        [scope[0], scope[1]],
      ],
    ]);
    var scaledPoly = turf.transformScale(poly, 4);

    return length * 1000 / 50
}
    let boxPoint = [];
    scaledPoly.geometry.coordinates[0].forEach((item) => {
      boxPoint.push(turf.point(item));
    });

    const boxFeatures = turf.featureCollection(boxPoint);

    const boxScope = turf.envelope(boxFeatures).bbox;

    global.viewer.flyToBounds(
      boxScope,
      { heading: 0, pitch: -90, roll: 0 },
      (e) => {},
      3
    );
  }
};

export const getMapBounds = (data, type = "") => {
  let pointArr = [];

  data.forEach((item) => {
    pointArr.push(turf.point([item.x, item.y]));
    return;
  });

  const features = turf.featureCollection(pointArr);

  const scope = turf.envelope(features).bbox;

  // const poly = turf.polygon([[[0, 29], [3.5, 29], [2.5, 32], [0, 29]]])

  return scope;
};

export const getLineSpeed = (data, multiple) => {
  var line = turf.lineString(data);
  var length = turf.length(line, { units: "miles" });

  return (length * 1000) / multiple;
};

 src/views/activity/components/drawBtnBox.vue

@@ -366,18 +366,30 @@
                    })
                } else {
                    if (item.areaType == 2) {
                        let multiple, speed
                        if (item.iconUrl.indexOf('1') != -1) {
                            multiple = 250
                            speed = 3
                        } else if (item.iconUrl.indexOf('2') != -1) {
                            multiple = 195
                            speed = 3
                        } else {
                            multiple = 50
                            speed = 10
                        }

                        addPlotOverlayData.setStyle({
                            material: new global.DC.WallImageTrailMaterialProperty({
                                image: '/images/jjx.png',
                                image: item.iconUrl,
                                color: color,
                                repeat: {
                                    x: getLineSpeed(position.split(';').map(item => {
                                        item.split(',')

                                        return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                    })), y: 1
                                    }), multiple), y: 1
                                },
                                speed: 10
                                speed: speed
                            })
                        })
                    } else {
@@ -509,18 +521,31 @@
                        })
                    } else {
                        if (overlay.attrParams.item.areaType == 2) {
                            let multiple, speed

                            if (overlay.attrParams.item.iconUrl.indexOf('1') != -1) {
                                multiple = 250
                                speed = 3
                            } else if (overlay.attrParams.item.iconUrl.indexOf('2') != -1) {
                                multiple = 195
                                speed = 3
                            } else {
                                multiple = 50
                                speed = 10
                            }

                            overlay.setStyle({
                                material: new global.DC.WallImageTrailMaterialProperty({
                                    image: '/images/jjx.png',
                                    image: overlay.attrParams.item.iconUrl,
                                    color: color,
                                    repeat: {
                                        x: getLineSpeed(position.split(';').map(item => {
                                            item.split(',')

                                            return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                        })), y: 1
                                        }), multiple), y: 1
                                    },
                                    speed: 10
                                    speed: speed
                                })
                            })
                        } else {

 src/views/activity/components/polygonPlot.vue

@@ -80,7 +80,8 @@
                <div class="line" v-show="isNeedPolygonType">
                    <div class="value-name-box">选择类型：</div>
                    <div class="select-type" style="flex: 1;">
                        <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
                        <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型"
                            @change="polygonAreaTypeChange">
                            <el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
@@ -96,6 +97,18 @@
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;" />
                        </el-button>
                        <images-select v-show="imagesListShow" @curClick="curClick"></images-select>
                    </div>
                </div>

                <div class="line" v-show="warningImageShow">
                    <div class="value-name-box">警戒线样式：</div>
                    <div class="select-image" style="position: relative; display: flex; align-items: center;">
                        <el-button style="margin-top: 0; position: relative; background: transparent; border-color: #fff;"
                            @click="imagesListShow = !imagesListShow">
                            <img :src="curImgUrl" alt
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;" />
                        </el-button>
                        <Warning-select v-show="imagesListShow" @curClick="curClick"></Warning-select>
                    </div>
                </div>

@@ -181,6 +194,8 @@
                label: '瀑布墙'
            }],

            warningImageShow: false,

            restPlotSelectArray: [
                {
                    value: 6,
@@ -217,6 +232,7 @@
            polygonPlotData = `${positions.lng} ${positions.lat}`
            this.customImageShow = false
            this.restSelectBox = false
            this.warningImageShow = false
            this.restPlotType = 6
            let color = ''

@@ -255,6 +271,8 @@
            this.polygonRemark = ''
            this.choosePlotColorAlpha = 48
            this.customImageShow = false
            this.warningImageShow = false
            this.restSelectBox = false

            if (type == 5) {
                this.polygonAreaType = 1
@@ -270,6 +288,7 @@
        setCurOver (e) {
            this.restSelectBox = false
            this.customImageShow = false
            this.warningImageShow = false

            plotOverlayData = e

@@ -388,6 +407,7 @@
                    positionStr = polygonPlotData
                } else if (this.plotSaveType == 5) {
                    positionStr = polygonPlotData
                    if (this.polygonAreaType == 2) iconUrl = { iconUrl: this.curImgUrl }
                } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) {
                    positionStr = polygonPlotData + ',' + polygonPlotData
                } else if (this.plotSaveType == 10) {
@@ -432,8 +452,11 @@
                    })
                }
            })
        }
        },

        polygonAreaTypeChange (e) {
            e == 2 ? this.warningImageShow = true : this.warningImageShow = false
        }
    },
}
</script>

 src/views/activity/components/publicIndex.vue

@@ -469,19 +469,31 @@
                    positions = positions.join(';')
                    coverage = new global.DC.Wall(positions)

                    let multiple, speed
                    if (params.iconUrl.indexOf('1') != -1) {
                        multiple = 250
                        speed = 3
                    } else if (params.iconUrl.indexOf('2') != -1) {
                        multiple = 195
                        speed = 3
                    } else {
                        multiple = 50
                        speed = 10
                    }

                    if (params.areaType == 2) {
                        coverage.setStyle({
                            material: new global.DC.WallImageTrailMaterialProperty({
                                image: '/images/jjx.png',
                                image: params.iconUrl,
                                color: color.curColor,
                                repeat: {
                                    x: getLineSpeed(position.split(';').map(item => {
                                        item.split(',')

                                        return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                    })), y: 1
                                    }), multiple), y: 1
                                },
                                speed: 10
                                speed: speed
                            })
                        })
                    } else {

 vue.config.js

@@ -2,182 +2,186 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-27 12:29:35
 * @LastEditTime: 2023-07-07 14:54:23
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description:
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
 */

const path = require("path")
const CopywebpackPlugin = require("copy-webpack-plugin")
const dvgisDist = "./node_modules/@dvgis"
const webpack = require("webpack")
const path = require("path");
const CopywebpackPlugin = require("copy-webpack-plugin");
const dvgisDist = "./node_modules/@dvgis";
const webpack = require("webpack");

const CompressionPlugin = require("compression-webpack-plugin")
const pxtovw = require("postcss-px-to-viewport")
const CompressionPlugin = require("compression-webpack-plugin");
const pxtovw = require("postcss-px-to-viewport");

const productionGzipExtensions = ["js", "css"]
const productionGzipExtensions = ["js", "css"];

module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            scss: {
                prependData: `@import "~@/styles/scssFile.scss";`,
            },
            // postcss: {
            //     plugins: [   //配置px转rem进行适配
            //         require('postcss-px2rem')({
            //             // 根标签字号大小根据设计稿宽度/flexible.js里的份数得到，这里假定设计稿宽度为3840 3840/24 = 160px
            //             remUnit: 80
            //         }),
            //     ]
            // }
            // postcss: {
            //     //给postcss-loader传递选项
            //     plugins: [
            //         new pxtovw({
            //             unitToConvert: 'px', //需要转换的单位，默认为"px"；
            //             viewportWidth: 1920, //设计稿的视口宽度
            //             viewportHeight: 1080, //设计稿的视口宽度
            //             unitPrecision: 5, //单位转换后保留的小数位数
            //             propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
            //             viewportUnit: 'vw', //转换后的视口单位
            //             fontViewportUnit: 'vw', //转换后字体使用的视口单位
            //             selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
            //             minPixelValue: 1, //设置最小的转换数值
            //             mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
            //             replace: true, //是否直接更换属性值，而不添加备用属性
            //             exclude: [/node_modules/], //忽略某些文件夹下的文件
            //             // landscape: true,
            //             // landscapeUnit: 'vw',
            //             // landscapeWidth: 1920
            //         })
            //     ]
            // }
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      scss: {
        prependData: `@import "~@/styles/scssFile.scss";`,
      },
      // postcss: {
      //     plugins: [   //配置px转rem进行适配
      //         require('postcss-px2rem')({
      //             // 根标签字号大小根据设计稿宽度/flexible.js里的份数得到，这里假定设计稿宽度为3840 3840/24 = 160px
      //             remUnit: 80
      //         }),
      //     ]
      // }
      // postcss: {
      //     //给postcss-loader传递选项
      //     plugins: [
      //         new pxtovw({
      //             unitToConvert: 'px', //需要转换的单位，默认为"px"；
      //             viewportWidth: 1920, //设计稿的视口宽度
      //             viewportHeight: 1080, //设计稿的视口宽度
      //             unitPrecision: 5, //单位转换后保留的小数位数
      //             propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
      //             viewportUnit: 'vw', //转换后的视口单位
      //             fontViewportUnit: 'vw', //转换后字体使用的视口单位
      //             selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
      //             minPixelValue: 1, //设置最小的转换数值
      //             mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
      //             replace: true, //是否直接更换属性值，而不添加备用属性
      //             exclude: [/node_modules/], //忽略某些文件夹下的文件
      //             // landscape: true,
      //             // landscapeUnit: 'vw',
      //             // landscapeWidth: 1920
      //         })
      //     ]
      // }
    },
  },

  // 其他配置
  chainWebpack: (config) => {
    config.plugin("copy").use(CopywebpackPlugin, [
      [
        {
          from: path.join(dvgisDist, "dc-sdk/dist/resources"),
          to: "libs/dc-sdk/resources",
        },
    },

    // 其他配置
    chainWebpack: (config) => {
        config.plugin("copy").use(CopywebpackPlugin, [
            [
                {
                    from: path.join(dvgisDist, "dc-sdk/dist/resources"),
                    to: "libs/dc-sdk/resources",
                },
                {
                    from: "./public/img",
                    to: "img",
                },
                {
                    from: "./public/model",
                    to: "model",
                },
                {
                    from: "./public/video",
                    to: "video",
                },
                {
                    from: "./public/libs",
                    to: "libs",
                },
                {
                    from: "./public/depend",
                    to: "depend",
                },
                {
                    from: "./public/static",
                    to: "static",
                },
                {
                    from: "./public/images",
                    to: "images",
                },
                {
                    from: "./public/qp",
                    to: "qp",
                },
            ],
        ])

        // config.plugin("define").tap((args) => {
        //     args[0]["process"] = { ...args[0]["process.env"] }
        //     return args
        // })
    },

    configureWebpack: {
        externals: {
            vue: "Vue",
            Vuex: "Vuex",
            "vue-router": "VueRouter",
            "element-ui": "ELEMENT",
            echarts: "echarts",
        {
          from: "./public/img",
          to: "img",
        },
        // webpack plugins
        plugins: [
            // Ignore all locale files of moment.js
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

            // 配置compression-webpack-plugin压缩
            new CompressionPlugin({
                algorithm: "gzip",
                test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
                threshold: 10240,
                minRatio: 0.8,
            }),
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 5,
                minChunkSize: 100,
            }),
            // 提供带 Content-Encoding 编码的压缩版的资源
            // new CompressionPlugin({
            //     algorithm: 'gzip',
            //     test: /\.js$|\.html$|\.css/, // 匹配文件名
            //     // test: /\.(js|css)$/,
            //     threshold: 10240, // 对超过10k的数据压缩
            //     deleteOriginalAssets: false, // 不删除源文件
            //     minRatio: 0.8 // 压缩比
            // })
        ],
    },

    devServer: {
        // open: false, // 编译完成是否打开网页
        // host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
        // // port: 82, // 访问端口
        // https: false, // 编译失败时刷新页面
        // hot: true, // 开启热加载
        // hotOnly: false,
        // proxy: {
        //     [process.env.VUE_APP_API]: {//拦截器(拦截链接中有/api)
        //         target: process.env.VUE_API_DEV_TARGET,//'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API服务器的地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             //'^/api': '/'
        //             [`^${process.env.VUE_APP_API}`]: '',
        //             //[`^${process.env.VUE_APP_API}`]: '/', //配置出来的接口没有 /api
        //         }
        //     }
        // }
        proxy: {
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                target: "http://localhost:82",
                // target: "http://192.168.1.176:82",
                // target: "http://106.225.193.35:82",
                // target: "http://192.168.1.170:82",
                // target: "http://192.168.0.100:82",
                // target: "http://172.16.13.150:82",
                // target: "http://10.141.11.11:8081/api",
                // ws: true, //启用webSocket6566
                changeOrigin: true, //开启代理跨域
                pathRewrite: {
                    "^/api": "",
                },
            }
        {
          from: "./public/model",
          to: "model",
        },
        {
          from: "./public/video",
          to: "video",
        },
        {
          from: "./public/libs",
          to: "libs",
        },
        {
          from: "./public/depend",
          to: "depend",
        },
        {
          from: "./public/static",
          to: "static",
        },
        {
          from: "./public/images",
          to: "images",
        },
        {
          from: "./public/qp",
          to: "qp",
        },
        {
          from: "./public/warnings",
          to: "warnings",
        },
      ],
    ]);

    // config.plugin("define").tap((args) => {
    //     args[0]["process"] = { ...args[0]["process.env"] }
    //     return args
    // })
  },

  configureWebpack: {
    externals: {
      vue: "Vue",
      Vuex: "Vuex",
      "vue-router": "VueRouter",
      "element-ui": "ELEMENT",
      echarts: "echarts",
    },
}
    // webpack plugins
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      // 配置compression-webpack-plugin压缩
      new CompressionPlugin({
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
        threshold: 10240,
        minRatio: 0.8,
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100,
      }),
      // 提供带 Content-Encoding 编码的压缩版的资源
      // new CompressionPlugin({
      //     algorithm: 'gzip',
      //     test: /\.js$|\.html$|\.css/, // 匹配文件名
      //     // test: /\.(js|css)$/,
      //     threshold: 10240, // 对超过10k的数据压缩
      //     deleteOriginalAssets: false, // 不删除源文件
      //     minRatio: 0.8 // 压缩比
      // })
    ],
  },

  devServer: {
    // open: false, // 编译完成是否打开网页
    // host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
    // // port: 82, // 访问端口
    // https: false, // 编译失败时刷新页面
    // hot: true, // 开启热加载
    // hotOnly: false,
    // proxy: {
    //     [process.env.VUE_APP_API]: {//拦截器(拦截链接中有/api)
    //         target: process.env.VUE_API_DEV_TARGET,//'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API服务器的地址
    //         changeOrigin: true,
    //         pathRewrite: {
    //             //'^/api': '/'
    //             [`^${process.env.VUE_APP_API}`]: '',
    //             //[`^${process.env.VUE_APP_API}`]: '/', //配置出来的接口没有 /api
    //         }
    //     }
    // }
    proxy: {
      "/api": {
        // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
        target: "http://localhost:82",
        // target: "http://192.168.1.176:82",
        // target: "http://106.225.193.35:82",
        // target: "http://192.168.1.170:82",
        // target: "http://192.168.0.100:82",
        // target: "http://172.16.13.150:82",
        // target: "http://10.141.11.11:8081/api",
        // ws: true, //启用webSocket6566
        changeOrigin: true, //开启代理跨域
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};