添加大屏代码

wangrong

2021-11-24 130b72d6c5734f8acaac0214b6dfe5c8bfa319c3

添加大屏代码

 bigScreen/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 bigScreen/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  globals: {
    BMap: true,
  },
};

 bigScreen/.gitignore

New file
@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 bigScreen/README.en.md

New file
@@ -0,0 +1,36 @@
# bigscreen

#### Description
bigscreen

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

 bigScreen/README.md

New file
@@ -0,0 +1,24 @@
# bigscreen

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

 bigScreen/babel.config.js

New file
@@ -0,0 +1,3 @@
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
};

 bigScreen/kriging.js

New file
@@ -0,0 +1,487 @@
// Extend the Array class
Array.prototype.max = function() {
    return Math.max.apply(null, this);
};
Array.prototype.min = function() {
    return Math.min.apply(null, this);
};
Array.prototype.mean = function() {
    var i, sum;
    for(i=0,sum=0;i<this.length;i++)
    sum += this[i];
    return sum / this.length;
};
Array.prototype.pip = function(x, y) {
    var i, j, c = false;
    for(i=0,j=this.length-1;i<this.length;j=i++) {
    if( ((this[i][1]>y) != (this[j][1]>y)) &&
        (x<(this[j][0]-this[i][0]) * (y-this[i][1]) / (this[j][1]-this[i][1]) + this[i][0]) ) {
        c = !c;
    }
    }
    return c;
}

var kriging = function() {
    var kriging = {};

    var createArrayWithValues = function(value, n) {
        var array = [];
        for ( var i = 0; i < n; i++) {
            array.push(value);
        }
        return array;
    };

    // Matrix algebra
    kriging_matrix_diag = function(c, n) {
        var Z = createArrayWithValues(0, n * n);
        for(i=0;i<n;i++) Z[i*n+i] = c;
        return Z;
    };
    kriging_matrix_transpose = function(X, n, m) {
    var i, j, Z = Array(m*n);
    for(i=0;i<n;i++)
        for(j=0;j<m;j++)
        Z[j*n+i] = X[i*m+j];
    return Z;
    };
    kriging_matrix_scale = function(X, c, n, m) {
    var i, j;
    for(i=0;i<n;i++)
        for(j=0;j<m;j++)
        X[i*m+j] *= c;
    };
    kriging_matrix_add = function(X, Y, n, m) {
    var i, j, Z = Array(n*m);
    for(i=0;i<n;i++)
        for(j=0;j<m;j++)
        Z[i*m+j] = X[i*m+j] + Y[i*m+j];
    return Z;
    };
    // Naive matrix multiplication
    kriging_matrix_multiply = function(X, Y, n, m, p) {
    var i, j, k, Z = Array(n*p);
    for(i=0;i<n;i++) {
        for(j=0;j<p;j++) {
        Z[i*p+j] = 0;
        for(k=0;k<m;k++)
            Z[i*p+j] += X[i*m+k]*Y[k*p+j];
        }
    }
    return Z;
    };
    // Cholesky decomposition
    kriging_matrix_chol = function(X, n) {
    var i, j, k, sum, p = Array(n);
    for(i=0;i<n;i++) p[i] = X[i*n+i];
    for(i=0;i<n;i++) {
        for(j=0;j<i;j++)
        p[i] -= X[i*n+j]*X[i*n+j];
        if(p[i]<=0) return false;
        p[i] = Math.sqrt(p[i]);
        for(j=i+1;j<n;j++) {
        for(k=0;k<i;k++)
            X[j*n+i] -= X[j*n+k]*X[i*n+k];
        X[j*n+i] /= p[i];
        }
    }
    for(i=0;i<n;i++) X[i*n+i] = p[i];
    return true;
    };
    // Inversion of cholesky decomposition
    kriging_matrix_chol2inv = function(X, n) {
    var i, j, k, sum;
    for(i=0;i<n;i++) {
        X[i*n+i] = 1/X[i*n+i];
        for(j=i+1;j<n;j++) {
        sum = 0;
        for(k=i;k<j;k++)
            sum -= X[j*n+k]*X[k*n+i];
        X[j*n+i] = sum/X[j*n+j];
        }
    }
    for(i=0;i<n;i++)
        for(j=i+1;j<n;j++)
        X[i*n+j] = 0;
    for(i=0;i<n;i++) {
        X[i*n+i] *= X[i*n+i];
        for(k=i+1;k<n;k++)
        X[i*n+i] += X[k*n+i]*X[k*n+i];
        for(j=i+1;j<n;j++)
        for(k=j;k<n;k++)
            X[i*n+j] += X[k*n+i]*X[k*n+j];
    }
    for(i=0;i<n;i++)
        for(j=0;j<i;j++)
        X[i*n+j] = X[j*n+i];

    };
    // Inversion via gauss-jordan elimination
    kriging_matrix_solve = function(X, n) {
    var m = n;
    var b = Array(n*n);
    var indxc = Array(n);
    var indxr = Array(n);
    var ipiv = Array(n);
    var i, icol, irow, j, k, l, ll;
    var big, dum, pivinv, temp;

    for(i=0;i<n;i++)
        for(j=0;j<n;j++) {
        if(i==j) b[i*n+j] = 1;
        else b[i*n+j] = 0;
        }
    for(j=0;j<n;j++) ipiv[j] = 0;
    for(i=0;i<n;i++) {
        big = 0;
        for(j=0;j<n;j++) {
        if(ipiv[j]!=1) {
            for(k=0;k<n;k++) {
            if(ipiv[k]==0) {
                if(Math.abs(X[j*n+k])>=big) {
                big = Math.abs(X[j*n+k]);
                irow = j;
                icol = k;
                }
            }
            }
        }
        }
        ++(ipiv[icol]);

        if(irow!=icol) {
        for(l=0;l<n;l++) {
            temp = X[irow*n+l];
            X[irow*n+l] = X[icol*n+l];
            X[icol*n+l] = temp;
        }
        for(l=0;l<m;l++) {
            temp = b[irow*n+l];
            b[irow*n+l] = b[icol*n+l];
            b[icol*n+l] = temp;
        }
        }
        indxr[i] = irow;
        indxc[i] = icol;

        if(X[icol*n+icol]==0) return false; // Singular

        pivinv = 1 / X[icol*n+icol];
        X[icol*n+icol] = 1;
        for(l=0;l<n;l++) X[icol*n+l] *= pivinv;
        for(l=0;l<m;l++) b[icol*n+l] *= pivinv;

        for(ll=0;ll<n;ll++) {
        if(ll!=icol) {
            dum = X[ll*n+icol];
            X[ll*n+icol] = 0;
            for(l=0;l<n;l++) X[ll*n+l] -= X[icol*n+l]*dum;
            for(l=0;l<m;l++) b[ll*n+l] -= b[icol*n+l]*dum;
        }
        }
    }
    for(l=(n-1);l>=0;l--)
        if(indxr[l]!=indxc[l]) {
        for(k=0;k<n;k++) {
            temp = X[k*n+indxr[l]];
            X[k*n+indxr[l]] = X[k*n+indxc[l]];
            X[k*n+indxc[l]] = temp;
        }
        }

    return true;
    }

    // Variogram models
    kriging_variogram_gaussian = function(h, nugget, range, sill, A) {
    return nugget + ((sill-nugget)/range)*
    ( 1.0 - Math.exp(-(1.0/A)*Math.pow(h/range, 2)) );
    };
    kriging_variogram_exponential = function(h, nugget, range, sill, A) {
    return nugget + ((sill-nugget)/range)*
    ( 1.0 - Math.exp(-(1.0/A) * (h/range)) );
    };
    kriging_variogram_spherical = function(h, nugget, range, sill, A) {
    if(h>range) return nugget + (sill-nugget)/range;
    return nugget + ((sill-nugget)/range)*
    ( 1.5*(h/range) - 0.5*Math.pow(h/range, 3) );
    };

    // Train using gaussian processes with bayesian priors
    kriging.train = function(t, x, y, model, sigma2, alpha) {
    var variogram = {
        t      : t,
        x      : x,
        y      : y,
        nugget : 0.0,
        range  : 0.0,
        sill   : 0.0,
        A      : 1/3,
        n      : 0
    };
    switch(model) {
    case "gaussian":
        variogram.model = kriging_variogram_gaussian;
        break;
    case "exponential":
        variogram.model = kriging_variogram_exponential;
        break;
    case "spherical":
        variogram.model = kriging_variogram_spherical;
        break;
    };

    // Lag distance/semivariance
    var i, j, k, l, n = t.length;
    var distance = Array((n*n-n)/2);
    for(i=0,k=0;i<n;i++)
        for(j=0;j<i;j++,k++) {
        distance[k] = Array(2);
        distance[k][0] = Math.pow(
            Math.pow(x[i]-x[j], 2)+
            Math.pow(y[i]-y[j], 2), 0.5);
        distance[k][1] = Math.abs(t[i]-t[j]);
        }
    distance.sort(function(a, b) { return a[0] - b[0]; });
    variogram.range = distance[(n*n-n)/2-1][0];

    // Bin lag distance
    var lags = ((n*n-n)/2)>30?30:(n*n-n)/2;
    var tolerance = variogram.range/lags;
    var lag = createArrayWithValues(0,lags);
    var semi = createArrayWithValues(0,lags);
    if(lags<30) {
        for(l=0;l<lags;l++) {
        lag[l] = distance[l][0];
        semi[l] = distance[l][1];
        }
    }
    else {
        for(i=0,j=0,k=0,l=0;i<lags&&j<((n*n-n)/2);i++,k=0) {
        while( distance[j][0]<=((i+1)*tolerance) ) {
            lag[l] += distance[j][0];
            semi[l] += distance[j][1];
            j++;k++;
            if(j>=((n*n-n)/2)) break;
        }
        if(k>0) {
            lag[l] /= k;
            semi[l] /= k;
            l++;
        }
        }
        if(l<2) return variogram; // Error: Not enough points
    }

    // Feature transformation
    n = l;
    variogram.range = lag[n-1]-lag[0];
     var X = createArrayWithValues(1,2 * n);
    var Y = Array(n);
    var A = variogram.A;
    for(i=0;i<n;i++) {
        switch(model) {
        case "gaussian":
        X[i*2+1] = 1.0-Math.exp(-(1.0/A)*Math.pow(lag[i]/variogram.range, 2));
        break;
        case "exponential":
        X[i*2+1] = 1.0-Math.exp(-(1.0/A)*lag[i]/variogram.range);
        break;
        case "spherical":
        X[i*2+1] = 1.5*(lag[i]/variogram.range)-
            0.5*Math.pow(lag[i]/variogram.range, 3);
        break;
        };
        Y[i] = semi[i];
    }

    // Least squares
    var Xt = kriging_matrix_transpose(X, n, 2);
    var Z = kriging_matrix_multiply(Xt, X, 2, n, 2);
    Z = kriging_matrix_add(Z, kriging_matrix_diag(1/alpha, 2), 2, 2);
    var cloneZ = Z.slice(0);
    if(kriging_matrix_chol(Z, 2))
        kriging_matrix_chol2inv(Z, 2);
    else {
        kriging_matrix_solve(cloneZ, 2);
        Z = cloneZ;
    }
    var W = kriging_matrix_multiply(kriging_matrix_multiply(Z, Xt, 2, 2, n), Y, 2, n, 1);

    // Variogram parameters
    variogram.nugget = W[0];
    variogram.sill = W[1]*variogram.range+variogram.nugget;
    variogram.n = x.length;

    // Gram matrix with prior
    n = x.length;
    var K = Array(n*n);
    for(i=0;i<n;i++) {
        for(j=0;j<i;j++) {
        K[i*n+j] = variogram.model(Math.pow(Math.pow(x[i]-x[j], 2)+
                            Math.pow(y[i]-y[j], 2), 0.5),
                       variogram.nugget,
                       variogram.range,
                       variogram.sill,
                       variogram.A);
        K[j*n+i] = K[i*n+j];
        }
        K[i*n+i] = variogram.model(0, variogram.nugget,
                       variogram.range,
                       variogram.sill,
                       variogram.A);
    }

    // Inverse penalized Gram matrix projected to target vector
    var C = kriging_matrix_add(K, kriging_matrix_diag(sigma2, n), n, n);
    var cloneC = C.slice(0);
    if(kriging_matrix_chol(C, n))
        kriging_matrix_chol2inv(C, n);
    else {
        kriging_matrix_solve(cloneC, n);
        C = cloneC;
    }

    // Copy unprojected inverted matrix as K
    var K = C.slice(0);
    var M = kriging_matrix_multiply(C, t, n, n, 1);
    variogram.K = K;
    variogram.M = M;

    return variogram;
    };

    // Model prediction
    kriging.predict = function(x, y, variogram) {
    var i, k = Array(variogram.n);
    for(i=0;i<variogram.n;i++)
        k[i] = variogram.model(Math.pow(Math.pow(x-variogram.x[i], 2)+
                        Math.pow(y-variogram.y[i], 2), 0.5),
                   variogram.nugget, variogram.range,
                   variogram.sill, variogram.A);
    return kriging_matrix_multiply(k, variogram.M, 1, variogram.n, 1)[0];
    };
    kriging.variance = function(x, y, variogram) {
    var i, k = Array(variogram.n);
    for(i=0;i<variogram.n;i++)
        k[i] = variogram.model(Math.pow(Math.pow(x-variogram.x[i], 2)+
                        Math.pow(y-variogram.y[i], 2), 0.5),
                   variogram.nugget, variogram.range,
                   variogram.sill, variogram.A);
    return variogram.model(0, variogram.nugget, variogram.range,
            variogram.sill, variogram.A)+
    kriging_matrix_multiply(kriging_matrix_multiply(k, variogram.K,
                            1, variogram.n, variogram.n),
                k, 1, variogram.n, 1)[0];
    };

    // Gridded matrices or contour paths
    kriging.grid = function(polygons, variogram, width) {
    var i, j, k, n = polygons.length;
    if(n==0) return;

    // Boundaries of polygons space
    var xlim = [polygons[0][0][0], polygons[0][0][0]];
    var ylim = [polygons[0][0][1], polygons[0][0][1]];
    for(i=0;i<n;i++) // Polygons
        for(j=0;j<polygons[i].length;j++) { // Vertices
        if(polygons[i][j][0]<xlim[0])
            xlim[0] = polygons[i][j][0];
        if(polygons[i][j][0]>xlim[1])
            xlim[1] = polygons[i][j][0];
        if(polygons[i][j][1]<ylim[0])
            ylim[0] = polygons[i][j][1];
        if(polygons[i][j][1]>ylim[1])
            ylim[1] = polygons[i][j][1];
        }

    // Alloc for O(n^2) space
    var xtarget, ytarget;
    var a = Array(2), b = Array(2);
    var lxlim = Array(2); // Local dimensions
    var lylim = Array(2); // Local dimensions
    var x = Math.ceil((xlim[1]-xlim[0])/width);
    var y = Math.ceil((ylim[1]-ylim[0])/width);

    var A = Array(x+1);
    for(i=0;i<=x;i++) A[i] = Array(y+1);
    for(i=0;i<n;i++) {
        // Range for polygons[i]
        lxlim[0] = polygons[i][0][0];
        lxlim[1] = lxlim[0];
        lylim[0] = polygons[i][0][1];
        lylim[1] = lylim[0];
        for(j=1;j<polygons[i].length;j++) { // Vertices
        if(polygons[i][j][0]<lxlim[0])
            lxlim[0] = polygons[i][j][0];
        if(polygons[i][j][0]>lxlim[1])
            lxlim[1] = polygons[i][j][0];
        if(polygons[i][j][1]<lylim[0])
            lylim[0] = polygons[i][j][1];
        if(polygons[i][j][1]>lylim[1])
            lylim[1] = polygons[i][j][1];
        }

        // Loop through polygon subspace
        a[0] = Math.floor(((lxlim[0]-((lxlim[0]-xlim[0])%width)) - xlim[0])/width);
        a[1] = Math.ceil(((lxlim[1]-((lxlim[1]-xlim[1])%width)) - xlim[0])/width);
        b[0] = Math.floor(((lylim[0]-((lylim[0]-ylim[0])%width)) - ylim[0])/width);
        b[1] = Math.ceil(((lylim[1]-((lylim[1]-ylim[1])%width)) - ylim[0])/width);
        for(j=a[0];j<=a[1];j++)
        for(k=b[0];k<=b[1];k++) {
            xtarget = xlim[0] + j*width;
            ytarget = ylim[0] + k*width;
            if(polygons[i].pip(xtarget, ytarget))
            A[j][k] = kriging.predict(xtarget,
                          ytarget,
                          variogram);
        }
    }
    A.xlim = xlim;
    A.ylim = ylim;
    A.zlim = [variogram.t.min(), variogram.t.max()];
    A.width = width;
    return A;
    };
    kriging.contour = function(value, polygons, variogram) {

    };

    // Plotting on the DOM
    kriging.plot = function(canvas, grid, xlim, ylim, colors) {
    // Clear screen
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Starting boundaries
    var range = [xlim[1]-xlim[0], ylim[1]-ylim[0], grid.zlim[1]-grid.zlim[0]];
    var i, j, x, y, z;
    var n = grid.length;
    var m = grid[0].length;
    var wx = Math.ceil(grid.width*canvas.width/(xlim[1]-xlim[0]));
    var wy = Math.ceil(grid.width*canvas.height/(ylim[1]-ylim[0]));
    for(i=0;i<n;i++)
        for(j=0;j<m;j++) {
        if(grid[i][j]==undefined) continue;
        x = canvas.width*(i*grid.width+grid.xlim[0]-xlim[0])/range[0];
        y = canvas.height*(1-(j*grid.width+grid.ylim[0]-ylim[0])/range[1]);
        z = (grid[i][j]-grid.zlim[0])/range[2];
        if(z<0.0) z = 0.0;
        if(z>1.0) z = 1.0;

        ctx.fillStyle = colors[Math.floor((colors.length-1)*z)];
        ctx.fillRect(Math.round(x-wx/2), Math.round(y-wy/2), wx, wy);
        }

    };


    return kriging;
}();

if (module && module.exports){
   module.exports = kriging;
}

// export default kriging

 bigScreen/package-lock.json

New file
Diff too large

 bigScreen/package.json

New file
@@ -0,0 +1,49 @@
{
  "name": "bigscreen",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "baidumap": "0.0.4",
    "bmap": "^1.0.1",
    "bmaplib": "^1.0.1",
    "core-js": "^3.6.5",
    "echarts": "^4.9.0",
    "element-ui": "^2.15.2",
    "html2canvas": "^1.3.2",
    "ol": "^6.6.1",
    "socket.io-client": "^4.1.2",
    "v-charts": "^1.19.0",
    "vue": "^2.6.11",
    "vue-baidu-map": "^0.21.22",
    "vue-beauty": "^2.0.0-beta.19",
    "vue-router": "^3.2.0",
    "vue-socket.io": "^3.0.10",
    "vue-video-player": "^5.0.2",
    "vue-week-time": "^1.1.1",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2",
    "svg-sprite-loader": "^6.0.9",
    "vue-template-compiler": "^2.6.11"
  }
}

 bigScreen/public/configIP.js

New file
@@ -0,0 +1,2 @@
window.backstageURL = "http://192.168.119.100:4500/"
window.equipmentURL = "http://wiibox.xicp.io:19869/FRP/"

 bigScreen/public/data.js

New file
@@ -0,0 +1,468 @@
var data={

        "features": [

            {

                "attributes": {

                    "FID": 0,

                    "id": 1,

                    "name": "Beijing US Embassy",

                    "x": 116.468,

                    "y": 39.954999999999998,

                    "z": 4,

                    "xu": 454558.72859999997,

                    "yu": 4422898.159

                },

                "geometry": {

                    "x": 116.468,

                    "y": 39.954999999999998

                }

            },

            {

                "attributes": {

                    "FID": 1,

                    "id": 2,

                    "name": "Temple of Heaven",

                    "x": 116.407,

                    "y": 39.886000000000003,

                    "z": 36,

                    "xu": 449297.45990000002,

                    "yu": 4415272.716

                },

                "geometry": {

                    "x": 116.407,

                    "y": 39.886000000000003

                }

            },

            {

                "attributes": {

                    "FID": 2,

                    "id": 3,

                    "name": "Haidian Beijing Botanical Garden",

                    "x": 116.20699999999999,

                    "y": 40.002000000000002,

                    "z": 4,

                    "xu": 432311.35320000001,

                    "yu": 4428280.3169999998

                },

                "geometry": {

                    "x": 116.20699999999999,

                    "y": 40.002000000000002

                }

            },

            {

                "attributes": {

                    "FID": 3,

                    "id": 4,

                    "name": "Chaoyang Olympic Sports Center116.397",

                    "x": 116.39700000000001,

                    "y": 39.981999999999999,

                    "z": 3,

                    "xu": 448514.42090000003,

                    "yu": 4425933.4840000002

                },

                "geometry": {

                    "x": 116.39700000000001,

                    "y": 39.981999999999999

                }

            },

            {

                "attributes": {

                    "FID": 4,

                    "id": 5,

                    "name": "Chaoyang Agricultural Exhibition Hall",

                    "x": 116.461,

                    "y": 39.936999999999998,

                    "z": 3,

                    "xu": 453948.74660000001,

                    "yu": 4420903.926

                },

                "geometry": {

                    "x": 116.461,

                    "y": 39.936999999999998

                }

            },

            {

                "attributes": {

                    "FID": 5,

                    "id": 6,

                    "name": "Liangxiang",

                    "x": 116.136,

                    "y": 39.741999999999997,

                    "z": 2,

                    "xu": 425971.88909999997,

                    "yu": 4399479.2439999999

                },

                "geometry": {

                    "x": 116.136,

                    "y": 39.741999999999997

                }

            },

            {

                "attributes": {

                    "FID": 6,

                    "id": 7,

                    "name": "Fengtai Yungang",

                    "x": 116.146,

                    "y": 39.823999999999998,

                    "z": 2,

                    "xu": 426915.51539999997,

                    "yu": 4408572.0729999999

                },

                "geometry": {

                    "x": 116.146,

                    "y": 39.823999999999998

                }

            },

            {

                "attributes": {

                    "FID": 7,

                    "id": 8,

                    "name": "Shunyi New Town",

                    "x": 116.655,

                    "y": 40.127000000000002,

                    "z": 2,

                    "xu": 470605.50309999997,

                    "yu": 4441910.1670000004

                },

                "geometry": {

                    "x": 116.655,

                    "y": 40.127000000000002

                }

            },

            {

                "attributes": {

                    "FID": 8,

                    "id": 12,

                    "name": "Donggaocun Zhen",

                    "x": 117.12,

                    "y": 40.100000000000001,

                    "z": 5,

                    "xu": 510228.20750000002,

                    "yu": 4438863.2359999996

                },

                "geometry": {

                    "x": 117.12,

                    "y": 40.100000000000001

                }

            },

            {

                "attributes": {

                    "FID": 9,

                    "id": 13,

                    "name": "Tongzhou New Town",

                    "x": 116.663,

                    "y": 39.886000000000003,

                    "z": 5,

                    "xu": 471185.97159999999,

                    "yu": 4415158.7980000004

                },

                "geometry": {

                    "x": 116.663,

                    "y": 39.886000000000003

                }

            },

            {

                "attributes": {

                    "FID": 10,

                    "id": 14,

                    "name": "Huangcunzhen",

                    "x": 116.404,

                    "y": 39.718000000000004,

                    "z": 2,

                    "xu": 448916.78909999999,

                    "yu": 4396628.5209999997

                },

                "geometry": {

                    "x": 116.404,

                    "y": 39.718000000000004

                }

            },

            {

                "attributes": {

                    "FID": 11,

                    "id": 15,

                    "name": "BDA",

                    "x": 116.506,

                    "y": 39.795000000000002,

                    "z": 3,

                    "xu": 457706.38530000002,

                    "yu": 4405121.3250000002

                },

                "geometry": {

                    "x": 116.506,

                    "y": 39.795000000000002

                }

            },

            {

                "attributes": {

                    "FID": 12,

                    "id": 16,

                    "name": "Yufazhen",

                    "x": 116.3,

                    "y": 39.520000000000003,

                    "z": 1,

                    "xu": 439831.65490000002,

                    "yu": 4374718.0180000002

                },

                "geometry": {

                    "x": 116.3,

                    "y": 39.520000000000003

                }

            },

            {

                "attributes": {

                    "FID": 13,

                    "id": 17,

                    "name": "Yongledianzhen",

                    "x": 116.783,

                    "y": 39.712000000000003,

                    "z": 4,

                    "xu": 481399.35399999999,

                    "yu": 4395815.3370000003

                },

                "geometry": {

                    "x": 116.783,

                    "y": 39.712000000000003

                }

            },

            {

                "attributes": {

                    "FID": 14,

                    "id": 18,

                    "name": "Xianghe EPA",

                    "x": 117.009,

                    "y": 39.765999999999998,

                    "z": 5,

                    "xu": 500770.85320000001,

                    "yu": 4401786.0719999997

                },

                "geometry": {

                    "x": 117.009,

                    "y": 39.765999999999998

                }

            },

            {

                "attributes": {

                    "FID": 15,

                    "id": 19,

                    "name": "Badaling Northwest",

                    "x": 115.988,

                    "y": 40.365000000000002,

                    "z": 3,

                    "xu": 414076.95390000002,

                    "yu": 4468761.409

                },

                "geometry": {

                    "x": 115.988,

                    "y": 40.365000000000002

                }

            },

            {

                "attributes": {

                    "FID": 16,

                    "id": 20,

                    "name": "East Fourth Ring Road",

                    "x": 116.483,

                    "y": 39.939,

                    "z": 3,

                    "xu": 455829.68479999999,

                    "yu": 4421114.7860000003

                },

                "geometry": {

                    "x": 116.483,

                    "y": 39.939

                }

            },

            {

                "attributes": {

                    "FID": 17,

                    "id": 21,

                    "name": "Yanqing town",

                    "x": 115.97199999999999,

                    "y": 40.453000000000003,

                    "z": 4,

                    "xu": 412832.08510000003,

                    "yu": 4478545.159

                },

                "geometry": {

                    "x": 115.97199999999999,

                    "y": 40.453000000000003

                }

            },

            {

                "attributes": {

                    "FID": 18,

                    "id": 22,

                    "name": "Miyun Reservoir",

                    "x": 116.911,

                    "y": 40.499000000000002,

                    "z": 3,

                    "xu": 492458.57429999998,

                    "yu": 4483147.5360000003

                },

                "geometry": {

                    "x": 116.911,

                    "y": 40.499000000000002

                }

            },

            {

                "attributes": {

                    "FID": 19,

                    "id": 23,

                    "name": "Haidian Wanliu",

                    "x": 116.28700000000001,

                    "y": 39.987000000000002,

                    "z": 3,

                    "xu": 439126.71720000001,

                    "yu": 4426557.75

                },

                "geometry": {

                    "x": 116.28700000000001,

                    "y": 39.987000000000002

                }

            },

            {

                "attributes": {

                    "FID": 20,

                    "id": 24,

                    "name": "Yongdingmen Inner St",

                    "x": 116.39400000000001,

                    "y": 39.875999999999998,

                    "z": 2,

                    "xu": 448178.40250000003,

                    "yu": 4414170.284

                },

                "geometry": {

                    "x": 116.39400000000001,

                    "y": 39.875999999999998

                }

            },

            {

                "attributes": {

                    "FID": 21,

                    "id": 25,

                    "name": "Jianshe Road",

                    "x": 117.304,

                    "y": 39.719000000000001,

                    "z": 4,

                    "xu": 526055.42509999999,

                    "yu": 4396613.8959999997

                },

                "geometry": {

                    "x": 117.304,

                    "y": 39.719000000000001

                }

            },

            {

                "attributes": {

                    "FID": 22,

                    "id": 26,

                    "name": "Ligong, Chengde",

                    "x": 117.938,

                    "y": 41.011000000000003,

                    "z": 3,

                    "xu": 578874.61600000004,

                    "yu": 4540401.8559999997

                },

                "geometry": {

                    "x": 117.938,

                    "y": 41.011000000000003

                }

            },

            {

                "attributes": {

                    "FID": 23,

                    "id": 27,

                    "name": "Fengning County City Hall",

                    "x": 116.652,

                    "y": 41.215000000000003,

                    "z": 4,

                    "xu": 470827.95390000002,

                    "yu": 4562682.9199999999

                },

                "geometry": {

                    "x": 116.652,

                    "y": 41.215000000000003

                }

            },

            {

                "attributes": {

                    "FID": 24,

                    "id": 28,

                    "name": "Xiahuayuan EPA",

                    "x": 115.29600000000001,

                    "y": 40.508000000000003,

                    "z": 3,

                    "xu": 355627.29269999999,

                    "yu": 4485537.4510000004

                },

                "geometry": {

                    "x": 115.29600000000001,

                    "y": 40.508000000000003

                }

            },

            {

                "attributes": {

                    "FID": 25,

                    "id": 29,

                    "name": "Yuxian Secondary School",

                    "x": 114.596,

                    "y": 39.845999999999997,

                    "z": 4,

                    "xu": 294324.1188,

                    "yu": 4413430.4780000001

                },

                "geometry": {

                    "x": 114.596,

                    "y": 39.845999999999997

                }

            },

            {

                "attributes": {

                    "FID": 26,

                    "id": 30,

                    "name": "Zhouzhou Monitoring Stations",

                    "x": 116.03400000000001,

                    "y": 39.491999999999997,

                    "z": 3,

                    "xu": 416933.99089999998,

                    "yu": 4371822.0190000003

                },

                "geometry": {

                    "x": 116.03400000000001,

                    "y": 39.491999999999997

                }

            },

            {

                "attributes": {

                    "FID": 27,

                    "id": 31,

                    "name": "Guan Party School, Langfang",

                    "x": 116.30500000000001,

                    "y": 39.445,

                    "z": 3,

                    "xu": 440197.23119999998,

                    "yu": 4366391.0480000004

                },

                "geometry": {

                    "x": 116.30500000000001,

                    "y": 39.445

                }

            },

            {

                "attributes": {

                    "FID": 28,

                    "id": 32,

                    "name": "Guyuan County welfare",

                    "x": 115.681,

                    "y": 41.667999999999999,

                    "z": 4,

                    "xu": 390196.44390000001,

                    "yu": 4613756.0429999996

                },

                "geometry": {

                    "x": 115.681,

                    "y": 41.667999999999999

                }

            }

        ]

}

 bigScreen/public/favicon.ico

 bigScreen/public/flv.js

New file
Diff too large

 bigScreen/public/index.html

New file
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>上海中波监测平台</title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script type="text/javascript" src="./configIP.js"></script>
    <script>
      console.log(window)
    </script>

    <!-- built files will be auto injected -->
  </body>
  <script
    type="text/javascript"
    src="http://api.map.baidu.com/api?v=3.0&ak=003EurM0nat1YfowgMZPIBpDtGjbGOri"
  ></script>
  <!-- <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script> -->
  <!-- <script src="./ol.js"></script> -->
  <script src="./flv.js"></script>
  <script src="../kriging.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

  

  <!-- <link href="./ol.css" rel="stylesheet" />
  <script src="./ol.js"></script>
  <script src="./data.js"></script>
  <script src="./kriging.js"></script>
  <script type="text/javascript" src="./launchtower.js"></script>
  <script type="text/javascript" src="./shshape.js"></script> -->
  <!-- <script src="/socket.io/socket.io.js"></script> -->

  <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=003EurM0nat1YfowgMZPIBpDtGjbGOri"></script> -->
</html>

 bigScreen/src/App.vue

New file
@@ -0,0 +1,685 @@
<template>
  <div id="app">
    <router-view
      @showRePlay="showRePlay"
      @playVideo="playVideo"
      @joinRecord="joinRecord"
      @startPlay="startPlay"
      @stopPlay="stopPlay"
      v-loading="loading"
    />
    <el-dialog
      :title="rePlayMonitorpointName + ' ' + '回放列表'"
      :visible.sync="showRePlayVisible"
      width="80%"
      @close="closeAllReplay"
    >
      <div class="rePlayTile">
        <div style="width: 30%; display: flex">
          <span style="width: 50px; line-height: 28px">频率:</span>
          <el-input
            placeholder="请输入频率"
            v-model="rePlayFrequency"
            size="mini"
          >
          </el-input>
        </div>

        <div style="width: 30%; display: flex">
          <span style="width: 100px; line-height: 28px">录音方式:</span>
          <el-select
            v-model="isUnderWayValue"
            placeholder="请选择录音方式"
            size="mini"
          >
            <el-option label="定时录制" value="0"> </el-option>
            <el-option label="监听录制" value="3"> </el-option>
            <el-option label="采样录制" value="4"> </el-option>
          </el-select>
        </div>

        <div style="width: 30%">
          <el-date-picker
            v-model="rePlayTimeArr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
          >
          </el-date-picker>
        </div>
      </div>
      <el-table
        :data="rePlayTable"
        style="width: 100%; margin-top: 30px"
        :isKey="isKey"
        v-loading="rePlayLoading"
        :height="rePlayTableH"
      >
        <el-table-column prop="frequencyValue" label="频率"> </el-table-column>
        <el-table-column prop="starttime" label="开始时间">
          <template slot-scope="scope">
            <div>
              {{ dateFormatter(scope.row.starttime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stoptime" label="结束时间">
          <template slot-scope="scope">
            <div>
              {{ dateFormatter(scope.row.stoptime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rssi" label="场强"> </el-table-column>
        <el-table-column prop="assessvalue" label="手动评分"></el-table-column>
        <el-table-column prop="auto_assessvalue" label="自动评分">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                type="primary"
                @click="startRePlayVideo(scope.row)"
                >进行回放</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 0 20px; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="rePlayPageno"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="rePlayPagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rePlayTotalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="rePlayRadioVisible" @close="closeReplay">
      <div>
        <video
          id="rePlayVideo"
          ref="rePlayVideo"
          src=""
          controls
          preload
          width="100%"
        ></video>
      </div>
    </el-dialog>

    <video
      ref="videoElement"
      id="videoElement"
      controls
      width="0"
      height="0"
      v-show="false"
    >
      xxx
    </video>
  </div>
</template>

<script>
export default {
  watch: {
    isUnderWayValue: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.rePlayStartTime = this.dateFormatter(this.rePlayTimeArr[0]);
          this.rePlayEndTime = this.dateFormatter(this.rePlayTimeArr[1]);
          this.getReplayInfo();
        }, 500);
      },
    },
    rePlayFrequency: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.rePlayStartTime = this.dateFormatter(this.rePlayTimeArr[0]);
          this.rePlayEndTime = this.dateFormatter(this.rePlayTimeArr[1]);
          this.getReplayInfo();
        }, 500);
      },
    },
    rePlayTimeArr: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.rePlayStartTime = this.dateFormatter(this.rePlayTimeArr[0]);
          this.rePlayEndTime = this.dateFormatter(this.rePlayTimeArr[1]);
          this.getReplayInfo();
        }, 500);
      },
      deep: true,
    },
  },
  data() {
    return {
      loading: false,
      isUnderWayValue: "0",
      timer: null,
      isKey: false,
      player: null,
      recordingtime: null,
      rtsp: null,
      showRePlayVisible: false,
      rePlayMonitorpointName: "",
      rePlayMonitorpointId: "",
      rePlayPagesize: 10,
      rePlayPageno: 1,
      rePlayFrequency: "",
      rePlayEndTime: "",
      rePlayStartTime: "",
      rePlayTable: [],
      rePlayTimeArr: [],
      rePlayTotalCount: 100,
      rePlayLoading: false,
      rePlayVideo: null,
      rePlayRadioVisible: false,
      rePlayTableH: 0,
    };
  },
  mounted() {
    this.rePlayTableH = window.innerHeight - 200 + "px";
  },
  methods: {
    playVideo() {},
    closeAllReplay() {
      this.rePlayFrequency = "";
      this.rePlayTimeArr = [];
      this.isUnderWayValue = 0;
    },
    //显示回放界面
    showRePlay(data) {
      this.rePlayMonitorpointId = data.monitorpointId;
      this.rePlayMonitorpointName = data.monitorpointName;
      this.getReplayInfo();
      this.showRePlayVisible = true;
    },

    //获取回放列表
    getReplayInfo() {
      this.rePlayLoading = true;
      let param = {
        bid: "getRecordList",
        isUnderWay: Number(this.isUnderWayValue),
        monitorpointId: this.rePlayMonitorpointId,
        start_time: this.rePlayStartTime,
        end_time: this.rePlayEndTime,
        frequency: this.rePlayFrequency,
        pagesize: this.rePlayPagesize,
        pageno: this.rePlayPageno,
      };

      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        this.rePlayTable = res.data.data[0];
        this.rePlayTotalCount = res.data.data[1][0].counter;
        this.isKey = !this.isKey;
        this.rePlayLoading = false;
      });
    },

    //分页改变时
    handleSizeChange(size) {
      this.rePlayPagesize = size;
      this.getReplayInfo();
    },
    handleCurrentChange(page) {
      this.rePlayPageno = page;
      this.getReplayInfo();
    },

    //获取回放地址
    startRePlayVideo(data) {
      let param = new URLSearchParams();
      param.append("method", "mutipleReview");
      param.append("instruct", 1);
      param.append("playType", 1);
      param.append("hls", 1);
      param.append("key", 123456);
      param.append("monitorpointId", this.rePlayMonitorpointId);
      param.append("frequencyValue", data.frequencyValue);
      param.append("startTime", this.dateFormatter(data.starttime));
      param.append("endTime", this.dateFormatter(data.stoptime));

      this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
        (res) => {
          if (res.success == "true") {
            //显示播放器
            this.rePlayRadioVisible = true;
            setTimeout(() => {
              this.playReplay(res.url);
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },

    //开始回放
    playReplay(url) {
      this.rePlayVideo = document.getElementById("rePlayVideo");
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(this.rePlayVideo);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          this.rePlayVideo.play();
        });
      } else if (
        this.rePlayVideo.canPlayType("application/vnd.apple.mpegurl")
      ) {
        this.rePlayVideo.src = url;
        this.rePlayVideo.addEventListener("loadedmetadata", function () {
          this.rePlayVideo.play();
        });
      }
    },

    //关闭播放器
    closeReplay() {
      if (this.rePlayVideo) {
        this.rePlayVideo.pause();
        this.rePlayVideo = null;
      }
    },

    //格式化时间
    dateFormatter(date) {
      if (date) {
        let time = new Date(date);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return "";
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },

    //加入录制
    joinRecord(recordData) {
      console.log(recordData);
      this.$prompt("请输入时间(分钟)", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern:
          /^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/,
        inputErrorMessage: "请输入1到360的整数",
      })
        .then(({ value }) => {
          this.loading = true;
          let param = {
            bid: "checkChannel",
            channelId: 3,
            monitorpointId: recordData.monitorpointId,
          };
          this.$getJSON(
            window.backstageURL + "dataservice/getNoTokenData",
            param
          ).then((res) => {
            console.log(res);
            if (
              Number(res.data.data[0][0].frequencyValue) ===
              Number(recordData.frequencyValue)
            ) {
              this.loading = false;
            } else {
              if (res.data.data[0][0].frequencyValue) {
                this.$confirm(
                  `是否停止录制${res.data.data[0][0].frequencyValue},并将${recordData.frequencyValue}加入录制`,
                  "提示",
                  {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  }
                )
                  .then(() => {
                    console.log(value);
                    this.addRecording(recordData, value);
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消",
                    });
                  });
              } else {
                console.log(value);
                this.addRecording(recordData, value);
              }
            }
          });
        })
        .catch(() => {
          this.loading = false;

          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    addRecording(recordData, value) {
      console.log("123");
      let param = new URLSearchParams();
      param.append("method", "record");
      param.append("key", 111111);
      param.append("recordTimeLength", value);
      param.append("monitorpointId", recordData.monitorpointId);
      param.append("frequencyValue", recordData.frequencyValue);
      param.append("isUnderWay", 0);
      let url = `${window.equipmentURL}/FRP/TNewrecordtask.do?method=record&monitorpointId=${recordData.monitorpointId}&frequencyValue=${recordData.frequencyValue}`;
      this.$getJSON(window.equipmentURL + "FRP/TNewrecordtask.do", param).then(
        (res) => {
          console.log(res);
          // this.$emit("hideLoading");
          let param1 = {
            bid: "setChannelRecord",
            monitorpointId: recordData.monitorpointId,
            frequency: recordData.frequencyValue,
            userid: JSON.parse(sessionStorage.getItem("userName")).account,
            requesturl: url,
            success: res[0].success.toString(),
            msg: res[0].msg,
            recordminitus: 180,
          };

          this.$post(window.backstageURL + "dataservice/dealData", param1).then(
            (res1) => {}
          );

          if (res[0].success) {
            this.loading = false;
            this.$message.success(res[0].msg);
            // this.getCollection();
            // this.getFrequency(this.showInfo);
          } else {
            this.loading = false;
            this.$message.error(res[0].msg);
          }
        }
      );
    },

    //开始收听
    startPlay(playData) {
      this.loading = true;
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
      let param = {
        bid: "checkChannel",
        channelId: 2,
        monitorpointId: playData.monitorpointId,
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res1) => {
        if (
          res1.data.data[0][0].frequencyValue &&
          res1.data.data[0][0].frequencyValue != playData.frequencyValue
        ) {
          this.$confirm(`是否暂停副录通道1分钟，随后恢复`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              if (this.player) {
                if (this.rtsp) {
                  this.recordingtime = new Date();
                  this.isplay = true;
                  this.player.play();
                  this.loading = false;
                } else {
                  this.loading = false;

                  this.$message.error("无音频文件");
                }
              } else {
                this.getPalyUrl(
                  playData.monitorpointId,
                  playData.frequencyValue
                );
              }
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        } else {
          if (this.player) {
            if (this.rtsp) {
              this.isplay = true;
              this.player.play();
            } else {
              this.$message.error("无音频文件");
              this.loading = false;
            }
          } else {
            this.getPalyUrl(playData.monitorpointId, playData.frequencyValue);
          }
        }
      });
    },

    getPalyUrl(monitorpointId, frequencyValue) {
      console.log(monitorpointId);
      console.log(frequencyValue);
      let param = new URLSearchParams();
      param.append("method", "playLiveNew");
      param.append("instruct", 1);
      param.append("playType", 0);
      param.append("hls", 0);
      param.append("key", 123456);
      param.append("monitorpointId", monitorpointId);
      param.append("frequencyValue", frequencyValue);

      let url = `${window.equipmentURL}FRP/ScanSignal.do?method=playLiveNew&instruct=1&playType=0&hls=0&key=123456&monitorpointId=${monitorpointId}&frequencyValue=${frequencyValue}`;
      this.$getJSON(window.equipmentURL + "FRP/ScanSignal.do", param).then(
        (res) => {
          console.log(res);
          let par = new URLSearchParams();
          par.append("method", "record");
          par.append("key", 111111);
          par.append("recordTimeLength", 1);
          par.append("monitorpointId", monitorpointId);
          par.append("frequencyValue", frequencyValue);
          par.append("isUnderWay", 3);

          let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${monitorpointId}&frequencyValue=${frequencyValue}`;
          this.$getJSON(
            window.equipmentURL + "FRP/TNewrecordtask.do",
            par
          ).then((re) => {
            console.log(re);
            let par1 = {
              bid: "setTempRecord",
              monitorpointId: monitorpointId,
              frequency: frequencyValue,
              userid: this.userid,
              requesturl: url,
              success: re[0].success.toString(),
              msg: re[0].msg,
              recordminitus: 1,
            };

            this.$post(window.backstageURL + "dataservice/dealData", par1).then(
              (re1) => {}
            );

            if (re[0].success) {
              this.$message.success(re[0].msg);
            } else {
              this.$message.error(re[0].msg);
            }
          });

          this.$message.warning(res.success);

          let flvurl = "";
          if (res.url) {
            flvurl = res.url;
          }

          let param1 = {
            bid: "setMonitoringRecord",
            monitorpointId: monitorpointId,
            frequency: frequencyValue,
            userid: this.userid,
            requesturl: url,
            success: res.success,
            msg: res.msg,
            flvurl: flvurl,
            recordminitus: 1,
          };

          this.$getJSON(
            window.backstageURL + "dataservice/recordMonitorOpt",
            param1
          ).then((res1) => {});

          if (res.url) {
            this.rtsp = res.url;

            let video = document.getElementById("videoElement");

            if (flvjs.isSupported()) {
              this.player = flvjs.createPlayer(
                {
                  type: "flv",
                  isLive: true,
                  fluid: true,
                  url: this.rtsp,
                },
                {
                  enableStashBuffer: false,
                  fixAudioTimestampGap: false,
                  isLive: true,
                }
              );

              this.player.attachMediaElement(video);

              this.player.load(); //加载
              this.loading = false;

              if (this.rtsp) {
                this.isplay = true;
                this.recordingtime = new Date();
                this.player.play();
              } else {
                this.$message.error("无音频文件");
              }
            }
          }
        }
      );
    },

    //停止播放
    stopPlay() {
      console.log("!@#");
      console.log(this.player);

      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
    },
  },
  beforeDestroy() {
    // let param = {
    //   bid: "stopTempRecord",
    //   frequency: this.showFrequencyValue,
    //   monitorpointId: this.showInfo.monitorpointId,
    // };
    // this.$getJSON(window.backstageURL +
    //   "dataservice/getNoTokenData",
    //   param
    // ).then((res) => {});
    if (this.player) {
      this.player.pause();
      this.player.unload();
      this.player.detachMediaElement();
      this.player.destroy();
      this.player = null;
    }
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

html,
body,
#app {
  height: 100%;
}

.rePlayTile {
  padding: 0 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
</style>

 bigScreen/src/api/index.js

New file
@@ -0,0 +1,10 @@
// import request from '@/utils/request.js';

// //登录
// export function getAllPoint(data){
//     return request({
//         url:'/TMonitorpointInfo.do',
//         method:'POST',
//         data
//     })
// }

 bigScreen/src/assets/1.png

 bigScreen/src/assets/2.png

 bigScreen/src/assets/3.png

 bigScreen/src/assets/4.png

 bigScreen/src/assets/5.png

 bigScreen/src/assets/bad.png

 bigScreen/src/assets/diamond.png

 bigScreen/src/assets/fashedianDark.png

 bigScreen/src/assets/fashedianLight.jpg

 bigScreen/src/assets/legal.png

 bigScreen/src/assets/logo.png

 bigScreen/src/assets/love.png

 bigScreen/src/assets/shouyinjiDark.png

 bigScreen/src/assets/shouyinjiLight.jpg

 bigScreen/src/assets/shouyinjiLight1.jpg

 bigScreen/src/assets/t2/1.png

 bigScreen/src/assets/t2/2.png

 bigScreen/src/assets/t2/3.png

 bigScreen/src/assets/t2/4.png

 bigScreen/src/assets/t2/5.png

 bigScreen/src/assets/t2/wx.png

 bigScreen/src/assets/tmp/1.png

 bigScreen/src/assets/tmp/2.png

 bigScreen/src/assets/tmp/3.png

 bigScreen/src/assets/tmp/4.png

 bigScreen/src/assets/tmp/5.png

 bigScreen/src/assets/tmp/wx.png

 bigScreen/src/assets/unLove.png

 bigScreen/src/assets/wx.png

 bigScreen/src/common/base.scss

New file
@@ -0,0 +1,196 @@
//css默认样式初始化大全
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
html {
  font-size: 62.5%;
  color: #222;
}

::selection {
  background-color: #b3d4fc;
  text-shadow: none;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
/* ===============
   自定义页面样式
   =============== */
body {
  font: 1.2rem "simhei", Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background-color: #f7f7f7;
}

a {
  color: #666;
  text-decoration: none;
}

a:hover,
a:active {
  color: #0ae;
  text-decoration: underline;
}
/*公共类*/
.fl {
  float: left;
}
.fr {
  float: right;
}
.al {
  text-align: left;
}
.ac {
  text-align: center;
}
.ar {
  text-align: right;
}
.hide {
  display: none;
}

 bigScreen/src/components/SvgIcon/index.vue

New file
@@ -0,0 +1,43 @@
<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
  },
};
</script>
 
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

 bigScreen/src/components/dropdowns/DropDown.vue

New file
@@ -0,0 +1,32 @@
<template>

  <el-dropdown @command="handleCommand">

    <span class="el-dropdown-link">

      其他操作<i class="el-icon-arrow-down el-icon--right"></i>

    </span>

    <el-dropdown-menu slot="dropdown">

      <el-dropdown-item

        v-for="(dropInfo, key) in dropOption"

        :key="key"

        :command="dropInfo"

        :value="dropInfo"

        >{{ dropInfo.item }}</el-dropdown-item

      >

    </el-dropdown-menu>

  </el-dropdown>

</template>



<script>

export default {

  data() {

    return {};

  },

  mounted() {},

  watch: {},

  props: ["dropOption"],

  methods: {

    handleCommand(command) {

      this.$emit("handleAct", command);

    },

  },

};

</script>


 bigScreen/src/components/pageNations/Pagnations.vue

New file
@@ -0,0 +1,77 @@
<template>

  <el-pagination

    style="text-align: center"

    @size-change="handleSizeChange"

    @current-change="handleCurrentChange"

    :current-page="page"

    :page-sizes="size_list"

    :page-size="size"

    background

    :pager-count="pagerCount"

    layout="total, sizes, prev, pager, next, jumper"

    :total="total"

  >

  </el-pagination>

</template>



<script>

export default {

  data() {

    return {

      size_list: [10, 20, 30, 40],

      total: 0,

      page: 1,

      size: 10,

      pagerCount: 5,

    };

  },

  created() {

    this.getTotalsize();

  },

  props: ["totalCountOrURL", "params"],

  watch: {

    totalCountOrURL() {

      this.getTotalsize();

    },

    params() {

      this.getTotalsize();

    },

  },

  methods: {

    getTotalsize() {

      if (typeof this.totalCountOrURL == "number") {

        // 为number表示前台分页 值即为总数  不需要从后台查询

        this.total = this.totalCountOrURL;

      } else {

        // 参数若没有初始化 则不向后台发送请求 (应避免参数本身就为null的情况)

        for (let p in this.params) {

          if (!this.params[p]) {

            return;

          }

        }

        this.$getJSON(this.totalCountOrURL, this.params).then((res) => {

          this.total = res.data[0].count;

          this.$emit("totalCount", this.total);

        });

      }

    },

    handleSizeChange(a) {

      this.size = a;

      if (this.page > Math.ceil(this.total / this.size)) {

        this.page = Math.ceil(this.total / this.size);

      }

      this.$emit("change", {

        page: this.page,

        size: this.size,

      });

    },

    handleCurrentChange(a) {

      this.page = a;

      this.$emit("change", {

        page: this.page,

        size: this.size,

      });

    },

  },

};

</script>

 bigScreen/src/components/pageNations/SmallPagnations.vue

New file
@@ -0,0 +1,77 @@
<template>

  <el-pagination

    style="text-align: center"

    @size-change="handleSizeChange"

    @current-change="handleCurrentChange"

    :current-page="page"

    :page-sizes="size_list"

    :page-size="size"

    :pager-count="pagerCount"

    small

    background

    layout="total, prev, pager, next"

    :total="total"

  ></el-pagination>

</template>



<script>

export default {

  data() {

    return {

      size_list: [10, 20, 30, 40],

      total: 0,

      page: 1,

      size: 10,

      pagerCount: 5,

    };

  },

  created() {

    this.getTotalsize();

  },

  props: ["totalCountOrURL", "params"],

  watch: {

    totalCountOrURL() {

      this.getTotalsize();

    },

    params() {

      this.getTotalsize();

    },

  },

  methods: {

    getTotalsize() {

      if (typeof this.totalCountOrURL == "number") {

        // 为number表示前台分页 值即为总数  不需要从后台查询

        this.total = this.totalCountOrURL;

      } else {

        // 参数若没有初始化 则不向后台发送请求 (应避免参数本身就为null的情况)

        for (let p in this.params) {

          if (!this.params[p]) {

            return;

          }

        }

        this.$getJSON(this.totalCountOrURL, this.params).then((res) => {

          this.total = res.data[0].count;

          this.$emit("totalCount", this.total);

        });

      }

    },

    handleSizeChange(a) {

      this.size = a;

      if (this.page > Math.ceil(this.total / this.size)) {

        this.page = Math.ceil(this.total / this.size);

      }

      this.$emit("change", {

        page: this.page,

        size: this.size,

      });

    },

    handleCurrentChange(a) {

      this.page = a;

      this.$emit("change", {

        page: this.page,

        size: this.size,

      });

    },

  },

};

</script>

 bigScreen/src/components/searchs/Search.vue

New file
@@ -0,0 +1,199 @@

<template>
  <el-form :inline="true" size="mini">
    <el-form-item
      v-for="(filterInfo, key) in filter"
      :key="key"
      :label="filterInfo.text"
    >
      <!--单选框-->
      <el-radio-group
        v-model="returnValue[key]"
        v-if="filterInfo.type == 'radioGroup'"
        :style="`width:${filterInfo.width};`"
      >
        <el-radio-button
          :label="option.id"
          v-for="(option, index) in filterInfo.options"
          :key="index"
          >{{ option.name }}</el-radio-button
        >
      </el-radio-group>

      <!--搜索类型为输入框-->
      <el-input
        v-else-if="filterInfo.type == 'input'"
        v-model="returnValue[key]"
        :placeholder="filterInfo.placeholder"
        :style="`width:${filterInfo.width};`"
      >
      </el-input>

      <!--搜索类型输入框远程搜索服务端数据-->
      <el-autocomplete
        v-else-if="filterInfo.type == 'autocomplete'"
        v-model="returnValue[key]"
        :placeholder="filterInfo.placeholder"
        :fetch-suggestions="querySearchAsync"
        :trigger-on-focus="true"
        :style="`width:${filterInfo.width};`"
      >
      </el-autocomplete>
      <!--搜索类型为日期或日期时间-->
      <el-date-picker
        v-else-if="
          filterInfo.type == 'date' ||
          filterInfo.type == 'datetime' ||
          filterInfo.type == 'month' ||
          filterInfo.type == 'year'
        "
        :format="
          filterInfo.type == 'date'
            ? 'yyyy-MM-dd'
            : filterInfo.type == 'datetime'
            ? 'yyyy-MM-dd HH:mm:ss'
            : filterInfo.type == 'month'
            ? 'yyyy-MM'
            : 'yyyy'
        "
        v-model="returnValue[key]"
        :type="filterInfo.type"
        :style="`width:${filterInfo.width};`"
        @change="pickerChange(filterInfo, key, returnValue[key])"
        :placeholder="filterInfo.placeholder"
      >
      </el-date-picker>

      <!--搜索类型为日期范围或日期时间范围-->
      <el-date-picker
        v-else-if="
          filterInfo.type == 'daterange' || filterInfo.type == 'datetimerange'
        "
        v-model="returnValue[key]"
        :type="filterInfo.type"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="pickerRangeChange(filterInfo, key, returnValue[key])"
        :style="`width:${filterInfo.width};`"
        :placeholder="filterInfo.placeholder"
      >
      </el-date-picker>

      <!--搜索类型为选择器-->
      <el-select
        v-else-if="filterInfo.type == 'select'"
        v-model="returnValue[key]"
        clearable
        :multiple="filterInfo.multiple"
        :collapse-tags="filterInfo.multiple"
        :placeholder="filterInfo.placeholder"
        :style="`width:${filterInfo.width};`"
      >
        <el-option
          v-for="(option, index) in filterInfo.options"
          :key="index"
          :label="option.name"
          :value="option.id"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch"
        >查询</el-button
      >
      <el-button type="info" icon="el-icon-delete" @click="handleClear"
        >清空查询</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      returnValue: {},
    };
  },
  watch: {},
  props: ["filter"],
  created() {
    this.handleSearch();
  },
  methods: {
    pickerChange(info, key, value) {
      switch (info.type) {
        case "date":
          this.returnValue[key] = this.format(value, "yyyy-MM-dd");
          break;
        case "month":
          this.returnValue[key] = this.format(value, "yyyy-MM");
          break;
        case "year":
          this.returnValue[key] = this.format(value, "yyyy");
          break;
        case "datetime":
          this.returnValue[key] = this.format(value, "yyyy-MM-dd hh:mm:ss");
          break;
      }
    },
    pickerRangeChange(info, key, value) {
      switch (info.type) {
        case "daterange":
          for (let i in value) {
            this.returnValue[key][i] = this.format(value[i], "yyyy-MM-dd");
          }
          break;
        case "datetimerange":
          for (let i in value) {
            this.returnValue[key][i] = this.format(
              value[i],
              "yyyy-MM-dd hh:mm:ss"
            );
          }
          break;
      }
    },
    handleSearch() {
      let options = [];
      for (let key in this.returnValue) {
        if (typeof this.filter[key] != "undefined") {
          let value = this.returnValue[key];
          if (value != "" && value != []) {
            options.push({
              type: this.filter[key].sql_type,
              name: key,
              value: this.returnValue[key],
            });
          }
        }
      }
      this.$emit("handleSearch", options);
    },
    handleClear() {
      let options = [];
      for (let key in this.returnValue) {
        if (typeof this.filter[key] != "undefined") {
          if (typeof this.returnValue[key] == "object") {
            this.returnValue[key] = [];
          } else if (typeof this.filter[key].default != "undefined") {
            this.returnValue[key] = this.filter[key].default;
            options.push({
              type: this.filter[key].sql_type,
              name: key,
              value: this.returnValue[key],
            });
          } else {
            this.returnValue[key] = "";
          }
        } else {
          continue;
        }
      }
      this.$emit("handleSearch", options);
    },
  },
};
</script>

 bigScreen/src/icons/index.js

New file
@@ -0,0 +1,9 @@
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
 
// register globally
Vue.component('svg-icon', SvgIcon)
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

 bigScreen/src/icons/svg/add.svg

New file
@@ -0,0 +1 @@
<svg t="1628651250117" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2833" width="32" height="32"><path d="M512 74.867566m-50.620396 0a50.620396 50.620396 0 1 0 101.240792 0 50.620396 50.620396 0 1 0-101.240792 0Z" fill="#FFFFFF" p-id="2834"></path><path d="M967.583568 817.16506a36.041722 36.041722 0 0 0-36.041722 36.041722c0 53.65762-35.636759 98.912255-77.85417 98.912255H170.312324c-42.217411 0-77.85417-45.305255-77.85417-98.912255a36.041722 36.041722 0 0 0-72.083444 0c0 94.255178 67.274507 170.995699 149.937614 170.9957h683.375352c82.663107 0 149.937614-76.740521 149.937614-170.9957a36.092343 36.092343 0 0 0-36.041722-36.041722z" fill="#FFFFFF" p-id="2835"></path><path d="M485.120569 890.260913a37.864057 37.864057 0 0 0 53.657621 0l143.205101-143.154482a37.965297 37.965297 0 1 0-53.70824-53.70824l-78.410994 78.360373V302.60873a37.965297 37.965297 0 0 0-75.930595 0v469.200455L395.573088 693.448811a37.965297 37.965297 0 1 0-53.708241 53.708241l143.255722 143.103861z" fill="#FFFFFF" p-id="2836"></path></svg>

 bigScreen/src/icons/svg/recordAdd.svg

New file
@@ -0,0 +1 @@
<svg t="1628652034151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4034" width="32" height="32"><path d="M448 448H192v128h256v256h128V576h256V448H576V192H448v256z m64 576A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z" fill="#FFFFFF" p-id="4035"></path></svg>

 bigScreen/src/icons/svg/recordAddBlack.svg

New file
@@ -0,0 +1 @@
<svg t="1628652034151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4034" width="32" height="32"><path d="M448 448H192v128h256v256h128V576h256V448H576V192H448v256z m64 576A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z" fill="#000000" p-id="4035"></path></svg>

 bigScreen/src/icons/svg/stop.svg

New file
@@ -0,0 +1 @@
<svg t="1628651957394" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3839" width="32" height="32"><path d="M320 192v106.432c-97.28 61.12-161.792 167.68-161.792 289.024 0 189.632 157.632 343.36 352 343.36 194.432 0 352-153.728 352-343.36 0-119.808-62.848-225.28-158.208-286.72V192c151.36 70.144 256 220.608 256 394.944C960 828.352 759.424 1024 512 1024s-448-195.648-448-437.056C64 412.608 168.64 262.144 320 192z m128-192h128v448H448V0z" fill="#FFFFFF" p-id="3840"></path></svg>

 bigScreen/src/icons/svg/stopBlack.svg

New file
@@ -0,0 +1 @@
<svg t="1628651957394" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3839" width="32" height="32"><path d="M320 192v106.432c-97.28 61.12-161.792 167.68-161.792 289.024 0 189.632 157.632 343.36 352 343.36 194.432 0 352-153.728 352-343.36 0-119.808-62.848-225.28-158.208-286.72V192c151.36 70.144 256 220.608 256 394.944C960 828.352 759.424 1024 512 1024s-448-195.648-448-437.056C64 412.608 168.64 262.144 320 192z m128-192h128v448H448V0z" fill="#000000" p-id="3840"></path></svg>

 bigScreen/src/icons/svg/task.svg

New file
@@ -0,0 +1 @@
<svg t="1628649797377" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1232" width="32" height="32"><path d="M437.251671 942.206295h-291.510462c-40.033044 0-72.480462-32.457347-72.480462-72.480463V144.950996c0-40.033044 32.447418-72.480462 72.480462-72.480463h652.294375c40.033044 0 72.480462 32.447418 72.480462 72.480463v248.022185c26.092966 11.447942 49.942017 26.529835 72.480462 43.567708V144.950996c0-80.046231-64.904765-144.950996-144.960924-144.950996H145.751138c-80.05616 0-144.960925 64.894836-144.960924 144.950996v724.774836c0 80.05616 64.904765 144.960925 144.950995 144.960925h364.348363a365.348196 365.348196 0 0 1-72.837901-72.480462z m0 0" fill="#FFFFFF" p-id="1233"></path><path d="M742.324916 476.782438c-151.1168 0-273.608781 122.50191-273.608781 273.608781s122.50191 273.608781 273.608781 273.608781 273.608781-122.50191 273.608781-273.608781-122.50191-273.608781-273.608781-273.608781z m0 478.678845c-113.278027 0-205.099851-91.831753-205.099851-205.09985s91.831753-205.099851 205.099851-205.099851S947.434695 637.093335 947.434695 750.361433c-0.009929 113.268098-91.831753 205.099851-205.109779 205.09985z m0 0" fill="#FFFFFF" p-id="1234"></path><path d="M857.380203 725.489712h-77.732813v-38.861442c0-21.466131-17.40524-38.871371-38.871372-38.871371-21.466131 0-38.871371 17.395311-38.871371 38.871371v77.732814c0 21.466131 17.40524 38.871371 38.871371 38.871371H857.380203c21.466131 0 38.861442-17.40524 38.861443-38.871371 0-21.466131-17.40524-38.871371-38.861443-38.871372zM457.595845 180.138771a38.643008 38.643008 0 0 0-54.648283 0L273.445827 309.640507l-51.848353-51.848353c-14.575523-14.575523-38.20614-14.575523-52.771734 0-14.575523 14.575523-14.575523 38.20614 0 52.781663l72.361316 72.371245c1.638257 2.79993 2.948863 5.679291 5.371498 8.082068 8.082068 8.002637 18.656272 11.428084 29.071615 11.03093a37.401904 37.401904 0 0 0 26.500049-10.961428c0.863808-0.853879 1.241104-1.946051 1.946051-2.958792L457.595845 234.707623a38.575492 38.575492 0 0 0 11.318867-27.284426c0-10.236624-4.07082-20.046309-11.318867-27.284426z m127.714546 66.543022c-21.466131 0-38.871371 17.395311-38.871371 38.861442s17.40524 38.871371 38.871371 38.871371h233.198441c21.466131 0 38.861442-17.395311 38.861442-38.871371 0-21.466131-17.395311-38.861442-38.861442-38.861442H585.310391zM402.957491 452.198654L273.445827 581.710319l-51.848353-51.848353c-14.575523-14.565594-38.20614-14.565594-52.771734 0-14.575523 14.575523-14.575523 38.20614 0 52.781663l72.361316 72.371245c1.638257 2.79993 2.948863 5.679291 5.371498 8.082068 8.082068 8.002637 18.656272 11.428084 29.071615 11.040859a37.401904 37.401904 0 0 0 26.500049-10.961429c0.863808-0.853879 1.241104-1.946051 1.946051-2.948862l153.519576-153.450075c13.294704-15.349972 12.460682-38.37493-1.916264-52.732018-14.367018-14.357089-37.391975-15.161324-52.72209-1.846763z m0 0" fill="#FFFFFF" p-id="1235"></path></svg>

 bigScreen/src/main.js

New file
@@ -0,0 +1,58 @@
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./common/base.scss";

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import VCharts from "v-charts";
import echarts from "echarts";

import VideoPlayer from "vue-video-player";
import VueSocketIO from "vue-socket.io";
//import css
import "vue-beauty/package/style/vue-beauty.min.css";

//import components
import vueBeauty from "vue-beauty";

import '@/icons' // icon

import html2canvas from 'html2canvas';
import './utils/directives.js'
Vue.use(html2canvas);

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: "ws://wiibox.xicp.io:3030",
  })
);


Vue.use(vueBeauty);

Vue.use(VideoPlayer);

Vue.prototype.$echarts = echarts;

import { getJSON, post, patch, put, getDS, DSpost } from "./utils/request";

Vue.prototype.$getDS = getDS;
Vue.prototype.$post = post;
Vue.prototype.$DSpost = DSpost;
Vue.prototype.$getJSON = getJSON;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;

Vue.use(ElementUI);
Vue.use(VCharts);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

 bigScreen/src/router/index.js

New file
@@ -0,0 +1,51 @@
import Vue from "vue";
import VueRouter from "vue-router";
import homePage from "../views/homePage.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "homePage",
    component: homePage,
  },
  {
    path: "/collectionDetails",
    name: "collectionDetails",
    component: () => import('@/views/collectionDetails/index'),
  },
  {
    path: "/lookAllDetails",
    name: "lookAllDetails",
    component: () => import('@/views/collectionDetails/lookAllDetails'),
  },
  {
    path: "/monitoringPointManage",
    name: "monitoringPointManage",
    component: () => import('@/views/monitoringPointManage/index'),
  },
  {
    path: "/assessment",
    name: "assessment",
    component: () => import('@/views/assessment/index'),
  },
  {
    path: "/whiteList",
    name: "whiteList",
    component: () => import('@/views/whiteList/index'),
  },
  {
    path: "/recordSearch",
    name: "recordSearch",
    component: () => import('@/views/recordSearch/index'),
  },
];

const router = new VueRouter({
  // mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

 bigScreen/src/store/index.js

New file
@@ -0,0 +1,11 @@
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
});

 bigScreen/src/try.js

 bigScreen/src/utils/Geoutils.js

New file
@@ -0,0 +1,66 @@
export function isPointInCircle(point, circle = {}) {
  //检查类型是否正确
  if (!(point instanceof BMap.Point) || !(circle instanceof BMap.Circle)) {
    return false
  }

  //point与圆心距离小于圆形半径，则点在圆内，否则在圆外
  var c = circle.getCenter()
  var r = circle.getRadius()

  var dis = getDistance(point, c)
  if (dis <= r) {
    return true
  } else {
    return false
  }
}

function getDistance(point1, point2) {
  var EARTHRADIUS = 6370996.81
  //判断类型
  if (!(point1 instanceof BMap.Point) || !(point2 instanceof BMap.Point)) {
    return 0
  }

  point1.lng = _getLoop(point1.lng, -180, 180)
  point1.lat = _getRange(point1.lat, -74, 74)
  point2.lng = _getLoop(point2.lng, -180, 180)
  point2.lat = _getRange(point2.lat, -74, 74)

  var x1, x2, y1, y2
  x1 = degreeToRad(point1.lng)
  y1 = degreeToRad(point1.lat)
  x2 = degreeToRad(point2.lng)
  y2 = degreeToRad(point2.lat)

  return (
    EARTHRADIUS *
    Math.acos(
      Math.sin(y1) * Math.sin(y2) +
        Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)
    )
  )
}
function _getLoop(v, a, b) {
  while (v > b) {
    v -= b - a
  }
  while (v < a) {
    v += b - a
  }
  return v
}
function _getRange(v, a, b) {
  if (a != null) {
    v = Math.max(v, a)
  }
  if (b != null) {
    v = Math.min(v, b)
  }
  return v
}

function degreeToRad(degree) {
  return (Math.PI * degree) / 180
}

 bigScreen/src/utils/chartCustomer.js

New file
@@ -0,0 +1,684 @@
export let colors = [

  '#43FD87',

  '#F6EE55',

  '#1296DB',

  '#DC24F6',

  '#F64D3B',

  '#FF9F7F',

  '#FB7293',

  '#E062AE',

  '#E690D1',

  '#E7BCF3',

  '#9D96F5',

  '#8378EA',

  '#96BFFF'

]

export let resultColor = [

  { name: '白名单', color: '#14E75F' },

  { name: '江苏电台', color: '#8A8A8A' },

  { name: '浙江电台', color: '#8A8A8A' },

  { name: '误报', color: '#DC24F6' },

  { name: '非法电台', color: '#E4DA11' }

]

export let originalColor = [

  { id:1,name: '合法电台', color: '#43FD87' },

  { id:2,name: '区域非法', color: '#F6EE55' },

  { id:3,name: '时间非法', color: '#1296DB' },

  { id:4,name: '频率非法', color: '#DC24F6' },

  { id:5,name: '内容非法', color: '#F64D3B' }

]

let xAxisLine = {

  axisLabel: {

    interval: 0,

    formatter: function (value) {

      var ret = '' //拼接加\n返回的类目项

      var maxLength = 2 //每项显示文字个数

      var valLength = value.length //X轴类目项的文字个数

      var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数

      if (rowN > 1) {

        //如果类目项的文字大于3,

        for (var i = 0; i < rowN; i++) {

          var temp = '' //每次截取的字符串

          var start = i * maxLength //开始截取的位置

          var end = start + maxLength //结束截取的位置

          //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，

          temp = value.substring(start, end) + '\n'

          ret += temp //凭借最终的字符串

        }

        return ret

      } else {

        return value

      }

    }

  }

}

let tooltip = {

  axisPointer: {

    type: 'shadow',

    shadowStyle: {

      color: 'rgba(222,222,227,0.3)'

    }

  },

  textStyle: {

    color: '#5C5C5C'

  },

  padding: 10,

  backgroundColor: 'rgba(255,255,255,0.8)',

  extraCssText: 'box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);'

}

let yAxis = {

  minInterval: '1',

  axisLine: {

    show: false,

    lineStyle: {

      color: 'rgba(255,255,255,0.5)'

    }

  },

  axisLabel: {

    interval: 0,

    fontSize: 10

  },

  splitLine: {

    show: false

  }

}

let xAxis = {

  axisLine: {

    show: false,

    lineStyle: {

      color: 'rgba(255,255,255,0.5)'

    }

  },

  nameTextStyle: {

    fontSize: 10

  },

  axisLabel: {

    interval: 0,

    fontSize: 10

  }

}



let stepA = [

  {

    offset: 0,

    color: '#02F7CC'

  },

  {

    offset: 0.5,

    color: '#15BFCD'

  },

  {

    offset: 1,

    color: '#2987CF'

  }

]

let stepB = [

  {

    offset: 0,

    color: '#f27121'

  },

  {

    offset: 0.7,

    color: '#e94057'

  },

  {

    offset: 1,

    color: '#8a2387'

  }

]

let stepC = [

  {

    offset: 0,

    color: '#00bf8f'

  },

  {

    offset: 1,

    color: '#001510'

  }

]

let stepD = [

  {

    offset: 0,

    color: '#43c6ac'

  },

  {

    offset: 1,

    color: '#191654'

  }

]

let stepE = [

  {

    offset: 0,

    color: '#141e30'

  },

  {

    offset: 1,

    color: '#243b55'

  }

]

let stepF = [

  {

    offset: 0,

    color: '#6a9113'

  },

  {

    offset: 1,

    color: '#141517'

  }

]

let stepG = [

  {

    offset: 0,

    color: '#02F7CC'

  },

  {

    offset: 0.5,

    color: '#15BFCD'

  },

  {

    offset: 1,

    color: '#2987CF'

  }

]

export let chart_word = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 10,

    right: 10,

    bottom: 10

  },

}

export let lineExtend = {

  legend: {

    show: false

  },

  grid: {

    left: 10,

    top: 10,

    right: 20,

    bottom: 0

  },

  yAxis: {

    axisLine: {

      show: true,

      lineStyle: {

        color: 'rgba(255,255,255,0.5)'

      }

    },

    splitLine: {

      show: false

    }

  },

  xAxis: {

    axisLine: {

      show: true,

      lineStyle: {

        color: 'rgba(255,255,255,0.5)'

      }

    },

    nameTextStyle: {

      fontSize: 10

    },

    axisLabel: {

      interval: 0,

      fontSize: 10

    }

  },

  series: {

    smooth: false,

    lineStyle: {

      normal: {

        type: 'solid',

        color: 'rgb(39,140,206)'

      }

    },

    itemStyle: {

      normal: {

        color: '#3AA1FF'

      }

    },

    areaStyle: {

      normal: {

        color: {

          type: 'linear',

          x: 0,

          y: 0,

          x2: 0,

          y2: 1,

          colorStops: [

            {

              offset: 0,

              color: 'rgba(39,140,206,1)' // 0% 处的颜色

            },

            {

              offset: 0.7,

              color: 'rgba(18,198,205,0.7)' // 50% 处的颜色

            },

            {

              offset: 1,

              color: 'rgba(1,249,204,0.4)' // 100% 处的颜色

            }

          ],

          globalCoord: false // 缺省为 false

        }

      }

    }

  }

}



export let barG = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 20,

    right: 10,

    bottom: 0

  },

  yAxis: {

    minInterval: '1'

    //show: false

  },

  xAxis: {

    show: true,

    axisLine: {

      lineStyle: {

        //color: "#fff"

      }

    },

    nameTextStyle: {

      fontSize: 10

    },

    axisLabel: {

      interval: 0,

      fontSize: 10

    }

  },

  series: {

    barWidth: '60%',

    label: {

      normal: {

        show: true,

        position: 'top',

        color: '#FFF'

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10,

      color: {

        type: 'linear',

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: stepG,

        global: false // 缺省为 false

      }

    }

  }

}



export let chart_a = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 10,

    right: 10,

    bottom: 40

  },

  yAxis: yAxis,

  xAxis: {

    show: true,

    axisLine: {

      lineStyle: {

        color: "#fff"

      }

    },

    nameTextStyle: {

      fontSize: 8

    },

    axisLabel: {

      rotate:45,

      interval: 0,

      fontSize: 8

    }

  },

  series: {

    barWidth: '60%',

    label: {

      normal: {

        show: true,

        position: 'top',

        color: '#FFF'

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10,

      color: {

        type: 'linear',

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: stepG,

        global: false // 缺省为 false

      }

    }

  }

}



export let chart_b = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 10,

    right: 10,

    bottom: 40

  },

  yAxis: yAxis,

  xAxis: {

    show: true,

    axisLine: {

      lineStyle: {

        color: "#fff"

      }

    },

    nameTextStyle: {

      fontSize: 8

    },

    axisLabel: {

      rotate:45,

      interval: 0,

      fontSize: 8

    }

  },

  series: {

    barWidth: '60%',

    label: {

      normal: {

        show: true,

        position: 'top',

        color: '#FFF'

      }

    },

    areaStyle:{},

    itemStyle: {

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10,

      color: {

        type: 'linear',

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: stepB,

        global: false // 缺省为 false

      }

    }

  }

}



export let HeatMap = {

  tooltip: tooltip,

  grid: {

    left: 4,

    top: 0,

    right: 10,

    bottom: 0

  },

  yAxis: {

    minInterval: '1',

    axisLine: {

      show: false,

      lineStyle: {

        //color: 'rgba(255,255,255,0.5)'

      }

    },

    axisLabel: {

      interval: 0,

      fontSize: 8

    },

    splitLine: {

      show: false

    }

  },

  xAxis: {

    position:'top',

    axisLine: {

      show: false,

      lineStyle: {

        //color: 'rgba(255,255,255,0.5)'

      }

    },

    nameTextStyle: {

      fontSize: 8

    },

    axisLabel: {

      show:false,

      interval: 0,

      formatter: function (value) {

        return value.substring(0, 3) + '\n' + value.substring(3)

      }

    }

  },

  series: {

    label: {

      normal: {

        show: true,

        //color: '#FFF',

        fontSize: 10

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 2

    }

  }

}



export let barC = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 20,

    right: 20,

    bottom: 0

  },

  yAxis: yAxis,

  xAxis: xAxis,

  series: {

    barWidth: '60%',

    label: {

      normal: {

        show: true,

        position: 'top',

        color: '#FFF'

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10,

      color: {

        type: 'linear',

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: stepC,

        global: false // 缺省为 false

      }

    }

  }

}



export let barD = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 20,

    right: 20,

    bottom: 0

  },

  yAxis: yAxis,

  xAxis: xAxis,

  series: {

    barWidth: '60%',

    label: {

      normal: {

        show: true,

        position: 'top',

        color: '#FFF'

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10,

      color: {

        type: 'linear',

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: stepD,

        global: false // 缺省为 false

      }

    }

  }

}



export let barE = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 20,

    right: 20,

    bottom: 0

  },

  yAxis: yAxis,

  xAxis: xAxis,

  series: {

    barWidth: '60%',

    label: {

      normal: {

        show: true,

        position: 'top',

        color: '#FFF'

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10,

      color: {

        type: 'linear',

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: stepE,

        global: false // 缺省为 false

      }

    }

  }

}



export let barF = {

  tooltip: tooltip,

  grid: {

    left: 10,

    top: 20,

    right: 20,

    bottom: 0

  },

  yAxis: yAxis,

  xAxis: xAxis,

  series: {

    barWidth: '60%',

    large: true,

    label: {

      normal: {

        show: true,

        position: 'top',

        color: '#FFF'

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10,

      color: {

        type: 'linear',

        x: 0,

        y: 0,

        x2: 0,

        y2: 1,

        colorStops: stepF,

        global: false // 缺省为 false

      }

    }

  }

}



export let barH = {

  tooltip: {

    axisPointer: {

      type: 'shadow',

      shadowStyle: {

        color: 'rgba(222,222,227,0.3)'

      }

    },

    textStyle: {

      color: '#5C5C5C'

    },

    padding: 10,

    backgroundColor: 'rgba(255,255,255,0.8)',

    extraCssText: 'box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);'

  },

  grid: {

    left: 20,

    top: 40,

    right: 20,

    bottom: 40

  },

  yAxis: {

    minInterval: '1'

    //show: false

  },

  xAxis: {

    show: true,

    axisLine: {

      lineStyle: {

        //color: "#fff"

      }

    },

    nameTextStyle: {

      fontSize: 10

    },

    axisLabel: {

      interval: 0,

      fontSize: 10

    }

  },

  series: {

    barGap: '100%',

    label: {

      normal: {

        show: true,

        position: 'top'

        //color: '#FFF'

      }

    },

    itemStyle: {

      barBorderRadius: [5, 5, 0, 0],

      shadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowBlur: 10

    }

  }

}


 bigScreen/src/utils/common_map.json

New file
@@ -0,0 +1,1400 @@
[{
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#091220ff"
    }
}, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#113549ff"
    }
}, {
    "featureType": "green",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#0e1b30ff"
    }
}, {
    "featureType": "building",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.topfill",
    "stylers": {
        "color": "#113549ff"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.sidefill",
    "stylers": {
        "color": "#143e56ff"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#dadada00"
    }
}, {
    "featureType": "subwaystation",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "color": "#113549B2"
    }
}, {
    "featureType": "education",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "color": "#12223dff"
    }
}, {
    "featureType": "medical",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "color": "#12223dff"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "color": "#12223dff"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 4
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#fed66900"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 2
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffeebb00"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "local",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": 1
    }
}, {
    "featureType": "local",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "local",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "local",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "local",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#979c9aff"
    }
}, {
    "featureType": "local",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "weight": 1
    }
}, {
    "featureType": "subway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#d8d8d8ff"
    }
}, {
    "featureType": "subway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "subway",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "subway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#979c9aff"
    }
}, {
    "featureType": "subway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "continent",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "city",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "city",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "town",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "town",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "town",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#454d50ff"
    }
}, {
    "featureType": "town",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "road",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "district",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "manmade",
    "elementType": "geometry",
    "stylers": {
        "color": "#12223dff",
        "visibility": "off"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "entertainment",
    "elementType": "geometry",
    "stylers": {
        "color": "#12223dff",
        "visibility": "off"
    }
}, {
    "featureType": "shopping",
    "elementType": "geometry",
    "stylers": {
        "color": "#12223dff",
        "visibility": "off"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "6"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "7"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "8"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "9"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "6"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "7"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "9"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "6"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "7"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,9",
        "level": "9"
    }
}, {
    "featureType": "subwaylabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "subwaylabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "tertiarywaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "tertiarywaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "provincialwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "provincialwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "highwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "highwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "village",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "district",
    "elementType": "labels.text",
    "stylers": {
        "fontsize": 20
    }
}, {
    "featureType": "district",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "district",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "country",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "country",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff10"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text",
    "stylers": {
        "fontsize": 20
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels.text",
    "stylers": {
        "fontsize": 20
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels.text",
    "stylers": {
        "fontsize": 20
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels.text",
    "stylers": {
        "fontsize": 20
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "estate",
    "elementType": "geometry",
    "stylers": {
        "color": "#12223dff",
        "visibility": "off"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "scenicspotsway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "scenicspotsway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "universityway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "universityway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "vacationway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "vacationway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#12223dff"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "educationlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "educationlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "educationlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "educationlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "transportation",
    "elementType": "geometry",
    "stylers": {
        "color": "#113549ff",
        "visibility": "off"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "medicallabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "medicallabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "medicallabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "entertainmentlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "entertainmentlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "entertainmentlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "estatelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "estatelabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "estatelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "businesstowerlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "businesstowerlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "businesstowerlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "governmentlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "governmentlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "governmentlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "carservicelabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "carservicelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "carservicelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "otherlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "otherlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "otherlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "manmade",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "manmade",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "transportation",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "transportation",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "education",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "education",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "medical",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "medical",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#2dc4bbff"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "education",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "medical",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "transportation",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "playground",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "parkinglot",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "manmade",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "estatelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "businesstowerlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "background",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on"
    }
}]

 bigScreen/src/utils/custom_map_config.json

New file
@@ -0,0 +1,449 @@
[
  {
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#091220ff"
    }
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#113549ff"
    }
  },
  {
    "featureType": "green",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#0e1b30ff"
    }
  },
  {
    "featureType": "building",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "subwaystation",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#113549B2"
    }
  },
  {
    "featureType": "education",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "color": "#12223dff"
    }
  },
  {
    "featureType": "medical",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#12223dff"
    }
  },
  {
    "featureType": "scenicspots",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#12223dff"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "weight": "4"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#fed66900"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#12223dff"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "arterial",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "weight": "2"
    }
  },
  {
    "featureType": "local",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "weight": "1"
    }
  },
  {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "weight": "1"
    }
  },
  {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "weight": "1"
    }
  },
  {
    "featureType": "continent",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "continent",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "continent",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  },
  {
    "featureType": "continent",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  },
  {
    "featureType": "city",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "city",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "city",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  },
  {
    "featureType": "city",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  },
  {
    "featureType": "town",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  },
  {
    "featureType": "poilabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "districtlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  },
  {
    "featureType": "district",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "6",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "7",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "8",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "9",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "10",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "level": "6",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "level": "7",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "level": "8",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "level": "9",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "level": "10",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "stylers": {
      "level": "6",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "stylers": {
      "level": "7",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "stylers": {
      "level": "8",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "stylers": {
      "level": "9",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "stylers": {
      "level": "10",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "6",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "7",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "8",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "9",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  },
  {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "level": "10",
      "curZoomRegionId": "0",
      "curZoomRegion": "6-10"
    }
  }
]

 bigScreen/src/utils/custom_map_light.json

New file
@@ -0,0 +1,1049 @@
[{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#ccd6d7ff"
    }
}, {
    "featureType": "green",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#dee5e5ff"
    }
}, {
    "featureType": "building",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#d1dbdbff"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#aab6b6ff"
    }
}, {
    "featureType": "subwaystation",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "color": "#888fa0ff"
    }
}, {
    "featureType": "education",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#e1e7e7ff"
    }
}, {
    "featureType": "medical",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#d1dbdbff"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#d1dbdbff"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": "4"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#cacfcfff"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": "2"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#fbfffeff"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#cacfcfff"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "local",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "weight": "1"
    }
}, {
    "featureType": "local",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#fbfffeff"
    }
}, {
    "featureType": "local",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#cacfcfff"
    }
}, {
    "featureType": "local",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "local",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "local",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "weight": "1"
    }
}, {
    "featureType": "railway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#9494941a"
    }
}, {
    "featureType": "railway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff1a"
    }
}, {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "weight": "1"
    }
}, {
    "featureType": "subway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#f36c0cff"
    }
}, {
    "featureType": "subway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#f36c0cff"
    }
}, {
    "featureType": "subway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "subway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#979c9aff"
    }
}, {
    "featureType": "subway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "continent",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#333333ff"
    }
}, {
    "featureType": "continent",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "city",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "city",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#454d50ff"
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "town",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "town",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "town",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#454d50ff"
    }
}, {
    "featureType": "town",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "road",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#fbfffeff"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#888fa0ff"
    }
}, {
    "featureType": "transportation",
    "elementType": "geometry",
    "stylers": {
        "color": "#d1dbdbff"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "carservicelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "otherlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "village",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "district",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
        "color": "#edf3f3ff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#cacfcfff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#cacfcfff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#cacfcfff"
    }
}, {
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#cacfcfff"
    }
}, {
    "featureType": "subwaylabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "subwaylabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "tertiarywaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "tertiarywaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "provincialwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "provincialwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "highwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "highwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#fbfffeff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "provincialway",
    "stylers": {
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "8-8"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "8-8"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "8-8"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "6",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "7",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "level": "8",
        "curZoomRegionId": "0",
        "curZoomRegion": "6-8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#fbfffeff"
    }
}, {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#8f5a33ff"
    }
}, {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "country",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#8f5a33ff"
    }
}, {
    "featureType": "country",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "country",
    "elementType": "labels.text",
    "stylers": {
        "fontsize": "28"
    }
}, {
    "featureType": "manmade",
    "elementType": "geometry",
    "stylers": {
        "color": "#dfe7e7ff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#fbfffeff"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#fbfffeff"
    }
}, {
    "featureType": "manmade",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "manmade",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "scenicspots",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "educationlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "educationlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "medicallabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "medicallabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "carservicelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "entertainment",
    "elementType": "geometry",
    "stylers": {
        "color": "#d1dbdbff"
    }
}, {
    "featureType": "estate",
    "elementType": "geometry",
    "stylers": {
        "color": "#d1dbdbff"
    }
}, {
    "featureType": "shopping",
    "elementType": "geometry",
    "stylers": {
        "color": "#d1dbdbff"
    }
}, {
    "featureType": "education",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "education",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "medical",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "medical",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "transportation",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#999999ff"
    }
}, {
    "featureType": "transportation",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "district",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#21212100"
    }
}, {
    "featureType": "village",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "village",
    "elementType": "labels.text.fill",
    "stylers": {
        "weight": "40"
    }
}, {
    "featureType": "subwaylabel",
    "elementType": "labels.text",
    "stylers": {
        "fontsize": "16"
    }
}, {
    "featureType": "district",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#212121ff",
        "weight": "10"
    }
}]

 bigScreen/src/utils/custom_map_visiblity.js

New file
@@ -0,0 +1,1409 @@
let styleJson = [
  {
    featureType: 'land',
    elementType: 'geometry',
    stylers: {
      color: '#1d1c24ff'
    }
  },
  {
    featureType: 'manmade',
    elementType: 'geometry',
    stylers: {
      color: '#242f3eff'
    }
  },
  {
    featureType: 'water',
    elementType: 'geometry',
    stylers: {
      color: '#5d718dff'
    }
  },
  {
    featureType: 'road',
    elementType: 'geometry.fill',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#2a2830ff'
    }
  },
  {
    featureType: 'districtlabel',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#596c88ff',
      weight: '10'
    }
  },
  {
    featureType: 'districtlabel',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#596c8800'
    }
  },
  {
    featureType: 'poilabel',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#576a87ff',
      weight: '10'
    }
  },
  {
    featureType: 'poilabel',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#576a8700',
      weight: '0.8'
    }
  },
  {
    featureType: 'subway',
    elementType: 'geometry',
    stylers: {
      visibility: 'on',
        weight: "1"

    }
  },
  {
    featureType: 'railway',
    elementType: 'geometry',
    stylers: {
      visibility: 'on'
    }
  },
  {
    featureType: 'poilabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'subwaylabel',
    elementType: 'labels',
    stylers: {
      visibility: 'on'
    }
  },
  {
    featureType: 'subwaylabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'on'
    }
  },
  {
    featureType: 'tertiarywaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'tertiarywaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'provincialwaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'provincialwaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'nationalwaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'nationalwaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'highwaysign',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'highwaysign',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'green',
    elementType: 'geometry',
    stylers: {
      color: '#080405ff'
    }
  },
  {
    featureType: 'nationalwaysign',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#d0021bff'
    }
  },
  {
    featureType: 'nationalwaysign',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#ffffffff'
    }
  },
  {
    featureType: 'city',
    elementType: 'labels',
    stylers: {
      visibility: 'on'
    }
  },
  {
    featureType: 'city',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'city',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#576a87ff'
    }
  },
  {
    featureType: 'city',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#576a8700'
    }
  },
  {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#435673ff',
      weight: '10'
    }
  },
  {
    featureType: 'water',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#242f3eff',
      weight: '0.4'
    }
  },
  {
    featureType: 'local',
    elementType: 'geometry.fill',
    stylers: {
      color: '#38414eff'
    }
  },
  {
    featureType: 'local',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#ffffff00'
    }
  },
  {
    featureType: 'fourlevelway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#38414eff'
    }
  },
  {
    featureType: 'fourlevelway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#ffffff00'
    }
  },
  {
    featureType: 'tertiaryway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#38414eff'
    }
  },
  {
    featureType: 'tertiaryway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#ffffff00'
    }
  },
  {
    featureType: 'tertiaryway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#759879ff'
    }
  },
  {
    featureType: 'fourlevelway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#759879ff'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#546884ff',
      weight: '10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'highway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'tertiaryway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#1a2e1cff'
    }
  },
  {
    featureType: 'fourlevelway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#1a2e1cff'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#546884ff'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#546884ff',
      weight: '0.4'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#546884ff',
      weight: '10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry.fill',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#2d2c34ff'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'geometry.fill',
    stylers: {
      color: '#9e7d60ff'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#554631fa'
    }
  },
  {
    featureType: 'medicallabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'medicallabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'entertainmentlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'entertainmentlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'estatelabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'estatelabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'businesstowerlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'businesstowerlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'companylabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'companylabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'governmentlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'governmentlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'restaurantlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'restaurantlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'hotellabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'hotellabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'shoppinglabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'shoppinglabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'lifeservicelabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'lifeservicelabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'carservicelabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'carservicelabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'financelabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'financelabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'otherlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'otherlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'on'
    }
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#576a87ff',
      weight: '10'
    }
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#576a8700',
      weight: '0.8'
    }
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'highway',
    stylers: {
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    stylers: {
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    stylers: {
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    stylers: {
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    stylers: {
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    stylers: {
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    stylers: {
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    stylers: {
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    stylers: {
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    stylers: {
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'provincialway',
    stylers: {
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '8-9'
    }
  },
  {
    featureType: 'provincialway',
    stylers: {
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '8-9'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '8-9'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '8-9'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '8-9'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '8-9'
    }
  },
  {
    featureType: 'cityhighway',
    stylers: {
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    stylers: {
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    stylers: {
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    stylers: {
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    stylers: {
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '6',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '7',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '8',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '6-10'
    }
  },
  {
    featureType: 'arterial',
    stylers: {
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '9-10'
    }
  },
  {
    featureType: 'arterial',
    stylers: {
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '9-10'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '9-10'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'geometry',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '9-10'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '9',
      curZoomRegionId: '0',
      curZoomRegion: '9-10'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'labels',
    stylers: {
      visibility: 'off',
      level: '10',
      curZoomRegionId: '0',
      curZoomRegion: '9-10'
    }
  },
  {
    featureType: 'building',
    elementType: 'geometry.fill',
    stylers: {
      color: '#2a3341ff'
    }
  },
  {
    featureType: 'building',
    elementType: 'geometry.stroke',
    stylers: {
      color: '#1a212eff'
    }
  },
  {
    featureType: 'road',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#546884ff',
      weight: '10'
    }
  },
  {
    featureType: 'road',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#546884ff',
      weight: '0.4'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#546884ff',
      weight: '10'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#546884ff',
      weight: '10'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#546884ff'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#546884ff',
      weight: '0.2'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#546884ff',
      weight: '0.2'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#546884ff',
      weight: '0.4'
    }
  },
  {
    featureType: 'local',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'manmade',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#d69563ff'
    }
  },
  {
    featureType: 'manmade',
    elementType: 'labels.text.stroke',
    stylers: {
      color: '#17263cff'
    }
  },
  {
    featureType: 'subwaystation',
    elementType: 'geometry',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'transportationlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'transportationlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'estate',
    elementType: 'geometry',
    stylers: {
      color: '#2a3341ff'
    }
  },
  {
    featureType: 'water',
    elementType: 'labels.text',
    stylers: {
      fontsize: '13'
    }
  },
  {
    featureType: 'road',
    elementType: 'labels.text',
    stylers: {
      fontsize: '13'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels.text',
    stylers: {
      fontsize: '13'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'labels.text',
    stylers: {
      fontsize: '13'
    }
  },
  {
    featureType: 'nationalway',
    elementType: 'geometry',
    stylers: {
      weight: '1.5'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'labels.text',
    stylers: {
      fontsize: '13'
    }
  },
  {
    featureType: 'provincialway',
    elementType: 'geometry',
    stylers: {
      weight: '1.6'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'geometry',
    stylers: {
      weight: '1.4'
    }
  },
  {
    featureType: 'cityhighway',
    elementType: 'labels.text',
    stylers: {
      fontsize: '13'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'labels.text',
    stylers: {
      fontsize: '13'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'geometry',
    stylers: {
      weight: '2.5'
    }
  },
  {
    featureType: 'districtlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'on'
    }
  },
  {
    featureType: 'districtlabel',
    elementType: 'labels.text',
    stylers: {
      fontsize: '30'
    }
  },
  {
    featureType: 'airportlabel',
    elementType: 'labels.text',
    stylers: {
      fontsize: '25'
    }
  },
  {
    featureType: 'poilabel',
    elementType: 'labels.text',
    stylers: {
      fontsize: '25'
    }
  },
  {
    featureType: 'scenicspotslabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'scenicspotslabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'educationlabel',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'educationlabel',
    elementType: 'labels.icon',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'continent',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  }
]

export default styleJson

 bigScreen/src/utils/directives.js

New file
@@ -0,0 +1,179 @@
import Vue from "vue";

// 自定义元素实现弹框拖拽[重点]
Vue.directive("draw", {
  inserted: function (el, binding, vNode) {
    el.setAttribute("style", "position: fixed; z-index: 9999");
  },

  bind: function (el, bindding, vNode) {
    el.setAttribute("draggable", true);

    let left, top, width, height;

    el._dragstart = function (event) {
      event.stopPropagation();

      left = event.clientX - el.offsetLeft;

      top = event.clientY - el.offsetTop;

      width = el.offsetWidth;

      height = el.offsetHeight;
    };

    el._checkPosition = function () {
      // 防止被拖出边界

      const width = el.offsetWidth;

      const height = el.offsetHeight;

      let left = Math.min(el.offsetLeft, document.body.clientWidth - width);

      left = Math.max(0, left);

      let top = Math.min(el.offsetTop, document.body.clientHeight - height);

      top = Math.max(0, top);

      el.style.left = left + "px";

      el.style.top = top + "px";

      el.style.width = width + "px";

      el.style.height = height + "px";
    };

    el._dragEnd = function (event) {
      event.stopPropagation();

      left = event.clientX - left;

      top = event.clientY - top;

      el.style.left = left + "px";

      el.style.top = top + "px";

      el.style.width = width + "px";

      el.style.height = height + "px";

      el._checkPosition();
    };

    el._documentAllowDraop = function (event) {
      event.preventDefault();
    };

    document.body.addEventListener("dragover", el._documentAllowDraop);

    el.addEventListener("dragstart", el._dragstart);

    el.addEventListener("dragend", el._dragEnd);

    window.addEventListener("resize", el._checkPosition);
  },

  unbind: function (el, bindding, vNode) {
    document.body.removeEventListener("dragover", el._documentAllowDraop);

    el.removeEventListener("dragstart", el._dragstart);

    el.removeEventListener("dragend", el._dragEnd);

    window.removeEventListener("resize", el._checkPosition);

    delete el._documentAllowDraop;

    delete el._dragstart;

    delete el._dragEnd;

    delete el._checkPosition;
  },
});

// v-dialogDrag: 弹窗拖拽

Vue.directive("dialogDrag", {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector(".el-dialog__header");

    const dragDom = el.querySelector(".el-dialog");

    dialogHeaderEl.style.cursor = "move"; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);

    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离

      const disX = e.clientX - dialogHeaderEl.offsetLeft;

      const disY = e.clientY - dialogHeaderEl.offsetTop; // 获取到的值带px 正则匹配替换

      let styL, styT; // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px

      if (sty.left.includes("%")) {
        styL =
          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);

        styT =
          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/\px/g, "");

        styT = +sty.top.replace(/\px/g, "");
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离

        const l = e.clientX - disX;

        const t = e.clientY - disY; // 移动当前元素

        dragDom.style.left = `${l + styL}px`;

        dragDom.style.top = `${t + styT}px`; // 将此时的位置传出去 // binding.value({x:e.pageX,y:e.pageY})
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});

// v-dialogDragWidth: 弹窗宽度拖大 拖小

Vue.directive("dialogDragWidth", {
  bind(el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector(".el-dialog");

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离

      const disX = e.clientX - el.offsetLeft;

      document.onmousemove = function (e) {
        e.preventDefault(); // 移动时禁用默认事件 // 通过事件委托，计算移动的距离

        const l = e.clientX - disX;

        dragDom.style.width = `${l}px`;
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;

        document.onmouseup = null;
      };
    };
  },
});

 bigScreen/src/utils/district_boundary.js

New file
Diff too large

 bigScreen/src/utils/district_extent.js

New file
@@ -0,0 +1,77 @@
var district_extent_jinshan = [

  120.984811000327, 30.6777900000085, 121.474303000383, 30.9532170002644,

];

var district_extent_chongming = [

  121.113839999716, 31.2574709997868, 122.242919000312, 31.8746250000437,

];

var district_extent_pudong = [

  121.452893999658, 30.7795099999865, 122.008292000176, 31.3968069996434,

];

var district_extent_fengxian = [

  121.346588000436, 30.7585639999287, 121.789478999956, 31.0170559998346,

];

var district_extent_jiading = [

  121.102127000061, 31.2290870002649, 121.376248000345, 31.4986410003819,

];

var district_extent_putuo = [

  121.321526000325, 31.220134000184, 121.446877000074, 31.3045719999978,

];

var district_extent_baoshan = [

  121.29542600001,

  31.26706499975,

  ,

  121.52113499988,

  31.513867000162,

];

var district_extent_huangpu = [

  121.452183000145, 31.1898569997009, 121.505510999733, 31.2462159996687,

];

var district_extent_yangpu = [

  121.48091699962, 31.2490109999578, 121.565293000172, 31.3488450001967,

];

var district_extent_songjiang = [

  121.020714000351, 30.8966460004127, 121.367404999941, 31.1649020000273,

];

var district_extent_hongkou = [

  121.455481000248, 31.2438830000005, 121.513281000118, 31.3179269998312,

];

var district_extent_changning = [

  121.327256000164, 31.1797080002241, 121.434851000373, 31.2458679998084,

];

var district_extent_jingan = [

  121.413996000015, 31.2162829997607, 121.47849600039, 31.3232820003641,

];

var district_extent_minhang = [

  121.235505000355, 30.9780070004228, 121.57123900008, 31.2616370003473,

];

var district_extent_xuhui = [

  121.386863999774, 31.1027190003816, 121.471473000279, 31.2221010000612,

];

var district_extent_qingpu = [

  120.852619999913, 30.9413539999871, 121.319304000379, 31.2938959996007,

];

var district_extent_shanghai = [

  120.852619999913, 30.6777900000085, 122.242919000312, 31.8746250000437,

];



let district_extent = new Map();

district_extent.set(310101, district_extent_huangpu);

district_extent.set(310104, district_extent_xuhui);

district_extent.set(310105, district_extent_changning);

district_extent.set(310106, district_extent_jingan);

district_extent.set(310107, district_extent_putuo);

district_extent.set(310109, district_extent_hongkou);

district_extent.set(310110, district_extent_yangpu);

district_extent.set(310112, district_extent_minhang);

district_extent.set(310113, district_extent_baoshan);

district_extent.set(310114, district_extent_jiading);

district_extent.set(310115, district_extent_pudong);

district_extent.set(310116, district_extent_jinshan);

district_extent.set(310117, district_extent_songjiang);

district_extent.set(310118, district_extent_qingpu);

district_extent.set(310120, district_extent_fengxian);

district_extent.set(310151, district_extent_chongming);

district_extent.set(310000, district_extent_shanghai);





export default district_extent_shanghai

 bigScreen/src/utils/filterOptions.js

New file
@@ -0,0 +1,249 @@
/**

 * 查询字段名:{

 * type:组件查询类型,

 * sql_type:数据库查询类型,

 * meltiple:是否多选(select时生效),

 * width:组件宽度,

 * placeholder:placeholder,

 * options:选项(select时生效)

 * default:默认选项

 * text:label文字

 * }

 */



let filterOptions = {

  Device: {

    address: {

      type: "input",

      text: "地址",

      multiple: false,

      sql_type: "8",

      width: "140px",

      placeholder: "请输入地址"

    },

    log_id: {

      type: 'input',

      text: '逻辑编号',

      multiple: false,

      sql_type: '8',

      width: '140px',

      placeholder: '请输入逻辑编号'

    },

    phy_id: {

      type: 'input',

      text: '物理编号',

      multiple: false,

      sql_type: '8',

      width: '140px',

      placeholder: '请输入物理编号'

    }

  },

  Cycle: {

    detail: {

      type: "input",

      text: "任务说明",

      multiple: false,

      sql_type: "8",

      width: "140px",

      placeholder: "请输入说明"

    }

  },

  TaskRecord: {

    task_type: {

      type: "select",

      text: "任务类型",

      width: "150px",

      sql_type: "1",

      placeholder: "请选择",

      options: [

        { name: "周期任务", id: "周期任务" },

        { name: "即时任务", id: "即时任务" }

      ]

    },

    task_id: {

      type: "input",

      text: "任务号",

      width: "150px",

      sql_type: "8",

      placeholder: "请输入任务号"

    },

    start_time: {

      sql_type: "4",

      type: "daterange",

      text: "执行时间",

      width: "300px"

    }

  },

  RadioRecord: {

    result: {

      type: "select",

      sql_type: "1",

      text: "电台类型",

      width: "120px",

      placeholder: "请选择",

      options: [{ name: '合法电台', id: '1' }, { name: '区域非法', id: '2' }, { name: '时间非法', id: '3' }, { name: '频率非法', id: '4' }, { name: '内容非法', id: '5' }]

    },

    frequency: {

      type: "input",

      text: "频率",

      sql_type: "8",

      width: "120px",

      placeholder: "请输入频率"

    },

    upload_day: {

      type: "daterange",

      text: "上传时间",

      width: "300px",

      sql_type: "4"

    }

  },

  WhiteList: {

    name: {

      type: "input",

      sql_type: "8",

      text: "电台名称",

      width: "170px",

      placeholder: "请输入电台名称",

      options: null

    }

  },

  Keyword: {

    name: {

      type: "input",

      sql_type: "8",

      text: "关键词",

      width: "170px",

      placeholder: "请输入关键词",

      options: null

    }

  },

  roleMembers: {

    role_key: {

      type: "select",

      sql_type: "1",

      text: "用户权限",

      width: "170px",

      placeholder: "请选择",

      options: null

    },

    user_name: {

      type: "input",

      sql_type: "8",

      text: "用户名称",

      width: "170px",

      placeholder: "请输入用户名称"

    }

  },

  systemLog: {

    log_type: {

      type: "select",

      sql_type: "1",

      text: "日志类型",

      width: "150px",

      placeholder: "请选择",

      options: [

        { name: "响应日志", id: "响应日志" },

        { name: "错误日志", id: "错误日志" },

        { name: "登入登出", id: "登入登出" }

      ]

    },

    create_day: {

      type: "date",

      sql_type: "1",

      text: "记录日期",

      width: "150px",

      placeholder: "请选择日期"

    },

    response_status: {

      type: "select",

      sql_type: "1",

      text: "响应状态",

      width: "150px",

      options: [

        { name: "200", id: "200" },

        { name: "201", id: "201" },

        { name: "400", id: "400" },

        { name: "403", id: "403" },

        { name: "404", id: "404" },

        { name: "500", id: "500" },

        { name: "503", id: "503" },

        { name: "505", id: "505" }

      ]

    },

    logDes: {

      type: "input",

      sql_type: "8",

      text: "描述查询",

      width: "150px",

      placeholder: "请描述关键词"

    }

  },

  version: {

    version_name: {

      type: "input",

      sql_type: "8",

      text: "版本号",

      width: "170px",

      placeholder: "请输入版本号",

      options: null

    }

  },

  InforRelease: {

    type: {

      type: "radioGroup",

      sql_type: "1",

      width: "200px",

      placeholder: "请选择",

      options: [

        { name: "通知短信", id: "SMS" },

        { name: "邮件通知", id: "EMAIL" }

      ]

    },

    send_day: {

      type: "date",

      sql_type: "1",

      text: '发送日期',

      width: "150px",

      placeholder: "请选择"

    }

  },

  ReportExport: {

    user_name: {

      type: "input",

      sql_type: "8",

      text: "姓名",

      width: "170px",

      placeholder: "请输入用户名",

      options: null

    }

  },

  frequencyAddress: {

    frequency: {

      type: "input",

      sql_type: "8",

      text: "广播频率",

      width: "170px",

      placeholder: "请输入频率"

    }

  },

  manageDay: {

    send_day: {

      type: "date",

      sql_type: "1",

      text: '发送日期',

      width: "150px",

      placeholder: "请选择"

    }

  },

  dictionary: {

    prarm_id: {

      type: "input",

      sql_type: "8",

      text: '参数ID',

      width: "150px",

      placeholder: "请选择"

    }

  }

};



export default filterOptions;


 bigScreen/src/utils/kriging.js

New file
@@ -0,0 +1,580 @@
// Extend the Array class
Array.prototype.max = function () {
  return Math.max.apply(null, this);
};
Array.prototype.min = function () {
  return Math.min.apply(null, this);
};
Array.prototype.mean = function () {
  var i, sum;
  for (i = 0, sum = 0; i < this.length; i++) sum += this[i];
  return sum / this.length;
};
Array.prototype.pip = function (x, y) {
  var i,
    j,
    c = false;
  for (i = 0, j = this.length - 1; i < this.length; j = i++) {
    if (
      this[i][1] > y != this[j][1] > y &&
      x <
        ((this[j][0] - this[i][0]) * (y - this[i][1])) /
          (this[j][1] - this[i][1]) +
          this[i][0]
    ) {
      c = !c;
    }
  }
  return c;
};

// var kriging_default_params = {
//   krigingModel: "exponential", //model还可选'exponential','gaussian','spherical'
//   krigingSigma2: 0,
//   krigingAlpha: 226,
//   canvasAlpha: 0.9, //canvas图层透明度
//   // colors: ["#e8f8f5", "#d1f2eb", "#a3e4d7", "#76d7c4", "#48c9b0", "#1abc9c"],
//   colors: [
//     "#f1c40f",
//     "#f4d03f",
//     "#f7dc6f",
//     "#f9e79f",
//     "#fcf3cf",
//     "#fef9e7",
//     "#eafaf1",
//     "#d5f5e3",
//     "#abebc6",
//     "#82e0aa",
//     "#58d68d",
//     "#2ecc71",
//     "#28b463",
//     "#239b56",
//     "#1d8348",
//     "#186a3b",
//     "#145a32",
//     "#196f3d",
//     "#1e8449",
//   ],
// };

var kriging = (function () {
  var kriging = {};
  var createArrayWithValues = function (value, n) {
    var array = [];
    for (var i = 0; i < n; i++) {
      array.push(value);
    }
    return array;
  };
  // Matrix algebra
  kriging_matrix_diag = function (c, n) {
    var Z = createArrayWithValues(0, n * n);
    for (i = 0; i < n; i++) Z[i * n + i] = c;
    return Z;
  };
  kriging_matrix_transpose = function (X, n, m) {
    var i,
      j,
      Z = Array(m * n);
    for (i = 0; i < n; i++) for (j = 0; j < m; j++) Z[j * n + i] = X[i * m + j];
    return Z;
  };
  kriging_matrix_scale = function (X, c, n, m) {
    var i, j;
    for (i = 0; i < n; i++) for (j = 0; j < m; j++) X[i * m + j] *= c;
  };
  kriging_matrix_add = function (X, Y, n, m) {
    var i,
      j,
      Z = Array(n * m);
    for (i = 0; i < n; i++)
      for (j = 0; j < m; j++) Z[i * m + j] = X[i * m + j] + Y[i * m + j];
    return Z;
  };
  // Naive matrix multiplication
  kriging_matrix_multiply = function (X, Y, n, m, p) {
    var i,
      j,
      k,
      Z = Array(n * p);
    for (i = 0; i < n; i++) {
      for (j = 0; j < p; j++) {
        Z[i * p + j] = 0;
        for (k = 0; k < m; k++) Z[i * p + j] += X[i * m + k] * Y[k * p + j];
      }
    }
    return Z;
  };
  // Cholesky decomposition
  kriging_matrix_chol = function (X, n) {
    var i,
      j,
      k,
      sum,
      p = Array(n);
    for (i = 0; i < n; i++) p[i] = X[i * n + i];
    for (i = 0; i < n; i++) {
      for (j = 0; j < i; j++) p[i] -= X[i * n + j] * X[i * n + j];
      if (p[i] <= 0) return false;
      p[i] = Math.sqrt(p[i]);
      for (j = i + 1; j < n; j++) {
        for (k = 0; k < i; k++) X[j * n + i] -= X[j * n + k] * X[i * n + k];
        X[j * n + i] /= p[i];
      }
    }
    for (i = 0; i < n; i++) X[i * n + i] = p[i];
    return true;
  };
  // Inversion of cholesky decomposition
  kriging_matrix_chol2inv = function (X, n) {
    var i, j, k, sum;
    for (i = 0; i < n; i++) {
      X[i * n + i] = 1 / X[i * n + i];
      for (j = i + 1; j < n; j++) {
        sum = 0;
        for (k = i; k < j; k++) sum -= X[j * n + k] * X[k * n + i];
        X[j * n + i] = sum / X[j * n + j];
      }
    }
    for (i = 0; i < n; i++) for (j = i + 1; j < n; j++) X[i * n + j] = 0;
    for (i = 0; i < n; i++) {
      X[i * n + i] *= X[i * n + i];
      for (k = i + 1; k < n; k++) X[i * n + i] += X[k * n + i] * X[k * n + i];
      for (j = i + 1; j < n; j++)
        for (k = j; k < n; k++) X[i * n + j] += X[k * n + i] * X[k * n + j];
    }
    for (i = 0; i < n; i++) for (j = 0; j < i; j++) X[i * n + j] = X[j * n + i];
  };
  // Inversion via gauss-jordan elimination
  kriging_matrix_solve = function (X, n) {
    var m = n;
    var b = Array(n * n);
    var indxc = Array(n);
    var indxr = Array(n);
    var ipiv = Array(n);
    var i, icol, irow, j, k, l, ll;
    var big, dum, pivinv, temp;

    for (i = 0; i < n; i++)
      for (j = 0; j < n; j++) {
        if (i == j) b[i * n + j] = 1;
        else b[i * n + j] = 0;
      }
    for (j = 0; j < n; j++) ipiv[j] = 0;
    for (i = 0; i < n; i++) {
      big = 0;
      for (j = 0; j < n; j++) {
        if (ipiv[j] != 1) {
          for (k = 0; k < n; k++) {
            if (ipiv[k] == 0) {
              if (Math.abs(X[j * n + k]) >= big) {
                big = Math.abs(X[j * n + k]);
                irow = j;
                icol = k;
              }
            }
          }
        }
      }
      ++ipiv[icol];

      if (irow != icol) {
        for (l = 0; l < n; l++) {
          temp = X[irow * n + l];
          X[irow * n + l] = X[icol * n + l];
          X[icol * n + l] = temp;
        }
        for (l = 0; l < m; l++) {
          temp = b[irow * n + l];
          b[irow * n + l] = b[icol * n + l];
          b[icol * n + l] = temp;
        }
      }
      indxr[i] = irow;
      indxc[i] = icol;

      if (X[icol * n + icol] == 0) return false; // Singular

      pivinv = 1 / X[icol * n + icol];
      X[icol * n + icol] = 1;
      for (l = 0; l < n; l++) X[icol * n + l] *= pivinv;
      for (l = 0; l < m; l++) b[icol * n + l] *= pivinv;

      for (ll = 0; ll < n; ll++) {
        if (ll != icol) {
          dum = X[ll * n + icol];
          X[ll * n + icol] = 0;
          for (l = 0; l < n; l++) X[ll * n + l] -= X[icol * n + l] * dum;
          for (l = 0; l < m; l++) b[ll * n + l] -= b[icol * n + l] * dum;
        }
      }
    }
    for (l = n - 1; l >= 0; l--)
      if (indxr[l] != indxc[l]) {
        for (k = 0; k < n; k++) {
          temp = X[k * n + indxr[l]];
          X[k * n + indxr[l]] = X[k * n + indxc[l]];
          X[k * n + indxc[l]] = temp;
        }
      }

    return true;
  };

  // Variogram models
  kriging_variogram_gaussian = function (h, nugget, range, sill, A) {
    return (
      nugget +
      ((sill - nugget) / range) *
        (1.0 - Math.exp(-(1.0 / A) * Math.pow(h / range, 2)))
    );
  };
  kriging_variogram_exponential = function (h, nugget, range, sill, A) {
    return (
      nugget +
      ((sill - nugget) / range) * (1.0 - Math.exp(-(1.0 / A) * (h / range)))
    );
  };
  kriging_variogram_spherical = function (h, nugget, range, sill, A) {
    if (h > range) return nugget + (sill - nugget) / range;
    return (
      nugget +
      ((sill - nugget) / range) *
        (1.5 * (h / range) - 0.5 * Math.pow(h / range, 3))
    );
  };

  // Train using gaussian processes with bayesian priors
  kriging.train = function (t, x, y, model, sigma2, alpha) {
    var variogram = {
      t: t,
      x: x,
      y: y,
      nugget: 0.0,
      range: 0.0,
      sill: 0.0,
      A: 1 / 3,
      n: 0,
    };
    switch (model) {
      case "gaussian":
        variogram.model = kriging_variogram_gaussian;
        break;
      case "exponential":
        variogram.model = kriging_variogram_exponential;
        break;
      case "spherical":
        variogram.model = kriging_variogram_spherical;
        break;
    }

    // Lag distance/semivariance
    var i,
      j,
      k,
      l,
      n = t.length;
    var distance = Array((n * n - n) / 2);
    for (i = 0, k = 0; i < n; i++)
      for (j = 0; j < i; j++, k++) {
        distance[k] = Array(2);
        distance[k][0] = Math.pow(
          Math.pow(x[i] - x[j], 2) + Math.pow(y[i] - y[j], 2),
          0.5
        );
        distance[k][1] = Math.abs(t[i] - t[j]);
      }
    distance.sort(function (a, b) {
      return a[0] - b[0];
    });
    variogram.range = distance[(n * n - n) / 2 - 1][0];

    // Bin lag distance
    var lags = (n * n - n) / 2 > 30 ? 30 : (n * n - n) / 2;
    var tolerance = variogram.range / lags;
    var lag = createArrayWithValues(0, lags);
    var semi = createArrayWithValues(0, lags);
    if (lags < 30) {
      for (l = 0; l < lags; l++) {
        lag[l] = distance[l][0];
        semi[l] = distance[l][1];
      }
    } else {
      for (
        i = 0, j = 0, k = 0, l = 0;
        i < lags && j < (n * n - n) / 2;
        i++, k = 0
      ) {
        while (distance[j][0] <= (i + 1) * tolerance) {
          lag[l] += distance[j][0];
          semi[l] += distance[j][1];
          j++;
          k++;
          if (j >= (n * n - n) / 2) break;
        }
        if (k > 0) {
          lag[l] /= k;
          semi[l] /= k;
          l++;
        }
      }
      if (l < 2) return variogram; // Error: Not enough points
    }

    // Feature transformation
    n = l;
    variogram.range = lag[n - 1] - lag[0];
    var X = createArrayWithValues(1, 2 * n);
    var Y = Array(n);
    var A = variogram.A;
    for (i = 0; i < n; i++) {
      switch (model) {
        case "gaussian":
          X[i * 2 + 1] =
            1.0 - Math.exp(-(1.0 / A) * Math.pow(lag[i] / variogram.range, 2));
          break;
        case "exponential":
          X[i * 2 + 1] =
            1.0 - Math.exp((-(1.0 / A) * lag[i]) / variogram.range);
          break;
        case "spherical":
          X[i * 2 + 1] =
            1.5 * (lag[i] / variogram.range) -
            0.5 * Math.pow(lag[i] / variogram.range, 3);
          break;
      }
      Y[i] = semi[i];
    }

    // Least squares
    var Xt = kriging_matrix_transpose(X, n, 2);
    var Z = kriging_matrix_multiply(Xt, X, 2, n, 2);
    Z = kriging_matrix_add(Z, kriging_matrix_diag(1 / alpha, 2), 2, 2);
    var cloneZ = Z.slice(0);
    if (kriging_matrix_chol(Z, 2)) kriging_matrix_chol2inv(Z, 2);
    else {
      kriging_matrix_solve(cloneZ, 2);
      Z = cloneZ;
    }
    var W = kriging_matrix_multiply(
      kriging_matrix_multiply(Z, Xt, 2, 2, n),
      Y,
      2,
      n,
      1
    );

    // Variogram parameters
    variogram.nugget = W[0];
    variogram.sill = W[1] * variogram.range + variogram.nugget;
    variogram.n = x.length;

    // Gram matrix with prior
    n = x.length;
    var K = Array(n * n);
    for (i = 0; i < n; i++) {
      for (j = 0; j < i; j++) {
        K[i * n + j] = variogram.model(
          Math.pow(Math.pow(x[i] - x[j], 2) + Math.pow(y[i] - y[j], 2), 0.5),
          variogram.nugget,
          variogram.range,
          variogram.sill,
          variogram.A
        );
        K[j * n + i] = K[i * n + j];
      }
      K[i * n + i] = variogram.model(
        0,
        variogram.nugget,
        variogram.range,
        variogram.sill,
        variogram.A
      );
    }

    // Inverse penalized Gram matrix projected to target vector
    var C = kriging_matrix_add(K, kriging_matrix_diag(sigma2, n), n, n);
    var cloneC = C.slice(0);
    if (kriging_matrix_chol(C, n)) kriging_matrix_chol2inv(C, n);
    else {
      kriging_matrix_solve(cloneC, n);
      C = cloneC;
    }

    // Copy unprojected inverted matrix as K
    var K = C.slice(0);
    var M = kriging_matrix_multiply(C, t, n, n, 1);
    variogram.K = K;
    variogram.M = M;

    return variogram;
  };

  // Model prediction
  kriging.predict = function (x, y, variogram) {
    var i,
      k = Array(variogram.n);
    for (i = 0; i < variogram.n; i++)
      k[i] = variogram.model(
        Math.pow(
          Math.pow(x - variogram.x[i], 2) + Math.pow(y - variogram.y[i], 2),
          0.5
        ),
        variogram.nugget,
        variogram.range,
        variogram.sill,
        variogram.A
      );
    return kriging_matrix_multiply(k, variogram.M, 1, variogram.n, 1)[0];
  };
  kriging.variance = function (x, y, variogram) {
    var i,
      k = Array(variogram.n);
    for (i = 0; i < variogram.n; i++)
      k[i] = variogram.model(
        Math.pow(
          Math.pow(x - variogram.x[i], 2) + Math.pow(y - variogram.y[i], 2),
          0.5
        ),
        variogram.nugget,
        variogram.range,
        variogram.sill,
        variogram.A
      );
    return (
      variogram.model(
        0,
        variogram.nugget,
        variogram.range,
        variogram.sill,
        variogram.A
      ) +
      kriging_matrix_multiply(
        kriging_matrix_multiply(k, variogram.K, 1, variogram.n, variogram.n),
        k,
        1,
        variogram.n,
        1
      )[0]
    );
  };

  // Gridded matrices or contour paths
  kriging.grid = function (polygons, variogram, width) {
    var i,
      j,
      k,
      n = polygons.length;
    if (n == 0) return;

    // Boundaries of polygons space
    var xlim = [polygons[0][0][0], polygons[0][0][0]];
    var ylim = [polygons[0][0][1], polygons[0][0][1]];
    for (
      i = 0;
      i < n;
      i++ // Polygons
    )
      for (j = 0; j < polygons[i].length; j++) {
        // Vertices
        if (polygons[i][j][0] < xlim[0]) xlim[0] = polygons[i][j][0];
        if (polygons[i][j][0] > xlim[1]) xlim[1] = polygons[i][j][0];
        if (polygons[i][j][1] < ylim[0]) ylim[0] = polygons[i][j][1];
        if (polygons[i][j][1] > ylim[1]) ylim[1] = polygons[i][j][1];
      }

    // Alloc for O(n^2) space
    var xtarget, ytarget;
    var a = Array(2),
      b = Array(2);
    var lxlim = Array(2); // Local dimensions
    var lylim = Array(2); // Local dimensions
    var x = Math.ceil((xlim[1] - xlim[0]) / width);
    var y = Math.ceil((ylim[1] - ylim[0]) / width);

    var A = Array(x + 1);
    for (i = 0; i <= x; i++) A[i] = Array(y + 1);
    for (i = 0; i < n; i++) {
      // Range for polygons[i]
      lxlim[0] = polygons[i][0][0];
      lxlim[1] = lxlim[0];
      lylim[0] = polygons[i][0][1];
      lylim[1] = lylim[0];
      for (j = 1; j < polygons[i].length; j++) {
        // Vertices
        if (polygons[i][j][0] < lxlim[0]) lxlim[0] = polygons[i][j][0];
        if (polygons[i][j][0] > lxlim[1]) lxlim[1] = polygons[i][j][0];
        if (polygons[i][j][1] < lylim[0]) lylim[0] = polygons[i][j][1];
        if (polygons[i][j][1] > lylim[1]) lylim[1] = polygons[i][j][1];
      }

      // Loop through polygon subspace
      a[0] = Math.floor(
        (lxlim[0] - ((lxlim[0] - xlim[0]) % width) - xlim[0]) / width
      );
      a[1] = Math.ceil(
        (lxlim[1] - ((lxlim[1] - xlim[1]) % width) - xlim[0]) / width
      );
      b[0] = Math.floor(
        (lylim[0] - ((lylim[0] - ylim[0]) % width) - ylim[0]) / width
      );
      b[1] = Math.ceil(
        (lylim[1] - ((lylim[1] - ylim[1]) % width) - ylim[0]) / width
      );
      for (j = a[0]; j <= a[1]; j++)
        for (k = b[0]; k <= b[1]; k++) {
          xtarget = xlim[0] + j * width;
          ytarget = ylim[0] + k * width;
          if (polygons[i].pip(xtarget, ytarget))
            A[j][k] = kriging.predict(xtarget, ytarget, variogram);
        }
    }
    A.xlim = xlim;
    A.ylim = ylim;
    A.zlim = [variogram.t.min(), variogram.t.max()];
    A.width = width;
    return A;
  };
  kriging.contour = function (value, polygons, variogram) {};

  // Plotting on the DOM
  kriging.plot = function (canvas, grid, xlim, ylim, colors) {
    // Clear screen
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var range = [
      xlim[1] - xlim[0],
      ylim[1] - ylim[0],
      grid.zlim[1] - grid.zlim[0],
    ];
    var i, j, x, y, z;
    var n = grid.length;
    var m = grid[0].length;
    var wx = Math.ceil((grid.width * canvas.width) / (xlim[1] - xlim[0]));
    var wy = Math.ceil((grid.width * canvas.height) / (ylim[1] - ylim[0]));

    for (i = 0; i < n; i++) {
      for (j = 0; j < m; j++) {
        if (grid[i][j] == undefined) continue;
        x =
          (canvas.width * (i * grid.width + grid.xlim[0] - xlim[0])) / range[0];
        y =
          canvas.height *
          (1 - (j * grid.width + grid.ylim[0] - ylim[0]) / range[1]);
        z = (grid[i][j] - grid.zlim[0]) / range[2];

        if (z < 0.0) z = 0.0;
        if (z > 1.0) z = 1.0;
        ctx.fillStyle = colors[Math.floor((colors.length - 1) * z)];
        ctx.fillRect(Math.round(x - wx / 2), Math.round(y - wy / 2), wx, wy);
      }
    }
  };

  return kriging;
})();

if (module && module.exports) {
  module.exports = kriging;
}

 bigScreen/src/utils/kriging2.js

New file
@@ -0,0 +1,485 @@
// Extend the Array class
Array.prototype.max = function() {
    return Math.max.apply(null, this);
};
Array.prototype.min = function() {
    return Math.min.apply(null, this);
};
Array.prototype.mean = function() {
    var i, sum;
    for(i=0,sum=0;i<this.length;i++)
    sum += this[i];
    return sum / this.length;
};
Array.prototype.pip = function(x, y) {
    var i, j, c = false;
    for(i=0,j=this.length-1;i<this.length;j=i++) {
    if( ((this[i][1]>y) != (this[j][1]>y)) &&
        (x<(this[j][0]-this[i][0]) * (y-this[i][1]) / (this[j][1]-this[i][1]) + this[i][0]) ) {
        c = !c;
    }
    }
    return c;
}

var kriging = function() {
    var kriging = {};

    var createArrayWithValues = function(value, n) {
        var array = [];
        for ( var i = 0; i < n; i++) {
            array.push(value);
        }
        return array;
    };

    // Matrix algebra
    kriging_matrix_diag = function(c, n) {
        var Z = createArrayWithValues(0, n * n);
        for(i=0;i<n;i++) Z[i*n+i] = c;
        return Z;
    };
    kriging_matrix_transpose = function(X, n, m) {
    var i, j, Z = Array(m*n);
    for(i=0;i<n;i++)
        for(j=0;j<m;j++)
        Z[j*n+i] = X[i*m+j];
    return Z;
    };
    kriging_matrix_scale = function(X, c, n, m) {
    var i, j;
    for(i=0;i<n;i++)
        for(j=0;j<m;j++)
        X[i*m+j] *= c;
    };
    kriging_matrix_add = function(X, Y, n, m) {
    var i, j, Z = Array(n*m);
    for(i=0;i<n;i++)
        for(j=0;j<m;j++)
        Z[i*m+j] = X[i*m+j] + Y[i*m+j];
    return Z;
    };
    // Naive matrix multiplication
    kriging_matrix_multiply = function(X, Y, n, m, p) {
    var i, j, k, Z = Array(n*p);
    for(i=0;i<n;i++) {
        for(j=0;j<p;j++) {
        Z[i*p+j] = 0;
        for(k=0;k<m;k++)
            Z[i*p+j] += X[i*m+k]*Y[k*p+j];
        }
    }
    return Z;
    };
    // Cholesky decomposition
    kriging_matrix_chol = function(X, n) {
    var i, j, k, sum, p = Array(n);
    for(i=0;i<n;i++) p[i] = X[i*n+i];
    for(i=0;i<n;i++) {
        for(j=0;j<i;j++)
        p[i] -= X[i*n+j]*X[i*n+j];
        if(p[i]<=0) return false;
        p[i] = Math.sqrt(p[i]);
        for(j=i+1;j<n;j++) {
        for(k=0;k<i;k++)
            X[j*n+i] -= X[j*n+k]*X[i*n+k];
        X[j*n+i] /= p[i];
        }
    }
    for(i=0;i<n;i++) X[i*n+i] = p[i];
    return true;
    };
    // Inversion of cholesky decomposition
    kriging_matrix_chol2inv = function(X, n) {
    var i, j, k, sum;
    for(i=0;i<n;i++) {
        X[i*n+i] = 1/X[i*n+i];
        for(j=i+1;j<n;j++) {
        sum = 0;
        for(k=i;k<j;k++)
            sum -= X[j*n+k]*X[k*n+i];
        X[j*n+i] = sum/X[j*n+j];
        }
    }
    for(i=0;i<n;i++)
        for(j=i+1;j<n;j++)
        X[i*n+j] = 0;
    for(i=0;i<n;i++) {
        X[i*n+i] *= X[i*n+i];
        for(k=i+1;k<n;k++)
        X[i*n+i] += X[k*n+i]*X[k*n+i];
        for(j=i+1;j<n;j++)
        for(k=j;k<n;k++)
            X[i*n+j] += X[k*n+i]*X[k*n+j];
    }
    for(i=0;i<n;i++)
        for(j=0;j<i;j++)
        X[i*n+j] = X[j*n+i];

    };
    // Inversion via gauss-jordan elimination
    kriging_matrix_solve = function(X, n) {
    var m = n;
    var b = Array(n*n);
    var indxc = Array(n);
    var indxr = Array(n);
    var ipiv = Array(n);
    var i, icol, irow, j, k, l, ll;
    var big, dum, pivinv, temp;

    for(i=0;i<n;i++)
        for(j=0;j<n;j++) {
        if(i==j) b[i*n+j] = 1;
        else b[i*n+j] = 0;
        }
    for(j=0;j<n;j++) ipiv[j] = 0;
    for(i=0;i<n;i++) {
        big = 0;
        for(j=0;j<n;j++) {
        if(ipiv[j]!=1) {
            for(k=0;k<n;k++) {
            if(ipiv[k]==0) {
                if(Math.abs(X[j*n+k])>=big) {
                big = Math.abs(X[j*n+k]);
                irow = j;
                icol = k;
                }
            }
            }
        }
        }
        ++(ipiv[icol]);

        if(irow!=icol) {
        for(l=0;l<n;l++) {
            temp = X[irow*n+l];
            X[irow*n+l] = X[icol*n+l];
            X[icol*n+l] = temp;
        }
        for(l=0;l<m;l++) {
            temp = b[irow*n+l];
            b[irow*n+l] = b[icol*n+l];
            b[icol*n+l] = temp;
        }
        }
        indxr[i] = irow;
        indxc[i] = icol;

        if(X[icol*n+icol]==0) return false; // Singular

        pivinv = 1 / X[icol*n+icol];
        X[icol*n+icol] = 1;
        for(l=0;l<n;l++) X[icol*n+l] *= pivinv;
        for(l=0;l<m;l++) b[icol*n+l] *= pivinv;

        for(ll=0;ll<n;ll++) {
        if(ll!=icol) {
            dum = X[ll*n+icol];
            X[ll*n+icol] = 0;
            for(l=0;l<n;l++) X[ll*n+l] -= X[icol*n+l]*dum;
            for(l=0;l<m;l++) b[ll*n+l] -= b[icol*n+l]*dum;
        }
        }
    }
    for(l=(n-1);l>=0;l--)
        if(indxr[l]!=indxc[l]) {
        for(k=0;k<n;k++) {
            temp = X[k*n+indxr[l]];
            X[k*n+indxr[l]] = X[k*n+indxc[l]];
            X[k*n+indxc[l]] = temp;
        }
        }

    return true;
    }

    // Variogram models
    kriging_variogram_gaussian = function(h, nugget, range, sill, A) {
    return nugget + ((sill-nugget)/range)*
    ( 1.0 - Math.exp(-(1.0/A)*Math.pow(h/range, 2)) );
    };
    kriging_variogram_exponential = function(h, nugget, range, sill, A) {
    return nugget + ((sill-nugget)/range)*
    ( 1.0 - Math.exp(-(1.0/A) * (h/range)) );
    };
    kriging_variogram_spherical = function(h, nugget, range, sill, A) {
    if(h>range) return nugget + (sill-nugget)/range;
    return nugget + ((sill-nugget)/range)*
    ( 1.5*(h/range) - 0.5*Math.pow(h/range, 3) );
    };

    // Train using gaussian processes with bayesian priors
    kriging.train = function(t, x, y, model, sigma2, alpha) {
    var variogram = {
        t      : t,
        x      : x,
        y      : y,
        nugget : 0.0,
        range  : 0.0,
        sill   : 0.0,
        A      : 1/3,
        n      : 0
    };
    switch(model) {
    case "gaussian":
        variogram.model = kriging_variogram_gaussian;
        break;
    case "exponential":
        variogram.model = kriging_variogram_exponential;
        break;
    case "spherical":
        variogram.model = kriging_variogram_spherical;
        break;
    };

    // Lag distance/semivariance
    var i, j, k, l, n = t.length;
    var distance = Array((n*n-n)/2);
    for(i=0,k=0;i<n;i++)
        for(j=0;j<i;j++,k++) {
        distance[k] = Array(2);
        distance[k][0] = Math.pow(
            Math.pow(x[i]-x[j], 2)+
            Math.pow(y[i]-y[j], 2), 0.5);
        distance[k][1] = Math.abs(t[i]-t[j]);
        }
    distance.sort(function(a, b) { return a[0] - b[0]; });
    variogram.range = distance[(n*n-n)/2-1][0];

    // Bin lag distance
    var lags = ((n*n-n)/2)>30?30:(n*n-n)/2;
    var tolerance = variogram.range/lags;
    var lag = createArrayWithValues(0,lags);
    var semi = createArrayWithValues(0,lags);
    if(lags<30) {
        for(l=0;l<lags;l++) {
        lag[l] = distance[l][0];
        semi[l] = distance[l][1];
        }
    }
    else {
        for(i=0,j=0,k=0,l=0;i<lags&&j<((n*n-n)/2);i++,k=0) {
        while( distance[j][0]<=((i+1)*tolerance) ) {
            lag[l] += distance[j][0];
            semi[l] += distance[j][1];
            j++;k++;
            if(j>=((n*n-n)/2)) break;
        }
        if(k>0) {
            lag[l] /= k;
            semi[l] /= k;
            l++;
        }
        }
        if(l<2) return variogram; // Error: Not enough points
    }

    // Feature transformation
    n = l;
    variogram.range = lag[n-1]-lag[0];
     var X = createArrayWithValues(1,2 * n);
    var Y = Array(n);
    var A = variogram.A;
    for(i=0;i<n;i++) {
        switch(model) {
        case "gaussian":
        X[i*2+1] = 1.0-Math.exp(-(1.0/A)*Math.pow(lag[i]/variogram.range, 2));
        break;
        case "exponential":
        X[i*2+1] = 1.0-Math.exp(-(1.0/A)*lag[i]/variogram.range);
        break;
        case "spherical":
        X[i*2+1] = 1.5*(lag[i]/variogram.range)-
            0.5*Math.pow(lag[i]/variogram.range, 3);
        break;
        };
        Y[i] = semi[i];
    }

    // Least squares
    var Xt = kriging_matrix_transpose(X, n, 2);
    var Z = kriging_matrix_multiply(Xt, X, 2, n, 2);
    Z = kriging_matrix_add(Z, kriging_matrix_diag(1/alpha, 2), 2, 2);
    var cloneZ = Z.slice(0);
    if(kriging_matrix_chol(Z, 2))
        kriging_matrix_chol2inv(Z, 2);
    else {
        kriging_matrix_solve(cloneZ, 2);
        Z = cloneZ;
    }
    var W = kriging_matrix_multiply(kriging_matrix_multiply(Z, Xt, 2, 2, n), Y, 2, n, 1);

    // Variogram parameters
    variogram.nugget = W[0];
    variogram.sill = W[1]*variogram.range+variogram.nugget;
    variogram.n = x.length;

    // Gram matrix with prior
    n = x.length;
    var K = Array(n*n);
    for(i=0;i<n;i++) {
        for(j=0;j<i;j++) {
        K[i*n+j] = variogram.model(Math.pow(Math.pow(x[i]-x[j], 2)+
                            Math.pow(y[i]-y[j], 2), 0.5),
                       variogram.nugget,
                       variogram.range,
                       variogram.sill,
                       variogram.A);
        K[j*n+i] = K[i*n+j];
        }
        K[i*n+i] = variogram.model(0, variogram.nugget,
                       variogram.range,
                       variogram.sill,
                       variogram.A);
    }

    // Inverse penalized Gram matrix projected to target vector
    var C = kriging_matrix_add(K, kriging_matrix_diag(sigma2, n), n, n);
    var cloneC = C.slice(0);
    if(kriging_matrix_chol(C, n))
        kriging_matrix_chol2inv(C, n);
    else {
        kriging_matrix_solve(cloneC, n);
        C = cloneC;
    }

    // Copy unprojected inverted matrix as K
    var K = C.slice(0);
    var M = kriging_matrix_multiply(C, t, n, n, 1);
    variogram.K = K;
    variogram.M = M;

    return variogram;
    };

    // Model prediction
    kriging.predict = function(x, y, variogram) {
    var i, k = Array(variogram.n);
    for(i=0;i<variogram.n;i++)
        k[i] = variogram.model(Math.pow(Math.pow(x-variogram.x[i], 2)+
                        Math.pow(y-variogram.y[i], 2), 0.5),
                   variogram.nugget, variogram.range,
                   variogram.sill, variogram.A);
    return kriging_matrix_multiply(k, variogram.M, 1, variogram.n, 1)[0];
    };
    kriging.variance = function(x, y, variogram) {
    var i, k = Array(variogram.n);
    for(i=0;i<variogram.n;i++)
        k[i] = variogram.model(Math.pow(Math.pow(x-variogram.x[i], 2)+
                        Math.pow(y-variogram.y[i], 2), 0.5),
                   variogram.nugget, variogram.range,
                   variogram.sill, variogram.A);
    return variogram.model(0, variogram.nugget, variogram.range,
            variogram.sill, variogram.A)+
    kriging_matrix_multiply(kriging_matrix_multiply(k, variogram.K,
                            1, variogram.n, variogram.n),
                k, 1, variogram.n, 1)[0];
    };

    // Gridded matrices or contour paths
    kriging.grid = function(polygons, variogram, width) {
    var i, j, k, n = polygons.length;
    if(n==0) return;

    // Boundaries of polygons space
    var xlim = [polygons[0][0][0], polygons[0][0][0]];
    var ylim = [polygons[0][0][1], polygons[0][0][1]];
    for(i=0;i<n;i++) // Polygons
        for(j=0;j<polygons[i].length;j++) { // Vertices
        if(polygons[i][j][0]<xlim[0])
            xlim[0] = polygons[i][j][0];
        if(polygons[i][j][0]>xlim[1])
            xlim[1] = polygons[i][j][0];
        if(polygons[i][j][1]<ylim[0])
            ylim[0] = polygons[i][j][1];
        if(polygons[i][j][1]>ylim[1])
            ylim[1] = polygons[i][j][1];
        }

    // Alloc for O(n^2) space
    var xtarget, ytarget;
    var a = Array(2), b = Array(2);
    var lxlim = Array(2); // Local dimensions
    var lylim = Array(2); // Local dimensions
    var x = Math.ceil((xlim[1]-xlim[0])/width);
    var y = Math.ceil((ylim[1]-ylim[0])/width);

    var A = Array(x+1);
    for(i=0;i<=x;i++) A[i] = Array(y+1);
    for(i=0;i<n;i++) {
        // Range for polygons[i]
        lxlim[0] = polygons[i][0][0];
        lxlim[1] = lxlim[0];
        lylim[0] = polygons[i][0][1];
        lylim[1] = lylim[0];
        for(j=1;j<polygons[i].length;j++) { // Vertices
        if(polygons[i][j][0]<lxlim[0])
            lxlim[0] = polygons[i][j][0];
        if(polygons[i][j][0]>lxlim[1])
            lxlim[1] = polygons[i][j][0];
        if(polygons[i][j][1]<lylim[0])
            lylim[0] = polygons[i][j][1];
        if(polygons[i][j][1]>lylim[1])
            lylim[1] = polygons[i][j][1];
        }

        // Loop through polygon subspace
        a[0] = Math.floor(((lxlim[0]-((lxlim[0]-xlim[0])%width)) - xlim[0])/width);
        a[1] = Math.ceil(((lxlim[1]-((lxlim[1]-xlim[1])%width)) - xlim[0])/width);
        b[0] = Math.floor(((lylim[0]-((lylim[0]-ylim[0])%width)) - ylim[0])/width);
        b[1] = Math.ceil(((lylim[1]-((lylim[1]-ylim[1])%width)) - ylim[0])/width);
        for(j=a[0];j<=a[1];j++)
        for(k=b[0];k<=b[1];k++) {
            xtarget = xlim[0] + j*width;
            ytarget = ylim[0] + k*width;
            if(polygons[i].pip(xtarget, ytarget))
            A[j][k] = kriging.predict(xtarget,
                          ytarget,
                          variogram);
        }
    }
    A.xlim = xlim;
    A.ylim = ylim;
    A.zlim = [variogram.t.min(), variogram.t.max()];
    A.width = width;
    return A;
    };
    kriging.contour = function(value, polygons, variogram) {

    };

    // Plotting on the DOM
    kriging.plot = function(canvas, grid, xlim, ylim, colors) {
    // Clear screen
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Starting boundaries
    var range = [xlim[1]-xlim[0], ylim[1]-ylim[0], grid.zlim[1]-grid.zlim[0]];
    var i, j, x, y, z;
    var n = grid.length;
    var m = grid[0].length;
    var wx = Math.ceil(grid.width*canvas.width/(xlim[1]-xlim[0]));
    var wy = Math.ceil(grid.width*canvas.height/(ylim[1]-ylim[0]));
    for(i=0;i<n;i++)
        for(j=0;j<m;j++) {
        if(grid[i][j]==undefined) continue;
        x = canvas.width*(i*grid.width+grid.xlim[0]-xlim[0])/range[0];
        y = canvas.height*(1-(j*grid.width+grid.ylim[0]-ylim[0])/range[1]);
        z = (grid[i][j]-grid.zlim[0])/range[2];
        if(z<0.0) z = 0.0;
        if(z>1.0) z = 1.0;
        console.log(Math.floor((colors.length-1)*z))
        ctx.fillStyle = colors[Math.floor((colors.length-1)*z)];
        ctx.fillRect(Math.round(x-wx/2), Math.round(y-wy/2), wx, wy);
        }

    };


    return kriging;
}();

if (module && module.exports){
    module.exports = kriging;
}

 bigScreen/src/utils/kriging_default_params.js

New file
@@ -0,0 +1,8 @@
var kriging_default_params = {
  krigingModel: "spherical", //model还可选'exponential','gaussian','spherical'
  krigingSigma2: 0,
  krigingAlpha: 226,
  canvasAlpha: 0.1, //canvas图层透明度
  colors: ["#f1c40f","#f4d03f","#f7dc6f","#f9e79f","#fcf3cf","#fef9e7","#eafaf1","#d5f5e3","#abebc6","#82e0aa","#58d68d","#2ecc71","#28b463","#239b56","#1d8348","#186a3b","#145a32","#196f3d","#1e8449"],
};
export default kriging_default_params;

 bigScreen/src/utils/launchtower.js

New file
@@ -0,0 +1,513 @@
var points = {

    "iTotalRecords": 24,

    "aaData": [

        {

            "monitorpointName": "浦东127",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "浦东新区",

            "regionLat": "31.16345468",

            "status_name": "正常",

            "proviceName": 3,

            "regionLong": "121.65346479",

            "monitorpointId": 1,

            "monitorstationId_name": "监测站站点101",

            "remark": "",

            "updateTime": "2021-06-1116:10:36",

            "sort": null,

            "priority": null,

            "createTime": "2020-08-2515:45:24",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 48

        },

        {

            "monitorpointName": "黄浦124",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "黄浦区",

            "regionLat": "31.22466935",

            "status_name": "正常",

            "proviceName": 142,

            "regionLong": "121.48948396",

            "monitorpointId": 4,

            "monitorstationId_name": "监测站站点101",

            "remark": "",

            "updateTime": "2021-04-2617:59:51",

            "sort": null,

            "priority": null,

            "createTime": "2021-03-0914:57:16",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 36

        },

        {

            "monitorpointName": "崇明126",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "崇明县",

            "regionLat": "31.62894562",

            "status_name": "正常",

            "proviceName": 148,

            "regionLong": "121.44585236",

            "monitorpointId": 6,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-04-2618:00:27",

            "sort": null,

            "priority": null,

            "createTime": "2021-04-2618:00:27",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 28

        },

        {

            "monitorpointName": "嘉定融媒体143",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "嘉定区",

            "regionLat": "31.38452142",

            "status_name": "正常",

            "proviceName": 145,

            "regionLong": "121.27125485",

            "monitorpointId": 8,

            "monitorstationId_name": "监测站站点101",

            "remark": "",

            "updateTime": "2021-05-2715:32:10",

            "sort": null,

            "priority": null,

            "createTime": "2021-05-2715:27:07",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 18

        },

        {

            "monitorpointName": "闵行融媒体144",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "闵行区",

            "regionLat": "31.12745258",

            "status_name": "正常",

            "proviceName": 130,

            "regionLong": "121.38745265",

            "monitorpointId": 9,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-05-2715:44:34",

            "sort": null,

            "priority": null,

            "createTime": "2021-05-2715:44:34",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 25

        },

        {

            "monitorpointName": "青浦融媒体145",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "青浦区",

            "regionLat": "31.15745268",

            "status_name": "正常",

            "proviceName": 147,

            "regionLong": "121.12452156",

            "monitorpointId": 10,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-05-2715:44:58",

            "sort": null,

            "priority": null,

            "createTime": "2021-05-2715:44:58",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 42

        },

        {

            "monitorpointName": "宝山融媒体146",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "宝山区",

            "regionLat": "31.4452156",

            "status_name": "正常",

            "proviceName": 146,

            "regionLong": "121.48452652",

            "monitorpointId": 11,

            "monitorstationId_name": "监测站站点101",

            "remark": "",

            "updateTime": "2021-05-2715:49:14",

            "sort": null,

            "priority": null,

            "createTime": "2021-05-2715:47:25",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 32

        },

        {

            "monitorpointName": "宝山有线147",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "宝山区",

            "regionLat": "31.4452652",

            "status_name": "正常",

            "proviceName": 146,

            "regionLong": "121.48452854",

            "monitorpointId": 12,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-05-2715:47:48",

            "sort": null,

            "priority": null,

            "createTime": "2021-05-2715:47:48",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 22

        },

        {

            "monitorpointName": "嘉定有线149",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "嘉定区",

            "regionLat": "31.38745265",

            "status_name": "正常",

            "proviceName": 145,

            "regionLong": "121.27745256",

            "monitorpointId": 13,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-05-2715:48:24",

            "sort": null,

            "priority": null,

            "createTime": "2021-05-2715:48:24",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 12

        },

        {

            "monitorpointName": "松江融媒体151",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "松江区",

            "regionLat": "31.03452156",

            "status_name": "正常",

            "proviceName": 143,

            "regionLong": "121.22745120",

            "monitorpointId": 14,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-05-2715:48:40",

            "sort": null,

            "priority": null,

            "createTime": "2021-05-2715:48:40",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 58

        },

        {

            "monitorpointName": "松江有线141",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "松江区",

            "regionLat": "31.03412035",

            "status_name": "正常",

            "proviceName": 143,

            "regionLong": "121.22120452",

            "monitorpointId": 15,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:41:10",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:41:10",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 44

        },

        {

            "monitorpointName": "闵行有线148",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "闵行区",

            "regionLat": "31.12412575",

            "status_name": "正常",

            "proviceName": 130,

            "regionLong": "121.38452136",

            "monitorpointId": 16,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:41:50",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:41:50",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 33

        },

        {

            "monitorpointName": "金山有线150",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "金山区",

            "regionLat": "30.75412563",

            "status_name": "正常",

            "proviceName": 150,

            "regionLong": "121.33452145",

            "monitorpointId": 17,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:42:12",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:42:12",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 21

        },

        {

            "monitorpointName": "奉贤融媒体152",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "奉贤区",

            "regionLat": "30.92452632",

            "status_name": "正常",

            "proviceName": 149,

            "regionLong": "121.47412536",

            "monitorpointId": 18,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:42:30",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:42:30",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 12

        },

        {

            "monitorpointName": "青浦有线153",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "青浦区",

            "regionLat": "31.15452365",

            "status_name": "正常",

            "proviceName": 147,

            "regionLong": "121.12452365",

            "monitorpointId": 19,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:42:48",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:42:48",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 5

        },

        {

            "monitorpointName": "临港有线154",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "南汇区",

            "regionLat": "31.05452102",

            "status_name": "正常",

            "proviceName": 144,

            "regionLong": "121.75452365",

            "monitorpointId": 20,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:43:17",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:43:17",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 34

        },

        {

            "monitorpointName": "艺海大厦155",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "静安区",

            "regionLat": "31.23452125",

            "status_name": "正常",

            "proviceName": 154,

            "regionLong": "121.45785632",

            "monitorpointId": 21,

            "monitorstationId_name": "监测站站点101",

            "remark": "",

            "updateTime": "2021-06-1021:51:36",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:44:02",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 24

        },

        {

            "monitorpointName": "金山融媒体156",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "金山区",

            "regionLat": "30.75452653",

            "status_name": "正常",

            "proviceName": 150,

            "regionLong": "121.33745236",

            "monitorpointId": 22,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:44:27",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:44:27",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 31

        },

        {

            "monitorpointName": "浦东有线157",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "浦东新区",

            "regionLat": "31.16374521",

            "status_name": "正常",

            "proviceName": 3,

            "regionLong": "121.65374523",

            "monitorpointId": 23,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:44:49",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:44:49",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 2

        },

        {

            "monitorpointName": "奉贤有线158",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "奉贤区",

            "regionLat": "30.92745265",

            "status_name": "正常",

            "proviceName": 149,

            "regionLong": "121.47745236",

            "monitorpointId": 24,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1021:45:14",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1021:45:14",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 1

        },

        {

            "monitorpointName": "崇明融媒体160",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "崇明县",

            "regionLat": "31.67452152",

            "status_name": "正常",

            "proviceName": 148,

            "regionLong": "121.47452158",

            "monitorpointId": 25,

            "monitorstationId_name": "监测站站点101",

            "remark": "",

            "updateTime": "2021-06-1116:40:21",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1022:40:10",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 3

        },

        {

            "monitorpointName": "长兴岛有线164",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "崇明县",

            "regionLat": "31.62745236",

            "status_name": "正常",

            "proviceName": 148,

            "regionLong": "121.44125637",

            "monitorpointId": 26,

            "monitorstationId_name": "监测站站点101",

            "remark": "",

            "updateTime": "2021-06-1300:24:51",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1022:40:31",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 5

        },

        {

            "monitorpointName": "崇明有线163",

            "createUserId": 8,

            "monitorstationId": 1,

            "updateUserId": 8,

            "proviceName_name": "崇明县",

            "regionLat": "31.62745265",

            "status_name": "正常",

            "proviceName": 148,

            "regionLong": "121.4745236",

            "monitorpointId": 27,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1022:40:49",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1022:40:49",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 5

        },

        {

            "monitorpointName": "广播大厦162",

            "createUserId": 1,

            "monitorstationId": 1,

            "updateUserId": 1,

            "proviceName_name": "长宁区",

            "regionLat": "31.23745265",

            "status_name": "正常",

            "proviceName": 155,

            "regionLong": "121.47745823",

            "monitorpointId": 28,

            "monitorstationId_name": "监测站站点101",

            "remark": null,

            "updateTime": "2021-06-1513:12:08",

            "sort": null,

            "priority": null,

            "createTime": "2021-06-1513:12:08",

            "synStatus_name": "已同步",

            "status": 1,

            "z": 1

        }

    ],

    "iTotalDisplayRecords": 24,

    "sEcho": null

};



export default points

 bigScreen/src/utils/map.js

New file
@@ -0,0 +1,12 @@
export function MP(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        resolve(BMap)
      }
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

 bigScreen/src/utils/other.js

New file
@@ -0,0 +1,137 @@
var data = {
  code: 20000,
  data: [
    {
      frequencyValue: "522",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 9018,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 9018,
      avg_level: 56,
    },
    {
      frequencyValue: "531",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 32728,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 32728,
      avg_level: 45,
    },
    {
      frequencyValue: "540",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 49305,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 49305,
      avg_level: 38,
    },
    {
      frequencyValue: "549",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 18620,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 18620,
      avg_level: 50,
    },
    {
      frequencyValue: "558",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 20220,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 20220,
      avg_level: 52,
    },
    {
      frequencyValue: "567",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 25760,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 25760,
      avg_level: 48,
    },
    {
      frequencyValue: "576",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 15104,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 15104,
      avg_level: 50,
    },
    {
      frequencyValue: "585",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 27091,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 27091,
      avg_level: 46,
    },
    {
      frequencyValue: "594",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 22428,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 22428,
      avg_level: 49,
    },
    {
      frequencyValue: "603",
      count_status_0: 0,
      count_status_1: 0,
      count_status_2: 0,
      count_status_3: 0,
      count_status_4: 0,
      count_status_5: 41164,
      count_status_6: 0,
      count_status_other: 0,
      count_total: 41164,
      avg_level: 42,
    },
  ],
};

export default data;

 bigScreen/src/utils/request.js

New file
@@ -0,0 +1,229 @@
import axios from 'axios'

import { MessageBox, Message } from 'element-ui'

// import store from '@/store'

// import { getToken } from '@/utils/auth'



// let root = "http://wiibox.xicp.io:19868/FRP/"

// let DSroot = "http://wiibox.xicp.io:19868/FRP/"



// axios.defaults.timeout = 10000 //10000的超时验证

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'



// request interceptor

axios.interceptors.request.use(

  config => {

    // do something before request is sent



    // if (store.getters.token) {

    //   // let each request carry token

    //   // ['X-Token'] is a custom headers key

    //   // please modify it according to the actual situation

    //   //config.headers['X-Token'] = getToken()

    //   config.headers.Authorization = `Bearer ` + getToken()

    // }

    config.url = config.url

    return config

  },

  error => {

    // do something with request error

    console.log(error) // for debug

    return Promise.reject(error)

  }

)



var DS = axios.create({

  // timeout: 5000,

  headers: { 'Content-Type': 'application/x-www-form-urlencoded'}

});

// request interceptor

DS.interceptors.request.use(

  config => {

    // do something before request is sent



    // if (store.getters.token) {

    //   config.headers.Authorization = `Bearer ` + getToken()

    // }

    config.url = DSroot + config.url

    return config

  },

  error => {

    // do something with request error

    console.log(error) // for debug

    return Promise.reject(error)

  }

)



// response interceptor

axios.interceptors.response.use(

  /**

   * If you want to get http information such as headers or status

   * Please return  response => response

   */

  response => {

    const res = response

    // if the custom code is not 20000, it is judged as an error.

    if (res.status !== 200) {

      Message({

        message: res.statusText || 'Error',

        type: 'error',

        duration: 5 * 1000

      })



    //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;

    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {

    //     // to re-login

    //     MessageBox.confirm(

    //       '你已退出登录，你可以取消留在当前页面或者重新登录。',

    //       '信息框',

    //       {

    //         confirmButtonText: '重新登录',

    //         cancelButtonText: '取消',

    //         type: 'warning'

    //       }

    //     ).then(() => {

    //     //   store.dispatch('user/resetToken').then(() => {

    //     //     location.reload()

    //     //   })

    //     })

    //   }

    //   return Promise.reject(new Error(res.message || 'Error'))

    } else {

      return res.data

    }

  },

  error => {

    console.log('err' + error) // for debug

    Message({

      message: error.message,

      type: 'error',

      duration: 5 * 1000

    })

    return Promise.reject(error)

  }

)



/**

 * 封装get方法

 * @param url

 * @param data

 * @returns {Promise}

 */



export function getJSON (url, params = {}) {

  for (let param in params) {

    switch (typeof params[param]) {

      case 'object':

        params[param] = JSON.stringify(params[param])

    }

  }

  return new Promise((resolve, reject) => {

    axios

      .get(url, {

        params: params

      })

      .then(response => {

        resolve(response)

      })

      .catch(err => {

        reject(err)

        console.warn(err)

      })

  })

}



export function getDS (url, params = {}) {

  for (let param in params) {

    switch (typeof params[param]) {

      case 'object':

        params[param] = JSON.stringify(params[param])

    }

  }

  return new Promise((resolve, reject) => {

    DS

      .get(url, {

        params: params

      })

      .then(response => {

        resolve(response)

      })

      .catch(err => {

        reject(err)

        console.warn(err)

      })

  })

}



/**

 * 封装post请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function post (url, data = {}) {

  return new Promise((resolve, reject) => {

    axios.post(url, data).then(

      response => {

        resolve(response)

      },

      err => {

        reject(err)

      }

    )

  })

}

export function DSpost (url, data = {}) {

  return new Promise((resolve, reject) => {

    DS.post(url, data).then(

      response => {

        resolve(response)

      },

      err => {

        reject(err)

      }

    )

  })

}



/**

 * 封装patch请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function patch (url, data = {}) {

  return new Promise((resolve, reject) => {

    axios.patch(url, data).then(

      response => {

        resolve(response)

      },

      err => {

        reject(err)

      }

    )

  })

}



/**

 * 封装put请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function put (url, data = {}) {

  return new Promise((resolve, reject) => {

    axios

      .put(url, data, { headers: { 'Content-Type': 'multipart/form-data' } })

      .then(

        response => {

          resolve(response)

        },

        err => {

          reject(err)

        }

      )

  })

}

//export default service


 bigScreen/src/utils/request2.js

New file
@@ -0,0 +1,232 @@
import axios from 'axios'

import { MessageBox, Message } from 'element-ui'

// import store from '@/store'

// import { getToken } from '@/utils/auth'

let root = "http://wiibox.xicp.io:8484/"

let DSroot = "http://wiibox.xicp.io:8484/"



// console.log(root)

// console.log(DSroot)

// console.log(process.env)



// axios.defaults.timeout = 10000 //10000的超时验证

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'



// request interceptor

axios.interceptors.request.use(

  config => {

    // do something before request is sent



    // if (store.getters.token) {

    //   // let each request carry token

    //   // ['X-Token'] is a custom headers key

    //   // please modify it according to the actual situation

    //   //config.headers['X-Token'] = getToken()

    //   config.headers.Authorization = `Bearer ` + getToken()

    // }

    config.url = root + config.url

    return config

  },

  error => {

    // do something with request error

    console.log(error) // for debug

    return Promise.reject(error)

  }

)



var DS = axios.create({

  // timeout: 5000,

  headers: { 'Content-Type': 'application/x-www-form-urlencoded'}

});

// request interceptor

DS.interceptors.request.use(

  config => {

    // do something before request is sent



    // if (store.getters.token) {

    //   config.headers.Authorization = `Bearer ` + getToken()

    // }

    config.url = DSroot + config.url

    return config

  },

  error => {

    // do something with request error

    console.log(error) // for debug

    return Promise.reject(error)

  }

)



// response interceptor

axios.interceptors.response.use(

  /**

   * If you want to get http information such as headers or status

   * Please return  response => response

   */

  response => {

    const res = response

    // if the custom code is not 20000, it is judged as an error.

    if (res.status !== 200) {

      Message({

        message: res.statusText || 'Error',

        type: 'error',

        duration: 5 * 1000

      })



    //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;

    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {

    //     // to re-login

    //     MessageBox.confirm(

    //       '你已退出登录，你可以取消留在当前页面或者重新登录。',

    //       '信息框',

    //       {

    //         confirmButtonText: '重新登录',

    //         cancelButtonText: '取消',

    //         type: 'warning'

    //       }

    //     ).then(() => {

    //     //   store.dispatch('user/resetToken').then(() => {

    //     //     location.reload()

    //     //   })

    //     })

    //   }

    //   return Promise.reject(new Error(res.message || 'Error'))

    } else {

      return res.data

    }

  },

  error => {

    console.log('err' + error) // for debug

    Message({

      message: error.message,

      type: 'error',

      duration: 5 * 1000

    })

    return Promise.reject(error)

  }

)



/**

 * 封装get方法

 * @param url

 * @param data

 * @returns {Promise}

 */



export function getJSON2 (url, params = {}) {

  for (let param in params) {

    switch (typeof params[param]) {

      case 'object':

        params[param] = JSON.stringify(params[param])

    }

  }

  return new Promise((resolve, reject) => {

    axios

      .get(url, {

        params: params

      })

      .then(response => {

        resolve(response)

      })

      .catch(err => {

        reject(err)

        console.warn(err)

      })

  })

}



export function getDS2 (url, params = {}) {

  for (let param in params) {

    switch (typeof params[param]) {

      case 'object':

        params[param] = JSON.stringify(params[param])

    }

  }

  return new Promise((resolve, reject) => {

    DS

      .get(url, {

        params: params

      })

      .then(response => {

        resolve(response)

      })

      .catch(err => {

        reject(err)

        console.warn(err)

      })

  })

}



/**

 * 封装post请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function post2 (url, data = {}) {

  return new Promise((resolve, reject) => {

    axios.post(url, data).then(

      response => {

        resolve(response)

      },

      err => {

        reject(err)

      }

    )

  })

}

export function DSpost2 (url, data = {}) {

  return new Promise((resolve, reject) => {

    DS.post(url, data).then(

      response => {

        resolve(response)

      },

      err => {

        reject(err)

      }

    )

  })

}



/**

 * 封装patch请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function patch2 (url, data = {}) {

  return new Promise((resolve, reject) => {

    axios.patch(url, data).then(

      response => {

        resolve(response)

      },

      err => {

        reject(err)

      }

    )

  })

}



/**

 * 封装put请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function put2 (url, data = {}) {

  return new Promise((resolve, reject) => {

    axios

      .put(url, data, { headers: { 'Content-Type': 'multipart/form-data' } })

      .then(

        response => {

          resolve(response)

        },

        err => {

          reject(err)

        }

      )

  })

}

//export default service


 bigScreen/src/utils/shshape.js

New file
Diff too large

 bigScreen/src/utils/try.json

New file
Diff too large

 bigScreen/src/views/assessment/index.vue

New file
@@ -0,0 +1,717 @@
<template>
  <div v-loading="loading">
    <div>
      <div class="rightTableTitle">
        <div>
          <span style="width: 50px">时间:</span>
          <el-date-picker
            v-model="leftList.time"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            style="width: 200px; margin-left: 10px"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 20px">
          <span style="width: 50px">频率:</span>
          <el-input
            v-model="leftList.frequency"
            placeholder="频率"
            style="width: 200px; margin-left: 10px"
            size="mini"
          ></el-input>
        </div>

        <div style="margin-left: 20px">
          <span style="width: 50px">执行人</span>
          <el-input
            v-model="selectionConditions.executor"
            placeholder="执行人"
            style="width: 200px; margin-left: 10px"
            size="mini"
          ></el-input>
        </div>

        <div style="margin-left: 20px">
          <span style="width: 50px">监测点</span>

          <el-input
            v-model="selectionConditions.monitoringPoint"
            placeholder="监测点"
            style="width: 200px; margin-left: 10px"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="rightTableTitle">
        <div>
          <span style="width: 50px">评估值状态</span>
          <el-radio-group
            v-model="selectionConditions.assessmentRadio"
            style="margin-left: 10px"
            size="mini"
          >
            <el-radio :label="1">显示全部</el-radio>
            <el-radio :label="2">已评估</el-radio>
            <el-radio :label="3">未评估</el-radio>
          </el-radio-group>
        </div>

        <div
          style="margin-left: 50px"
          v-if="selectionConditions.assessmentRadio == 2"
        >
          <span style="width: 50px">评估分值</span>
          <el-slider
            v-model="selectionConditions.assessmentValue"
            range
            show-stops
            :max="5"
            :min="1"
            style="
              width: 250px;
              margin-left: 10px;
              display: inline-block;
              vertical-align: top;
              margin-top: -10px;
            "
            size="mini"
          >
          </el-slider>
        </div>
      </div>
    </div>
    <div class="assessmentMain" :style="{ height: bHtight }">
      <div class="leftSel" :style="{ height: bHtight }">
        <v-tree
          :data="allArrData"
          show-line
          @select="select"
          ref="allTree"
        ></v-tree>
      </div>
      <div class="rightTable" :style="{ height: bHtight }">
        <div>
          <el-table
            :data="screenTableData"
            style="width: 96%; margin-left: 2%"
            :height="tHeight"
            :key="key"
            border
          >
            <el-table-column prop="frequency" label="频率"> </el-table-column>
            <el-table-column prop="username" label="执行人"> </el-table-column>
            <el-table-column prop="wdate" label="日期" sortable>
              <template slot-scope="scope">
                <div>
                  {{ formatDate(scope.row.wdate) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="whour" label="时钟"> </el-table-column>
            <el-table-column
              prop="assessvalue"
              label="评估分值"
              fixed="right"
              sortable
            >
              <template slot-scope="scope">
                <div style="display: flex">
                  <p
                    v-show="!scope.row.edit"
                    style="width: 30px; line-height: 48px"
                  >
                    {{ scope.row.assessvalue }}
                  </p>
                  <el-select
                    v-show="scope.row.edit"
                    v-model="scope.row.assessvalue"
                    placeholder="请选择评分"
                    style="width: 90%"
                  >
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="item in selScoreArr"
                      :key="item.id"
                    >
                    </el-option>
                  </el-select>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.edit ? '确认' : '评估'"
                    placement="top"
                    style="margin-left: 10px"
                  >
                    <i
                      style="line-height: 48px"
                      :class="{
                        'el-icon-edit': !scope.row.edit,
                        'el-icon-check': scope.row.edit,
                      }"
                      @click="sureScore(scope)"
                    ></i>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="monitorpoint_name" label="监测点" sortable>
            </el-table-column>
            <el-table-column prop="taskstatus" label="任务状态">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.taskstatus | formatStatus }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="update_time" label="任务完成时间" sortable>
              <template slot-scope="scope">
                <div>
                  {{ formatDateTime(scope.row.update_time) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="update_time" label="回放">
              <template slot-scope="scope">
                <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击回放"
                    placement="top"
                  >
                    <i class="el-icon-refresh-right" @click="rePlay(scope)"></i>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div>
        <el-dialog title="提示" :visible.sync="loginDialogVisible" width="50%">
          <el-form
            :model="loginForm"
            :rules="loginFormRule"
            ref="loginForm"
            label-width="80px"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="loginForm.password"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('loginForm')"
                >确定</el-button
              >
              <el-button @click="loginDialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>

    <el-dialog :visible.sync="socketPlay" width="50" @close="socketReplay">
      <video
        id="socketVidoPlay"
        ref="socketVidoPlay"
        src=""
        controls
        preload
        width="100%"
        height="300"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
export default {
  filters: {
    formatStatus(status) {
      if (status == 0) {
        return "未完成";
      } else if (status == 1) {
        return "完成";
      } else {
        return "--";
      }
    },
  },
  watch: {
    selectionConditions: {
      handler(n, o) {
        this.loading = true;
        let result;
        var objIsEmpty =
          this.selectionConditions.executor == "" &&
          this.selectionConditions.monitoringPoint == "" &&
          this.selectionConditions.state == "";
        if (objIsEmpty) {
          result = JSON.parse(JSON.stringify(this.showTableData));
        } else {
          let tempFilter = {};
          if (this.selectionConditions.executor) {
            tempFilter.username = this.selectionConditions.executor;
          }
          if (this.selectionConditions.monitoringPoint) {
            tempFilter.monitorpoint_name =
              this.selectionConditions.monitoringPoint;
          }
          if (this.selectionConditions.state) {
            tempFilter.taskstatus = this.selectionConditions.state;
          }

          result = this.showTableData.filter(
            //筛选
            (item) => {
              let flag = false;

              for (const key in tempFilter) {
                if (
                  item[key].toString().indexOf(tempFilter[key].toString()) >= 0
                ) {
                  flag = true;
                } else {
                  flag = false;
                  break;
                }
              }
              if (flag) {
                return item;
              }
            }
          );
        }

        let tmpScreenTableData = [];

        result.forEach((item) => {
          if (this.selectionConditions.assessmentRadio == 1) {
            tmpScreenTableData.push(item);
          } else if (this.selectionConditions.assessmentRadio == 2) {
            if (
              Number(item.assessvalue) >=
                this.selectionConditions.assessmentValue[0] &&
              Number(item.assessvalue) <=
                this.selectionConditions.assessmentValue[1]
            ) {
              tmpScreenTableData.push(item);
            }
          } else if (this.selectionConditions.assessmentRadio == 3) {
            if (item.assessvalue) {
            } else {
              tmpScreenTableData.push(item);
            }
          } else {
          }
        });
        tmpScreenTableData.forEach((item) => {
          item.edit = false;
        });
        this.screenTableData = tmpScreenTableData;
        this.loading = false
      },
      deep: true,
    },
    leftList: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.getInfo();
        }, 1000);
      },
      deep: true,
    },
  },
  data() {
    return {
      socketPlay: false,
      playVideo: null,
      timer: null,
      leftList: {
        frequency: "",
        time: [new Date(new Date().getTime() - 86400 * 7 * 1000), new Date()],
      },
      edit: false,
      searchInput: "",
      tHeight: "",
      bHtight: "",
      key: false,
      showTableData: [],
      selectionConditions: {
        executor: "",
        monitoringPoint: "",
        state: "",
        assessmentRadio: 1,
        assessmentValue: [1, 5],
      },
      allArrData: [],
      screenTableData: [],
      selScoreArr: [1, 2, 3, 4, 5, "无效"],
      assessmentDialog: false,
      selScoreValue: "",
      loading: false,
      loginDialogVisible: false,
      loginForm: {
        username: "",
        password: "",
      },
      loginFormRule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.tHeight = window.innerHeight - 120 + "px";
    this.bHtight = window.innerHeight - 100 + "px";
    this.getInfo();
    // let aaa = this.try()
    // console.log(aaa)
  },
  methods: {
    // try() {
    //   var p = new Promise(function (resolve, reject) {
    //     setTimeout(() => {
    //       resolve("qweqweqwe");
    //     }, 2000);
    //   });
    //   return p
    // },

    socketReplay() {
      if (this.playVideo) {
        this.playVideo.pause();
        this.playVideo = null;
      }
    },
    rePlay(scope) {
      if (scope.row.update_time) {
        let startTime = this.dateFormatter(
          new Date(new Date(scope.row.update_time).getTime())
        );
        let endTime = this.dateFormatter(
          new Date(new Date(scope.row.update_time).getTime() + 1000 * 60 * 180)
        );

        let param = new URLSearchParams();
        param.append("method", "mutipleReview");
        param.append("instruct", 1);
        param.append("playType", 1);
        param.append("hls", 1);
        param.append("key", 123456);
        param.append("monitorpointId", scope.row.monitorpoint_id);
        param.append("frequencyValue", scope.row.frequency);
        param.append("startTime", startTime);
        param.append("endTime", endTime);

        this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
          (res) => {
            if (res.success == "true") {
              this.socketPlay = true;

              this.playVideo = this.$refs.socketVidoPlay;
              if (Hls.isSupported()) {
                var hls = new Hls();
                hls.loadSource(res.url);
                hls.attachMedia(this.playVideo);
                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                  this.playVideo.play();
                });
              } else if (
                this.playVideo.canPlayType("application/vnd.apple.mpegurl")
              ) {
                this.playVideo.src = res.url;
                this.playVideo.addEventListener("loadedmetadata", function () {
                  this.playVideo.play();
                });
              }
            } else {
              this.$message.error(res.msg);
            }
          }
        );
      } else {
        this.$message.warning("尚未有回放");
      }
    },
    showLogin() {
      window.location.href = window.backstageURL + "ammonitor/#/passport/login";
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param = new URLSearchParams();
          param.append("bid", "login");
          param.append("userid", this.loginForm.username);
          param.append("psw", this.loginForm.password);
          this.$getJSON(
            window.backstageURL + "dataservice/getNoTokenData",
            param
          ).then((res) => {
            if (res.data.data.length == 0) {
              this.$message.error("用户名或者密码错误");
            } else {
              sessionStorage.setItem(
                "userName",
                JSON.stringify(res.data.data[0])
              );
              this.loginDialogVisible = false;
              this.isLogin = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    sureScore(scope) {
      this.loading = true;
      if (scope.row.edit) {
        if (localStorage.getItem("user") && localStorage.getItem("_token")) {
          let time = "";
          if (scope.row.update_time) {
            time = this.formatDateTime(new Date(scope.row.update_time));
          } else {
            time = this.formatDateTime(new Date());
          }

          let userInfo = JSON.parse(localStorage.getItem("user"));
          let userIdInfo = JSON.parse(localStorage.getItem("_token"));
          let param = new URLSearchParams();
          let ass = null;
          if (scope.row.assessvalue == "无效") {
            ass = 0;
          } else {
            ass = scope.row.assessvalue;
          }
          param.append("bid", "assessPress");
          param.append("frequency", scope.row.frequency);
          param.append("monitorpointId", scope.row.monitorpoint_id);
          param.append("assessvalue", ass);
          param.append("taskid", scope.row.id);
          param.append("userName", userInfo.name);
          param.append("userid", userIdInfo.account);

          param.append("recording_time", time);
          this.$getJSON(
            window.backstageURL + "dataservice/getNoTokenData",
            param
          ).then((res) => {
            if (res.code == 20000) {
              this.$message.success(res.data.data[0][0].messg);
            } else {
              this.$message.error(res.data.data[0][0].messg);
            }
          });
        } else {
          this.showLogin();
        }
      }
      scope.row.edit = !scope.row.edit;
      this.key = !this.key;
      this.loading = false;
    },
    formatDate(date) {
      if (date) {
        let time = new Date(date);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        return this.add0(year) + "-" + this.add0(month) + "-" + this.add0(date);
      } else {
        return "--";
      }
    },

    formatDateTime(date) {
      if (date) {
        let time = new Date(date);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return "--";
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },

    getInfo() {
      if (localStorage.getItem("user") && localStorage.getItem("_token")) {
        this.loading = true;
        let userInfo = JSON.parse(localStorage.getItem("user"));
        let userIdInfo = JSON.parse(localStorage.getItem("_token"));

        let param = {
          bid: "getTasklistA",
          userid: "admin",
          start_time: this.formatDateTime(this.leftList.time[0].getTime()),
          end_time: this.formatDateTime(this.leftList.time[1].getTime()),
          frequency: "",
          username: "",
          monitorpointname: "",
          assessvalue: "",
        };
        this.$getJSON(
          window.backstageURL + "dataservice/getNoTokenData",
          param
        ).then((res) => {
          let tmpArr = JSON.parse(JSON.stringify(res.data.data.schedules));

          tmpArr.forEach((item) => {
            item.title = item.name;
            item.isFir = 1;
            item.expanded = false;
            item.selected = false;
            item.disableCheckbox = false;
            item.children = item.subschedules;

            item.subschedules.forEach((secItem) => {
              secItem.isFir = 2;
              secItem.title = secItem.name;
              secItem.disableCheckbox = true;
              secItem.myThrArr = secItem.tasklist;
            });
          });
          this.allArrData = tmpArr;
          this.loading = false;
        });
      } else {
        this.showLogin();
      }
    },

    select(param) {
      if (param.length == 0) {
        this.screenTableData = [];
        this.key = !this.key;
        this.$message.warning("请点击选中节点");
      } else {
        this.loading = true;
        if (param[0].isFir == 2) {
          if (param[0].myThrArr.length == 0) {
            this.$message.warning("没有数据");
            this.screenTableData = [];
            this.key = !this.key;
            this.loading = false;
          } else {
            this.showTableData = param[0].myThrArr;
            this.screenTableData = JSON.parse(
              JSON.stringify(this.showTableData)
            );
            this.key = !this.key;
            this.loading = false;
          }
        } else {
          this.$message.warning("请选择子节点");
          this.screenTableData = [];
          this.key = !this.key;
          this.loading = false;
        }
        // this.loading = false;
      }
    },

    screenShowData(name) {
      let screenData = [];
      this.showTableData.forEach((item) => {});
    },

    dateFormatter(time) {
      if (time) {
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return 0;
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },
  },
};
</script>
<style lang="scss">
.assessmentMain {
  width: 96%;
  margin-left: 2%;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
}
.leftSel {
  width: 20%;
  text-align: left;
  overflow-y: scroll;
  border-right: 1px dashed #cccccc;
}
.rightTable {
  width: 80%;
}

.rightTableTitle {
  width: 96%;
  margin-left: 2%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

/deep/ .el-form-item__content {
  margin-left: 10px !important;
}
</style>

 bigScreen/src/views/collectionDetails/index.vue

New file
@@ -0,0 +1,452 @@
<template>
  <div class="app-container">
    <el-row>
      <el-col
        :span="24"
        style="height: 45px; text-align: left; margin-top: 20px"
      >
        <el-radio-group v-model="type" style="margin-right: 15px">
          <el-radio-button label="时间段"></el-radio-button>
          <el-radio-button label="单日"></el-radio-button>
          <el-radio-button label="单月"></el-radio-button>
          <el-radio-button label="年度"></el-radio-button>
        </el-radio-group>
        <span style="margin-right: 15px">
          <el-date-picker
            v-model="search.valueDay"
            :type="
              type == '时间段'
                ? 'date'
                : type == '单月'
                ? 'month'
                : type == '年度'
                ? 'year'
                : 'date'
            "
            :placeholder="
              type == '时间段'
                ? '选择日期'
                : type == '单月'
                ? '选择月份'
                : type == '年度'
                ? '选择年份'
                : '选择日期'
            "
            clearable
            style="width: 130px"
          ></el-date-picker>
        </span>
        <span v-show="type == '时间段'" style="margin-right: 15px">
          <el-time-select
            v-model="search.valueTime"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:30',
            }"
            placeholder="选择时间"
            clearable
            style="width: 130px"
          ></el-time-select>
        </span>
        <el-input
          placeholder="查询广播"
          suffix-icon="el-icon-service"
          v-model="search.search_fm"
          style="margin-right: 15px; width: 130px"
        ></el-input>
        <el-select
          v-model="determine"
          placeholder="请选择判定结果"
          @change="handleChange"
          style="margin-right: 15px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>

      <el-col :span="24" class="Device" style="margin-top: 30px">
        <el-table
          :data="tableData"
          :height="tableH"
          v-loading="loading"
          stripe
          size="small"
          class="detailTable"
        >
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="频率" prop="frequencyValue"></el-table-column>
          <el-table-column
            label="总扫描次数"
            prop="count_total"
          ></el-table-column>
          <el-table-column label="合法频率" width="180">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  percentage(scope.row.count_total, scope.row.count_status_0)
                "
                :text-inside="true"
                :stroke-width="15"
                :color="color"
                style="width: 120px; display: inline-block"
              ></el-progress>
              <small>{{ scope.row.count_status_0 }}</small>
            </template>
          </el-table-column>
          <el-table-column label="非法频点" width="180">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  percentage(scope.row.count_total, scope.row.count_status_1)
                "
                :text-inside="true"
                :stroke-width="15"
                :color="color"
                style="width: 120px; display: inline-block"
              ></el-progress>
              <small>{{ scope.row.count_status_1 }}</small>
            </template>
          </el-table-column>
          <el-table-column label="误报" width="180">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  percentage(scope.row.count_total, scope.row.count_status_2)
                "
                :text-inside="true"
                :stroke-width="15"
                :color="color"
                style="width: 120px; display: inline-block"
              ></el-progress>
              <small>{{ scope.row.count_status_2 }}</small>
            </template>
          </el-table-column>
          <el-table-column label="白名单" width="180">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  percentage(scope.row.count_total, scope.row.count_status_3)
                "
                :text-inside="true"
                :stroke-width="15"
                :color="color"
                style="width: 120px; display: inline-block"
              ></el-progress>
              <small>{{ scope.row.count_status_3 }}</small>
            </template>
          </el-table-column>
          <el-table-column label="异地频点" width="180">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  percentage(scope.row.count_total, scope.row.count_status_4)
                "
                :text-inside="true"
                :stroke-width="15"
                :color="color"
                style="width: 120px; display: inline-block"
              ></el-progress>
              <small>{{ scope.row.count_status_4 }}</small>
            </template>
          </el-table-column>
          <el-table-column label="疑似非法频点" width="180">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  percentage(scope.row.count_total, scope.row.count_status_5)
                "
                :text-inside="true"
                :stroke-width="15"
                :color="color"
                style="width: 120px; display: inline-block"
              ></el-progress>
              <small>{{ scope.row.count_status_5 }}</small>
            </template>
          </el-table-column>
          <el-table-column label="其他" width="180">
            <template slot-scope="scope">
              <el-progress
                :percentage="
                  percentage(scope.row.count_total, scope.row.count_status_6)
                "
                :text-inside="true"
                :stroke-width="15"
                :color="color"
                style="width: 120px; display: inline-block"
              ></el-progress>
              <small>{{ scope.row.count_status_6 }}</small>
            </template>
          </el-table-column>

          <el-table-column label="平均场强值" prop="avg_level">
          </el-table-column>

          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="lookAll(scope)"
                >查看全部</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" style="margin-top: 5px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { originalColor } from "@/utils/chartCustomer.js";

import data from "@/utils/other.js";

export default {
  watch: {
    search: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.getInfo();
        }, 300);
      },
      deep: true,
    },
    determine: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.getInfo();
        }, 500);
      },
      deep: true,
    },
    type: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.getInfo();
        }, 500);
      },
      deep: true,
    },
  },
  data() {
    return {
      timer: null,
      totalCount: 100,
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      tableH: null,
      otherAct: [{ item: "查看所有", id: "", type: "primary" }],
      type: "年度",
      options: [
        {
          value: "0",
          label: "合法频率",
        },
        {
          value: "1",
          label: "非法频点",
        },
        {
          value: "2",
          label: "误报",
        },
        {
          value: "3",
          label: "白名单",
        },
        {
          value: "4",
          label: "异地频点",
        },
        {
          value: "5",
          label: "疑似非法频点",
        },
        {
          value: "6",
          label: "其他",
        },
      ],

      queryParams: {
        page: 1,
        size: 10,
        VF: "",
        table: "t_fm_scan_timestamp",
      },
      determine: "",
      search: {
        valueTime: new Date().getHours() + ":00",
        valueDay: new Date(),
        search_fm: "",
      },
      loading: false,
      colors: originalColor,
      color: [
        { color: "#9D96F5", percentage: 10 },
        { color: "#FF9F7F", percentage: 20 },
        { color: "#FB7293", percentage: 30 },
        { color: "#37A2DA", percentage: 40 },
        { color: "#67E0E3", percentage: 50 },
        { color: "#9FE6B8", percentage: 60 },
        { color: "#E690D1", percentage: 80 },
        { color: "#E7BCF3", percentage: 100 },
      ],
    };
  },
  mounted() {
    this.tableH = window.innerHeight - 135 + "px";
    this.tableData = data.data;
    this.getInfo();
  },
  methods: {
    lookAll(scope) {
      this.$router.push({
        path: "/lookAllDetails",
        query: { frequency: scope.row.frequencyValue },
      });
    },
    getInfo() {

      this.loading = true;
      let typeValue = this.formatType(this.type);

      let dateValue =
        this.search.valueDay == ""
          ? "2021"
          : this.formatDate(this.search.valueDay);

      let tmeValue =
        this.type == "时间段" ? this.search.valueTime.split(":")[0] : "";
      let param = {
        bid: "getStatSepctrum",
        querymode: typeValue,
        timevalue1: dateValue,
        timevalue2: tmeValue,
        statuvalue_: this.determine == "" ? 5 : this.determine,
        frequency: this.search.search_fm,
        pageno: this.pageNo,
        pagesize: this.pageSize,
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        this.tableData = res.data.data[0];
        this.totalCount = Number(res.data.data[1][0].counter);
        this.loading = false
      });
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.getInfo();
    },
    handleCurrentChange(page) {
      this.pageNo = page;
      this.getInfo();
    },
    handleChange(value) {
      this.queryParams.determine = value;
    },
    handleSearch() {
      this.getInfo();
    },

    formatType(type) {
      if (type == "时间段") {
        return "time";
      } else if (type == "单日") {
        return "day";
      } else if (type == "单月") {
        return "month";
      } else if (type == "年度") {
        return "year";
      }
    },

    formatDate(date) {
      if (date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (this.type == "年度") {
          return year;
        } else if (this.type == "单月") {
          return year + "-" + this.add0(month);
        } else if (this.type == "单日" || this.type == "时间段") {
          return year + "-" + this.add0(month) + "-" + this.add0(day);
        } else {
          return "";
        }
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },

    percentage(total, item) {
      item = parseFloat(Number(item));
      total = parseFloat(Number(total));
      if (isNaN(item) || isNaN(total)) {
        return "-";
      }
      return Math.round((item / total) * 10000) / 100.0;
    },
    getTagType(text) {
      let color = "";
      for (let k in this.colors) {
        if (this.colors[k].name == text) {
          color = this.colors[k].color;
        }
      }
      if (color == "") {
        color = "#212121";
      }
      return color;
    },
  },
};
</script>
<style lang="scss">
.app-container {
  width: 96%;
  margin-left: 2%;
}
.detailTable .el-progress-bar__innerText {
  color: #000000 !important;
  font-size: 10px;
  padding: 0 5px;
}

small {
  margin-left: 5px;
}
</style>

 bigScreen/src/views/collectionDetails/lookAllDetails.vue

New file
@@ -0,0 +1,421 @@
<template>
  <div class="app-container">
    <el-row>
      <el-col
        :span="24"
        style="height: 45px; text-align: left; margin-top: 20px"
      >
        <el-radio-group v-model="type" style="margin-right: 15px">
          <el-radio-button label="时间段"></el-radio-button>
          <el-radio-button label="单日"></el-radio-button>
          <el-radio-button label="单月"></el-radio-button>
          <el-radio-button label="年度"></el-radio-button>
        </el-radio-group>
        <span style="margin-right: 15px">
          <el-date-picker
            v-model="search.valueDay"
            :type="
              type == '时间段'
                ? 'date'
                : type == '单月'
                ? 'month'
                : type == '年度'
                ? 'year'
                : 'date'
            "
            :placeholder="
              type == '时间段'
                ? '选择日期'
                : type == '单月'
                ? '选择月份'
                : type == '年度'
                ? '选择年份'
                : '选择日期'
            "
            clearable
            style="width: 130px"
          ></el-date-picker>
        </span>
        <span v-show="type == '时间段'" style="margin-right: 15px">
          <el-time-select
            v-model="search.valueTime"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:30',
            }"
            placeholder="选择时间"
            clearable
            style="width: 130px"
          ></el-time-select>
        </span>
        <el-select
          v-model="monitorpointName"
          placeholder="查询站点名字"
          @change="handleChange"
          clearable
          style="margin-right: 15px"
        >
          <el-option
            v-for="item in selMonitorpointName"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>

      <el-col :span="24" class="Device" style="margin-top: 30px">
        <el-table
          :data="tableData"
          :height="tableH"
          v-loading="loading"
          stripe
          size="small"
          class="detailTable"
        >
          <el-table-column label="频率" prop="frequencyValue"></el-table-column>
          <el-table-column
            label="站点名字"
            prop="monitorpointName"
          ></el-table-column>
          <el-table-column
            label="平均场强值"
            prop="avg_level"
          ></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="success"
                  @click="lookEcharts(scope)"
                  size="mini"
                  >信号强度</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" style="margin-top: 5px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog
      title="信号强度变化趋势"
      :visible.sync="echartVisible"
      width="80%"
      :close-on-click-modal="false"
    >
      <div ref="myChart" style="width: 100%; height: 400px"></div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  watch: {
    search: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.handleSearch();
        }, 300);
      },
      deep: true,
    },
    monitorpointName: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.handleSearch();
        }, 500);
      },
      deep: true,
    },
    type: {
      handler(n, o) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.handleSearch();
        }, 500);
      },
      deep: true,
    },
  },
  data() {
    return {
      seriesData: [],
      xAxisData: [],
      echartVisible: false,
      totalCount: 100,
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      tableH: null,
      otherAct: [{ item: "查看所有", id: "", type: "primary" }],
      type: "时间段",
      queryParams: {
        page: 1,
        size: 10,
        VF: "",
        table: "t_fm_scan_timestamp",
      },
      determine: "",
      search: {
        valueTime: "15:00",
        valueDay: "",
      },
      loading: false,
      selMonitorpointName: [],
      monitorpointName: "",
    };
  },
  mounted() {
    this.tableH = window.innerHeight - 135 + "px";
    let time = new Date();
    var hour = time.getHours();
    this.search.valueDay = time;
    this.search.valueTime = this.add0(hour) + ":00";
    this.initInfo();
  },
  methods: {
    add0(val) {
      return val < 10 ? "0" + val : val;
    },
    initInfo() {
      this.getData(1);
    },
    getData(isinit) {
      this.loading = true;
      let param = {};
      if (isinit == 1) {
        param = {
          bid: "getDetailSepctrum",
          pageno: 1,
          pagesize: 10,
          querymode: "day",
          monitorPointName: "",
          frequency: this.$route.query.frequency,
          timevalue2: "",
          timevalue1: "",
        };
      } else {
        let typeValue = this.formatType(this.type);
        let dateValue =
          this.search.valueDay == ""
            ? "2021"
            : this.formatDate(this.search.valueDay);
        let tmeValue =
          this.type == "时间段" ? this.search.valueTime.split(":")[0] : "";
        param = {
          bid: "getDetailSepctrum",
          querymode: typeValue,
          timevalue1: dateValue,
          timevalue2: tmeValue,
          monitorPointName: this.monitorpointName,
          frequency: this.$route.query.frequency,
          pageno: this.pageNo,
          pagesize: this.pageSize,
        };
      }
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        this.tableData = res.data.data[0];

        let selName = [];
        this.tableData.forEach((item) => {
          selName.push(item.monitorpointName);
        });
        this.selMonitorpointName = selName;
        this.totalCount = res.data.data[1][0].counter;
        this.loading = false;
      });
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.getData(0);
    },
    handleCurrentChange(page) {
      this.pageNo = page;
      this.getData(0);
    },
    handleSearch() {
      this.getData(0);
    },

    handleChange(value) {},

    formatType(type) {
      if (type == "时间段") {
        return "time";
      } else if (type == "单日") {
        return "day";
      } else if (type == "单月") {
        return "month";
      } else if (type == "年度") {
        return "year";
      }
    },

    formatDate(date) {
      if (date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (this.type == "年度") {
          return year;
        } else if (this.type == "单月") {
          return year + "-" + this.add0(month);
        } else if (this.type == "单日" || this.type == "时间段") {
          return year + "-" + this.add0(month) + "-" + this.add0(day);
        } else {
          return "";
        }
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },

    lookEcharts(scope) {
      this.loading = true
      let param = {
        bid: "getHistorySepctrum",
        frequency: scope.row.frequencyValue,
        monitorPointId: scope.row.monitorpointId,
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        res.data.data[0].forEach((item) => {
          this.seriesData.push(item.level);
          this.xAxisData.push(this.formatDateTime(item.time));
          this.echartVisible = true;
        });
        this.getEchartData();
      });
    },

    getEchartData() {
      this.$nextTick(function () {
        const chart = this.$refs.myChart;
        if (chart) {
          const myChart = this.$echarts.init(chart);
          const option = {
            grid: {
              top: "20px",

              left: "45px",

              right: "20px",

              bottom: "40px",

              backgroundColor: "#fff",
            },
            dataZoom: [
              {
                type: "slider", //滑动轴
                start: 0, //距离左侧0刻度的距离，1%
                end: 20, //距离左侧0刻度的距离，35%，相当于规定了滑动的范围
                bottom: -5,
              },
            ],
            xAxis: {
              type: "category",
              data: this.xAxisData,
              axisLabel: {
                interval: 0,
                rotate: 0,
                color: "#FFFFFF",
                fontSize: 10,
              },
            },
            yAxis: {
              type: "value",
              min: 0,
              max: 120,
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,225,255,0.5)",
                  width: 1,
                  type: "solid",
                },
              },
            },
            series: [
              {
                data: this.seriesData,
                type: "line",
                color: "#5A82FC",
              },
            ],
          };
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          this.loading = false;
        }
      });
    },

    formatDateTime(date) {
      if (date) {
        let time = new Date(date);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return "--";
      }
    },
  },
};
</script>
<style lang="scss">
.app-container {
  width: 96%;
  margin-left: 2%;
}
</style>

 bigScreen/src/views/components/bigScreenMap.vue

New file
@@ -0,0 +1,805 @@
<template>
  <div
    style="width: 100%; height: 100vh; position: relative"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-text="正在加载地图"
    element-loading-spinner="el-icon-loading"
    id="downMap"
  >
    <div id="allmap" ref="allmap" style="width: 100%; height: 100%"></div>
    <div v-draw class="drawTip" v-if="colorTips">
      <!-- <div style="display: flex; "> -->
      <i
        class="el-icon-close drawTipIcon"
        style="font-size: 10px"
        @click="closeTip"
      ></i>

      <div
        style="
          width: 40px;
          margin-top: 20px;
          padding-bottom: 20px;
          margin-left: 10px;
        "
      >
        <div
          v-for="(item, index) in colors"
          :key="index"
          :style="{
            height: '20px',
            width: '40px',
            backgroundColor: item.color,
          }"
        >
          <p
            v-if="index == 0"
            style="line-height: 20px; font-size:10px; font-weight: 600"
          >
            0分
          </p>
          <p
            v-if="index + 1 == colors.length"
            style="line-height: 20px; font-size: 10px; font-weight: 600"
          >
            5分
          </p>
        </div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>
<script>
import { MP } from "@/utils/map.js";
import styleJson from "@/utils/common_map.json";

import district_boundary from "@/utils/district_boundary";
import district_extent from "@/utils/district_extent";
import kriging_default_params from "@/utils/kriging_default_params";
import html2canvas from "html2canvas";

var kriging = require("@/utils/kriging.js");

export default {
  data() {
    return {
      colors: [],
      colorTips: false,
      PreviousPoint: null,
      launchPoint: null,
      nowType: 0,
      imgOverlay: null,
      loading: true,
      icon: [
        require("@/assets/1.png"),
        require("@/assets/2.png"),
        require("@/assets/3.png"),
        require("@/assets/4.png"),
        require("@/assets/5.png"),
        require("@/assets/wx.png"),
        require("@/assets/bad.png"),
        require("@/assets/fashedianDark.png"),
        require("@/assets/fashedianLight.jpg"),
      ],
      allPointData: null,
      allMaker: [],
      map: null,
      ak: "003EurM0nat1YfowgMZPIBpDtGjbGOri",
      areaList: [
        "黄浦区",
        "徐汇区",
        "长宁区",
        "静安区",
        "普陀区",
        "虹口区",
        "杨浦区",
        "闵行区",
        "宝山区",
        "嘉定区",
        "浦东新区",
        "金山区",
        "松江区",
        "青浦区",
        "奉贤区",
        "崇明区",
      ],
    };
  },
  watch: {
    nowType: {
      handler(n, o) {
        this.$emit("changeNowType", this.nowType);
      },
    },
    changeAssessValue: {
      handler(n, o) {
        if (this.changeAssessValue) {
          console.log("!!!");
          let Overlay = this.map.getOverlays();
          for (let i = 0; i < Overlay.length; i++) {
            if (Overlay[i].toString() == "[object Marker]") {
              if (this.changeAssessValue.id == Overlay[i].customData.id) {
                let iconName = "";

                if (this.changeAssessValue.assessvalue == 1) {
                  iconName = this.icon[0];
                } else if (this.changeAssessValue.assessvalue == 2) {
                  iconName = this.icon[1];
                } else if (this.changeAssessValue.assessvalue == 3) {
                  iconName = this.icon[2];
                } else if (this.changeAssessValue.assessvalue == 4) {
                  iconName = this.icon[3];
                } else if (this.changeAssessValue.assessvalue == 5) {
                  iconName = this.icon[4];
                } else {
                  iconName = this.icon[5];
                }

                let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
                var marker = new BMap.Marker(Overlay[i].point, { icon: icon });
                this.map.removeOverlay(Overlay[i]);
                this.map.addOverlay(marker);

                //判断上个个坐标是否记录，用于第一次点击
                if (this.PreviousPoint != null) {
                  //如果上一个坐标不为空，移除跳动动作，null为移除
                  this.PreviousPoint.setAnimation(null);
                }
                //记录当前点击的坐标
                this.PreviousPoint = marker;
                //当前左边开始跳动
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
              }
            }
          }
        }
      },
      deep: true,
    },
    frequencyValue: {
      handler(n, o) {
        if (this.nowType == 0) {
          if (this.allPointData) {
            this.dropCanvas();
            this.getInfo();
          }
        } else {
          this.dropCanvas();
          this.getInfo();
          this.addCanvas();
        }
      },
      deep: true,
      immediate: true,
    },
    jumpPointId: {
      handler(n, o) {
        let Overlay = this.map.getOverlays();
        for (let i = 0; i < Overlay.length; i++) {
          if (Overlay[i].toString() == "[object Marker]") {
            if (this.jumpPointId == Overlay[i].customData.id) {
              //判断上个个坐标是否记录，用于第一次点击
              if (this.PreviousPoint != null) {
                //如果上一个坐标不为空，移除跳动动作，null为移除
                this.PreviousPoint.setAnimation(null);
              }
              //记录当前点击的坐标
              this.PreviousPoint = Overlay[i];
              //当前左边开始跳动
              Overlay[i].setAnimation(BMAP_ANIMATION_BOUNCE);
            } else {
            }
          }
        }
      },
    },
    isChage: {
      handler(n, o) {
        if (this.nowType == 0) {
          if (this.allPointData) {
            this.dropCanvas();

            this.getInfo();
          }
        } else {
          this.dropCanvas();
          this.getInfo();

          this.addCanvas();
        }
      },
    },
    timeValue: {
      handler(n, o) {
        console.log(this.timeValue);
        if (this.nowType == 0) {
          // if (this.allPointData) {
          this.dropCanvas();
          this.getInfo();
          // }
        } else {
          this.dropCanvas();
          this.getInfo();
          this.addCanvas();
        }
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        if (this.nowType == 0) {
          if (this.allPointData) {
            this.dropCanvas();
            this.getInfo();
          }
        } else {
          this.dropCanvas();
          this.getInfo();
          this.addCanvas();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    changeAssessValue: {
      type: Object,
      default: {},
    },
    frequencyValue: {
      type: Number,
      default: 1557,
    },
    timeValue: {
      type: String,
      default: "",
    },
    switchValue: {
      type: Number,
      default: 1,
    },
    isChage: {
      type: Boolean,
    },
    jumpPointId: {
      type: Number,
    },
  },
  mounted() {
    this.oldMapInit();
  },
  methods: {
    closeTip() {
      this.colorTips = false;
    },
    getColors() {
      let userid = JSON.parse(localStorage.getItem("user")).name;
      let param = {
        bid: "getCoverColors",
        userid: userid,
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        console.log();
        let getColor = JSON.parse(res.data.data[0][0].colors);
        this.colors = [];
        // kriging_default_params.colors = getColor;
        getColor.forEach((item) => {
          let one = { color: item };
          this.colors.push(one);
          this.colorTips = true;
        });
        console.log(this.colors);
      });
    },
    tryDown() {
      html2canvas(document.getElementById("downMap"), {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        //截图用img元素承装，显示在页面的上
        let img = new Image();
        img.src = canvas.toDataURL("image/jpeg"); // toDataURL :图片格式转成 base64
        //如果你需要下载截图，可以使用a标签进行下载
        let a = document.createElement("a");
        a.href = canvas.toDataURL("image/jpeg");
        a.download = "test";
        a.click();
      });
    },
    dropCanvas() {
      this.nowType = 0;
      this.map.removeOverlay(this.imgOverlay);
      this.colors = [];
      this.colorTips = false;
    },
    addCanvas() {
      console.log("a");
      this.loading = true;
      this.nowType = 1;
      let param = new URLSearchParams();
      if (this.switchValue == 1) {
        param.append("bid", "getAssessValue");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getAssessValue_auto");
      }
      param.append("frequencystr", this.frequencyValue);
      param.append("wdate", this.timeValue.split(" ")[0]);
      param.append("whour", this.timeValue.split(" ")[1].split(":")[0]);

      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == 20000) {
          let allData = JSON.parse(JSON.stringify(res.data.data[0]));
          let lngs = [];
          let lats = [];
          let values = [];
          if (allData.length == 0) {
            // this.map.removeOverlay(this.imgOverlay);ß
            this.$message.warning("暂无数据加载");
            this.loading = false;
          } else {
            allData.forEach((item) => {
              lngs.push(Number(item.regionLong));
              lats.push(Number(item.regionLat));
              values.push(Number(item.paramvalue));
            });
            let vvv0 = [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0, 0, 0, 0,
            ];
            let vvv1 = [
              0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
              1, 1, 1, 1,
            ];
            let vvv2 = [
              0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
              2, 2, 2, 2,
            ];
            let vvv3 = [
              0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
              3, 3, 3, 3,
            ];
            let vvv4 = [
              0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
              4, 4, 4, 4,
            ];
            let vvv5 = [
              5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
              5, 5, 5, 5,
            ];

            let vvv = [
              2, 2, 1, 2, 2, 2, 4, 1, 3, 2, 1, 2, 1, 1, 3, 1, 1, 1, 2, 5, 3, 1,
              3, 1, 1, 2, 4,
            ];
            // let vvv5 = [0,1,4,5,5,3,1,3,4,7,8,9,0,3,1,3,4]
            // let vvv6 = [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6]
            console.log(values);
            this.addGridCanvasOverlay(
              values,
              lngs,
              lats,
              district_boundary,
              district_extent,
              400
            );
            console.log("c");
          }
        } else {
          console.log("b");
          this.loading = false;
        }
      });
    },
    addGridCanvasOverlay(
      values,
      lngs,
      lats,
      area_boundary,
      area_extent,
      count
    ) {
      console.log("d");
      let letiogram = kriging.train(
        values,
        lngs,
        lats,
        kriging_default_params.krigingModel,
        kriging_default_params.krigingSigma2,
        kriging_default_params.krigingAlpha
      );

      let grid = kriging.grid(
        area_boundary,
        letiogram,
        (area_extent[2] - area_extent[0]) / count
      );

      var tmpCanvas = document.createElement("canvas");
      tmpCanvas.width = 500;
      tmpCanvas.height = 500;
      kriging.plot(
        tmpCanvas,
        grid,
        [area_extent[0], area_extent[2]],
        [area_extent[1], area_extent[3]],
        kriging_default_params.colors
      );

      var pStart = new BMap.Point(area_extent[0], area_extent[1]);
      var pEnd = new BMap.Point(area_extent[2], area_extent[3]);

      var delta_up = 1.2;
      var bounds = new BMap.Bounds(
        new BMap.Point(pStart.lng, Number(pEnd.lat) + delta_up),
        new BMap.Point(pEnd.lng, Number(pStart.lat) + delta_up)
      );

      // if (this.imgOverlay) {
      //   this.map.removeOverlay(this.imgOverlay);
      // }

      this.imgOverlay = null;

      this.imgOverlay = new BMap.GroundOverlay(bounds, {
        imageURL: tmpCanvas.toDataURL(), //tmpCanvas.toDataURL("image/png"),
        opacity: 0.75,
      });

      this.map.addOverlay(this.imgOverlay);
      console.log("f");

      this.loading = false;
      this.getColors();
      // setTimeout(() => {
      //   this.colorTips = true;
      // }, 1000);
    },
    oldMapInit() {
      this.$nextTick(() => {
        const _this = this;
        MP(_this.ak).then((BMap) => {
          _this.mapInit();
        });
      });
    },

    changeMapInit() {
      if (this.nowType == 0) {
        this.addCanvas();
      } else {
        this.dropCanvas();
      }
    },
    changeColor() {
      this.dropCanvas();
      this.addCanvas();
    },
    getInfo() {
            console.log("qqq")

      this.loading = true;
      console.log(localStorage.getItem("user"))
      let userid = JSON.parse(localStorage.getItem("user")).name;
      console.log(userid)

      let param = new URLSearchParams();
      if (this.switchValue == 1) {
        param.append("bid", "getPointData");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getPointData_auto");
      }

      // console.log(this.frequencyValue);
      console.log(this.timeValue);
      // console.log(this.timeValue);
      // console.log(this.timeValue);
      // console.log(this.timeValue);
      // console.log(this.timeValue.split(" ")[0]);
      // console.log(userid);
      console.log(
        this.add0(Number(this.timeValue.split(" ")[1].split(":")[0]))
      );

      param.append("frequency", this.frequencyValue);
      param.append("wdate", this.timeValue.split(" ")[0]);
      param.append(
        "whour",
        this.add0(Number(this.timeValue.split(" ")[1].split(":")[0]))
      );
      param.append("userid", userid);

      console.log(param);
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        console.log(res);
        this.allPointData = JSON.parse(JSON.stringify(res.data.data[0]));

        this.allPointData.forEach((item) => {
          if (this.switchValue == 1) {
            item.pressvalue = item.assessvalue;
          }
          if (this.switchValue == 0) {
            item.pressvalue = item.autopressvalue;
          }
        });
        console.log(this.allPointData);
        let param1 = new URLSearchParams();
        param1.append("bid", "getLauncher");
        this.$getJSON(
          window.backstageURL + "dataservice/getNoTokenData",
          param1
        ).then((res1) => {
          console.log(res1);
          this.launchPoint = JSON.parse(JSON.stringify(res1.data.data));
          this.getMarker();
        });
      });
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },

    /**
     * 初始化地图
     */
    mapInit() {
      console.log("222")
      this.loading = true;
      this.map = new BMap.Map("allmap");
      let point = new BMap.Point(121.479965, 31.234941);
      this.map.centerAndZoom(point, 11);
      this.map.enableScrollWheelZoom(true);
      //个性化地图
      this.map.setMapStyleV2({ styleJson: styleJson });

      let that = this;

      //行政区划
      for (let k in this.areaList) {
        let bdary = new BMap.Boundary();
        bdary.get("上海市" + this.areaList[k], function (rs) {
          var count = rs.boundaries.length;
          if (count === 0) {
            return;
          }
          var pointArray = [];
          for (var i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 2,
              strokeColor: "#409EFF",
              fillColor: "rgba(255,255,255,0)",
            }); //建立多边形覆盖物
            that.map.addOverlay(ply);
            ply.disableMassClear(); //禁止删除
            pointArray = pointArray.concat(ply.getPath());
          }
        });
      }
      this.dropCanvas();
      this.getInfo();
    },

    getMarker() {
      console.log("1");
      // this.map.clearOverlays();

      let pointArray = new Array();
      this.allMaker = [];
      console.log(this.allPointData);
      for (let i in this.allPointData) {
        if (
          this.isFloat(this.allPointData[i].regionLong) &&
          this.isFloat(this.allPointData[i].regionLat)
        ) {
          let iconName = "";
          if (this.allPointData[i].status == 1) {
            if (this.allPointData[i].pressvalue == 1) {
              iconName = this.icon[0];
            } else if (this.allPointData[i].pressvalue == 2) {
              iconName = this.icon[1];
            } else if (this.allPointData[i].pressvalue == 3) {
              iconName = this.icon[2];
            } else if (this.allPointData[i].pressvalue == 4) {
              iconName = this.icon[3];
            } else if (this.allPointData[i].pressvalue == 5) {
              iconName = this.icon[4];
            } else {
              iconName = this.icon[5];
            }
          } else {
            iconName = this.icon[6];
          }
          let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
          let point = new BMap.Point(
            this.allPointData[i].regionLong,
            this.allPointData[i].regionLat
          );
          pointArray.push(point);
          let marker = new BMap.Marker(point, { icon: icon });

          marker.customData = { id: this.allPointData[i].monitorpointId };

          let lableStr = this.allPointData[i].rssi
            ? "+" + this.allPointData[i].rssi
            : "--";

          let label = new BMap.Label(lableStr, {
            offset: new BMap.Size(10, -25),
          });
          label.setStyle({
            border: "none",
            background: "none",
            color: "red",
            padding: "3px 5px",
            fontSize: "14px",
          });
          marker.setLabel(label);

          this.allMaker.push({
            id: this.allPointData[i].monitorpointId,
            marker: marker,
          });
          this.map.addOverlay(marker);
          this.addActionHandler(this.allPointData[i], marker);
          console.log("2");
        }
      }
      for (let i in this.launchPoint) {
        if (
          this.isFloat(this.launchPoint[i].regionLong) &&
          this.isFloat(this.launchPoint[i].regionLat)
        ) {
          let iconName = "";
          if (this.launchPoint[i].status == 1) {
            iconName = this.icon[8];
          } else {
            iconName = this.icon[7];
          }
          let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
          let point = new BMap.Point(
            this.launchPoint[i].regionLong,
            this.launchPoint[i].regionLat
          );
          pointArray.push(point);
          let marker = new BMap.Marker(point, { icon: icon });

          this.allMaker.push({
            id: this.allPointData[i].monitorpointId,
            marker: marker,
          });
          this.map.addOverlay(marker);
          console.log("3");
        }
      }

      console.log("4");
      this.map.setViewport(pointArray, {
        margins: [10, 10, 10, 10],
        zoomFactor: 0,
      }); //调整视野范围
      console.log("5");
      this.loading = false;
    },

    addActionHandler(content, marker) {
      let that = this;
      marker.addEventListener("click", function (e) {
        that.$emit("showInfo", content);
      });
    },

    isFloat(string) {
      return /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/.test(
        string
      );
    },

    //改变状态
    changePointState(data) {
      let Overlay = this.map.getOverlays();
      for (let i = 0; i < Overlay.length; i++) {
        if (Overlay[i].toString() == "[object Marker]") {
          // console.log(Overlay[i].customData)

          data.forEach((item) => {
            if (Overlay[i].customData) {
              if (item.monitorpointId == Overlay[i].customData.id) {
                // console.log(item);
                // console.log(Overlay[i].customData.id);
                // console.log(this.allPointData);
                let iconName = "";

                if (item.status == 0) {
                  iconName = this.icon[6];
                }
                if (item.status == 1) {
                  this.allPointData.forEach((i) => {
                    if (i.monitorpointId == item.monitorpointId) {
                      if (i.assessvalue == 1) {
                        iconName = this.icon[0];
                      } else if (i.assessvalue == 2) {
                        iconName = this.icon[1];
                      } else if (i.assessvalue == 3) {
                        iconName = this.icon[2];
                      } else if (i.assessvalue == 4) {
                        iconName = this.icon[3];
                      } else if (i.assessvalue == 5) {
                        iconName = this.icon[4];
                      } else {
                        iconName = this.icon[5];
                      }
                    }
                  });
                }
                console.log(iconName);

                let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
                var marker = new BMap.Marker(Overlay[i].point, { icon: icon });
                this.map.removeOverlay(Overlay[i]);
                this.map.addOverlay(marker);

                // //判断上个个坐标是否记录，用于第一次点击
                // if (this.PreviousPoint != null) {
                //   //如果上一个坐标不为空，移除跳动动作，null为移除
                //   this.PreviousPoint.setAnimation(null);
                // }
                // //记录当前点击的坐标
                // this.PreviousPoint = marker;
                // //当前左边开始跳动
                // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
              }
            }
          });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .BMap_Marker .BMap_noprint {
  z-index: 9999 !important;
}

.drawTip {
  z-index: 9000 !important;
  // overflow: scroll !important;
  position: fixed !important;
  top: 150px;
  // height: 300px !important;
  width: 60px !important;
  background-color: white !important;
  border-radius: 5px;
  left: 73%;
  // scrollbar-width: none; /* firefox */
  // -ms-overflow-style: none; /* IE 10+ */
  // overflow-x: hidden;
  // overflow-y: auto;

  .drawTipIcon {
    position: absolute;
    right: 5px;
    top: 5px;
  }
}

// .drawTip::-webkit-scrollbar {
//   display: none; /* Chrome Safari */
// }
</style>

 bigScreen/src/views/components/blanketCoverage.vue

New file
@@ -0,0 +1,266 @@
<template>
  <div
    style="width: 96%; margin-left: 2%"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-text="正在加载数据"
    element-loading-spinner="el-icon-loading"
  >
    <div
      ref="chart"
      :style="{ width: '100%', height: chartHeight + 'px' }"
    ></div>
  </div>
</template>
<script>
export default {
  watch: {
    frequencyValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    timeValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    frequencyValue: {
      type: Number,
      default: 1557,
    },
    timeValue: {
      type: String,
      default: "2021-06-30 17:00",
    },
    switchValue: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      loading: true,
      chartWidth: document.body.clientWidth * 0.25 * 0.96, // 宽
      chartHeight: (document.body.clientHeight - 85) * 0.3 - 30, // 高
      legendData: [
        {
          name: "549MHz",
          icon: "circle",
          textStyle: {
            color: "#5A82FC",
            fontSize: 10,
          },
        },
        {
          name: "738MHz",
          icon: "circle",
          textStyle: {
            color: "#4DD6B6",
            fontSize: 10,
          },
        },
        {
          name: "1445MHz",
          icon: "circle",
          textStyle: {
            color: "#C99423",
            fontSize: 10,
          },
        },
      ],
      xAxisData: [
        "0h",
        "1h",
        "2h",
        "3h",
        "4h",
        "5h",
        "6h",
        "7h",
        "8h",
        "9h",
        "10h",
        "11h",
        "12h",
        "13h",
        "14h",
      ],
      seriesData: [
        {
          name: "549MHz",
          data: [15, 23, 24, 18, 35, 47, 34, 15, 23, 24, 18, 35, 47, 34],
          type: "line",
          color: "#5A82FC",
        },
        {
          name: "738MHz",
          data: [99, 12, 67, 15, 90, 34, 56, 99, 12, 67, 15, 90, 34, 56],
          type: "line",
          color: "#4DD6B6",
        },
        {
          name: "1445MHz",
          data: [1, 11, 24, 92, 46, 54, 12, 1, 11, 24, 92, 46, 54, 12],
          type: "line",
          color: "#C99423",
        },
      ],
      colorArray: ["#5A82FC", "#4DD6B6", "#C99423"],
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.loading = true;
      let param = new URLSearchParams();

      if (this.switchValue == 1) {
        param.append("bid", "getFreqsCover");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getFreqsCover_auto");
      }
      param.append("pressMode", this.switchValue);

      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData/",
        param
      ).then((res) => {
        if (res.code == "20000") {
          let sourceData = res.data.data;
          this.seriesData = [];
          this.legendData = [];

          for (let i = 0; i < sourceData.length - 1; i++) {
            let oneLegendData = { textStyle: {} };
            if (sourceData[i].length != 0) {
              oneLegendData.name = sourceData[i][0]._frequency;
              oneLegendData.icon = "circle";
              oneLegendData.textStyle.fontSize = 10;
              oneLegendData.textStyle.color = "white";
              this.legendData.push(oneLegendData);

              let oneSeriesData = { data: [] };
              oneSeriesData.name = sourceData[i][0]._frequency;
              oneSeriesData.type = "line";
              for (let j = 0; j < 15; j++) {
                let coverrate = sourceData[i][j].coverrate.substring(
                  0,
                  sourceData[i][j].coverrate.length - 1
                );
                oneSeriesData.data.push(coverrate);
              }
              this.seriesData.push(oneSeriesData);
            }
          }
          this.getEchartData();
        }
      });
    },
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          color: this.colorArray,
          grid: {
            top: "20px",

            left: "45px",

            right: "20px",

            bottom: "40px",

            backgroundColor: "#fff",
          },
          xAxis: {
            type: "category",
            data: this.xAxisData,
            axisLabel: {
              interval: 0,
              rotate: 0,
              color: "#FFFFFF",
              fontSize: 10,
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: function (value) {
                var texts = [];
                if (value == 0) {
                  texts.push("0%");
                } else if (value <= 10) {
                  texts.push("10%");
                } else if (value <= 20) {
                  texts.push("20%");
                } else if (value <= 40) {
                  texts.push("40%");
                } else if (value <= 50) {
                  texts.push("50%");
                } else if (value <= 60) {
                  texts.push("60%");
                } else if (value <= 70) {
                  texts.push("70%");
                } else if (value <= 80) {
                  texts.push("80%");
                } else if (value <= 90) {
                  texts.push("90%");
                } else {
                  texts.push("100%");
                }
                return texts;
              },
              interval: 0,
              rotate: 0,
              color: "#FFFFFF",
              fontSize: 10,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,225,255,0.5)",
                width: 1,
                type: "solid",
              },
            },
          },
          legend: {
            itemHeight: 7,
            right: "30px",
            top: "0px",
            data: this.legendData,
          },
          series: this.seriesData,
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

 bigScreen/src/views/components/frequencyAnalysis.vue

New file
@@ -0,0 +1,130 @@
<template>
  <div ref="mainBlcok">
    <el-table
      :data="tableData"
      style="width: 96%; margin-left: 2%; margin-top: 20px、"
      border
      :max-height="bodyHeight - 40"
      :header-cell-style="handerMethod"
      :row-style="{
        backgroundColor: 'transparent',
        color: '#FFF',
        height: '30px',
      }"
      :cell-style="{ padding: '0' }"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="正在加载数据"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column prop="frequency" label="频率"> </el-table-column>
      <el-table-column prop="coverrate" label="压制覆盖率"> </el-table-column>
      <el-table-column prop="area" label="区县"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  watch: {
    frequencyValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    timeValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    bodyHeight: {
      type: Number,
      default: 0,
    },
    frequencyValue: {
      type: Number,
      default: 1557,
    },
    timeValue: {
      type: String,
      default: "2021-06-30 17:00",
    },
    switchValue: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      tableData: [],
      loading: true,
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.loading = true;
      let param = new URLSearchParams();
      if (this.switchValue == 1) {
        param.append("bid", "getCoverByArea");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getCoverByArea_auto");
      }
      param.append("frequencystr", this.frequencyValue);
      param.append("pressMode", this.switchValue);
      param.append("wdate", this.timeValue.split(" ")[0]);
      param.append("whour", this.timeValue.split(" ")[1].split(":")[0]);

      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == "20000") {
          this.tableData = res.data.data;
          this.loading = false;
        }
      });
    },

    handerMethod({ rowIndex }) {
      return {
        backgroundColor: "rgba(90,130, 252,1)",
        color: "#FFF",
        height: "30px",
        padding: "0",
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.el-table th,
.el-table tr {
  background-color: transparent;
}

/deep/ .el-table .el-table__body tr:hover td {
  background-color: rgba(77, 214, 182, 1) !important;
  color: white;
}
</style>

 bigScreen/src/views/components/frequencyOperationDiagram.vue

New file
@@ -0,0 +1,324 @@
<template>
  <div>
    <div
      style="width: 96%; margin-left: 2%"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="正在加载数据"
      element-loading-spinner="el-icon-loading"
    >
      <div
        ref="chart"
        :style="{ width: chartWidth + 'px', height: chartHeight + 'px' }"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  watch: {
    frequencyValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    timeValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    frequencyValue: {
      type: Number,
      default: 1557,
    },
    timeValue: {
      type: String,
      default: "2021-06-30 17:00",
    },
    switchValue: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      loading: true,
      chartWidth: document.body.clientWidth * 0.3 * 0.96, // 宽
      chartHeight: (document.body.clientHeight - 85) * 0.4 - 30, // 高
      hoursData: [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
      ],
      daysData: [
        "6/30",
        "6/29",
        "6/28",
        "6/27",
        "6/26",
        "6/25",
        "6/24",
        "6/23",
        "6/22",
        "6/21",
        "6/20",
        "6/19",
        "6/18",
        "6/17",
        "6/16",
      ],
      allData: [],
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.loading = true;
      let param = new URLSearchParams();
      if (this.switchValue == 1) {
        param.append("bid", "getFreqRuntime");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getFreqRuntime_auto");
      }
      param.append("frequencystr", this.frequencyValue);
      param.append("pressMode", this.switchValue);

      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == "20000") {
          let sourceData = res.data.data[0];
          let name = "wdate";
          let sorted = this.groupBy(sourceData, name);
          this.daysData = [];
          this.allData = [];
          sorted.forEach((item, index) => {
            let date = this.formatDateTime(item[0].wdate);
            this.daysData.push(date);
            item.forEach((childItem, childIndex) => {
              let oneData = [
                index,
                Number(childItem.whour),
                childItem.paramvalue,
              ];
              this.allData.push(oneData);
            });
          });
          this.getEchartData();
        }
      });
    },
    formatDateTime(date) {
      if (date) {
        let time = new Date(date);
        var month = time.getMonth() + 1;
        var date = time.getDate();
        return this.add0(month) + "-" + this.add0(date);
      } else {
        return "--";
      }
    },
    add0(val) {
      return val < 10 ? "0" + val : val;
    },
    groupBy(array, id) {
      let groups = {};
      array.forEach(function (o) {
        let group = JSON.stringify(o[id]);
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.values(groups);
    },
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        var hours = this.hoursData;
        var days = this.daysData;
        var data = this.allData;

        data = data.map(function (item) {
          return [item[1], item[0], item[2] || "-"];
        });

        const option = {
          tooltip: {
            position: "top",
          },
          grid: {
            top: "20px",
            left: "35px",
            right: "20px",
            bottom: "60px",
            backgroundColor: "#fff",
          },
          dataZoom: [
            {
              type: "slider",
              show: true,
              yAxisIndex: [0],
              left: "93%",
              start: 0, //数据窗口范围的起始百分比
              end: 40,
              zoomLock: false,
              zoomOnMouseWheel: false,
            },
          ],
          xAxis: {
            type: "category",
            data: hours,
            splitArea: {
              show: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 0,
              color: "#FFFFFF",
              fontSize: 10,
            },
          },
          yAxis: {
            type: "category",
            data: days,
            splitArea: {
              show: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 0,
              color: "#FFFFFF",
              fontSize: 10,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,225,255,0.5)",
                width: 1,
                type: "solid",
              },
            },
          },
          visualMap: {
            min: 20,
            max: 50,
            calculable: true,
            orient: "horizontal",
            left: "center",
            bottom: "15%",
            show: false,
            inRange: {
              color: ["#cccccc", "#6A5ACD", "#32CD32"],
            },
          },
          series: [
            {
              name: "数量",
              type: "heatmap",
              data: data,
              label: {
                show: true,
                color: "#FFFFFF",
                fontSize: 8,
                label: {
                  normal: {
                    show: true,
                    formatter: function (params) {
                      if (params >= 0 && params < 20) {
                        return "{a|" + params + "}";
                      } else if (params >= 20 && params < 50) {
                        return "{b|" + params + "}";
                      } else {
                        return "{c|" + params + "}";
                      }
                    },
                    rich: {
                      a: {
                        color: "#cccccc",
                      },
                      b: {
                        color: "#32CD32",
                      },
                      c: {
                        color: "#6A5ACD",
                      },
                    },
                  },
                },
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
        this.loading = false;
      }
    },

    getVirtulData(year) {
      year = year || "2017";
      var date = +this.$echarts.number.parseDate(year + "-01-01");
      var end = +this.$echarts.number.parseDate(year + "-12-31");
      var dayTime = 3600 * 24 * 1000;
      var data = [];
      for (var time = date; time <= end; time += dayTime) {
        data.push([
          this.$echarts.format.formatTime("yyyy-MM-dd", time),
          Math.floor(Math.random() * 10000),
        ]);
      }

      return data;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

 bigScreen/src/views/components/leftBlock.vue

New file
@@ -0,0 +1,339 @@
<template>
  <div>
    <div style="height: 100%" v-if="radioValue == '1'">
      <div style="height: 59%" ref="frequencyAnalysis">
        <div class="title">
          <el-image :src="diamondSrc" style="" class="imgSty"></el-image>
          <p>区域覆盖率</p>
        </div>
        <frequencyAnalysis
          :bodyHeight="frequencyAnalysisHeight"
          :frequencyValue="frequencyValue"
          :timeValue="timeValue"
          :switchValue="switchValue"
        ></frequencyAnalysis>
      </div>

      <div style="height: 39%; overflow: hidden; margin-top: 2%">
        <div class="title">
          <el-image :src="diamondSrc" style="" class="imgSty"></el-image>
          <p>频率运行图</p>
        </div>
        <frequencyOperationDiagram
          :frequencyValue="frequencyValue"
          :timeValue="timeValue"
          :switchValue="switchValue"
        ></frequencyOperationDiagram>
      </div>
    </div>

    <div
      style="height: 100%"
      v-if="radioValue == '0'"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-spinner="el-icon-loading"
    >
      <div class="leftMonitor">
        <el-row>
          <el-col :span="8">
            <div class="leftMonitorLine">
              <p>合法电台</p>

              <div class="leftMonitorLineButton" id="legitimateArr">
                <draggable
                  v-model="legitimateArr"
                  group="site"
                  animation="300"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  @start="onStart"
                  @end="onEnd"
                  @onadd="onadd"
                >
                  <transition-group>
                    <div
                      v-for="item in legitimateArr"
                      :key="item.frequencyValue"
                    >
                      <el-button
                        v-if="item.isActive == '1'"
                        class="selButton"
                        type="primary"
                        size="large"
                        style="width: 100%"
                        @click="selFrequery(item.frequencyValue)"
                        >{{ item.frequencyValue }}</el-button
                      >
                      <el-button
                        v-else
                        class="selButton"
                        type="info"
                        size="large"
                        style="width: 100%"
                        @click="selFrequery(item.frequencyValue)"
                        >{{ item.frequencyValue }}</el-button
                      >
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="leftMonitorLine">
              <p>非法频率</p>
              <div class="leftMonitorLineButton" id="illegalArr">
                <draggable
                  v-model="illegalArr"
                  group="site"
                  animation="100"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  @start="onStart"
                  @end="onEnd"
                  @onadd="onadd"
                >
                  <transition-group>
                    <div v-for="item in illegalArr" :key="item.frequencyValue">
                      <el-button
                        v-if="item.isActive == '1'"
                        type="primary"
                        size="large"
                        class="selButton"
                        style="width: 100%"
                        @click="selFrequery(item.frequencyValue)"
                        >{{ item.frequencyValue }}</el-button
                      >
                      <el-button
                        v-else
                        type="info"
                        size="large"
                        style="width: 100%"
                        @click="selFrequery(item.frequencyValue)"
                        >{{ item.frequencyValue }}</el-button
                      >
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="leftMonitorLine">
              <p>可疑频率</p>
              <div class="leftMonitorLineButton" id="suspectedArr">
                <draggable
                  v-model="suspectedArr"
                  group="site"
                  animation="100"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  @start="onStart"
                  @end="onEnd"
                  @onadd="onadd"
                >
                  <transition-group>
                    <div v-for="(item, index) in suspectedArr" :key="index">
                      <el-button
                        v-if="item.isActive == '1'"
                        class="selButton"
                        type="primary"
                        size="large"
                        style="width: 100%"
                        @click="selFrequery(item.frequencyValue)"
                        >{{ item.frequencyValue }}</el-button
                      >
                      <el-button
                        v-else
                        class="selButton"
                        type="info"
                        size="large"
                        style="width: 100%"
                        @click="selFrequery(item.frequencyValue)"
                        >{{ item.frequencyValue }}</el-button
                      >
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import frequencyAnalysis from "./frequencyAnalysis";
import frequencyOperationDiagram from "./frequencyOperationDiagram";
import draggable from "vuedraggable";
export default {
  props: ["timeValue", "frequencyValue", "switchValue", "radioValue"],
  components: { frequencyAnalysis, frequencyOperationDiagram, draggable },
  data() {
    return {
      loading: false,
      drag: false,
      diamondSrc: require("@/assets/diamond.png"),
      frequencyAnalysisHeight: "",
      legitimateArr: [],
      illegalArr: [],
      suspectedArr: [],
    };
  },
  mounted() {
    if (this.radioValue == "0") {
      this.getLeftMonitor();
    } else {
      let frequencyAnalysisBlockHeight =
        this.$refs.frequencyAnalysis.offsetHeight;
      this.frequencyAnalysisHeight = frequencyAnalysisBlockHeight - 30;
    }
  },
  methods: {
    onStart(e) {
      this.drag = true;
    },
    onEnd(e) {
      this.drag = false;

      let fromName = e.from.parentNode.parentNode.id;
      let toName = e.to.parentNode.parentNode.id;

      let type = null;
      let frequency = null;
      if (toName === "legitimateArr") {
        type = 0;
        frequency = this.legitimateArr[e.newIndex].frequencyValue;
      } else if (toName === "illegalArr") {
        type = 1;
        frequency = this.illegalArr[e.newIndex].frequencyValue;
      } else {
        type = "";
        frequency = this.suspectedArr[e.newIndex].frequencyValue;
      }

      let param = {
        bid: "setFreqType",
        frequency: frequency,
        type: type,
      };

      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {});
    },

    onadd(evt) {
      var itemEl = evt.item; // dragged HTMLElement
      evt.to; // target list
      evt.from; // previous list
      evt.oldIndex; // tag's old index within old parent
      evt.newIndex; // tag's new index within new parent
      evt.clone; // the clone tag
      evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
    },

    getLeftMonitor() {
      this.loading = true;
      this.$getJSON(window.backstageURL + "dataservice/getCurrentFreqs").then(
        (res) => {
          let tmpData = JSON.parse(JSON.stringify(res.data.data[0]));
          this.legitimateArr = [];
          this.illegalArr = [];
          this.suspectedArr = [];
          tmpData.forEach((item) => {
            if (item.isWhiteFreq == 1) {
              item.name = item.frequencyValue;
              this.legitimateArr.push(item);
            } else if (item.isFavoriteFreq == 1) {
              item.name = item.frequencyValue;
              this.illegalArr.push(item);
            } else if (item.isWhiteFreq == 0 && item.isFavoriteFreq == 0) {
              item.name = item.frequencyValue;
              this.suspectedArr.push(item);
            } else {
            }
          });
          this.loading = false;
        }
      );
    },

    selFrequery(fre) {
      this.$emit("selFre", fre);
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-left: 20px;
  height: 30px;

  .imgSty {
    width: 15px;
    height: 15px;
    margin-top: 7.5px;
  }

  p {
    font-size: 18px;
    color: #4dd6b6;
    line-height: 30px;
    margin-left: 10px;
  }
}

.leftMonitor {
  width: 96%;
  margin-left: 2%;
  .leftMonitorLine {
    margin-top: 20px;
    border: 1px solid #409eff;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 118px);
    .leftMonitorLineButton {
      position: absolute;
      left: 0;
      top: 52px;
      right: -17px;
      bottom: 0;
      overflow-x: hidden;
      overflow-y: scroll;
      height: calc(100vh - 175px);
    }
    p {
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-weight: 800;
      color: white;
      font-size: 24px;
      border-bottom: 2px solid #409eff;
    }
  }
}

/deep/ .el-button {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

/deep/ .el-button--primary {
  background-color: transparent;
}
.selButton {
}
</style>

 bigScreen/src/views/components/pointInfo.vue

New file
@@ -0,0 +1,1126 @@
<template>
  <div style="width: 100%; height: 100%">
    <video
      ref="videoElement"
      id="videoElement"
      controls
      width="0"
      height="0"
      v-show="false"
    >
      xxx
    </video>
    <el-container>
      <el-header height="60px">
        <span
          >{{ pontInfoData.monitorpointName }} -
          {{ pontInfoData.monitorstationId_name }} -
        </span>
        <span style="color: #4dd6b6" v-if="pontInfoData.status == 1"
          >{{ pontInfoData.status_name }}状态</span
        >
        <span style="color: red" v-if="!(pontInfoData.status == 1)"
          >{{ pontInfoData.status_name }}状态</span
        >

        <el-button
          type="primary"
          size="mini"
          class="topButton"
          @click="lookBack(pontInfoData)"
          >回放</el-button
        >
      </el-header>
      <el-container>
        <el-aside width="119px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#0b1536"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            @select="selectItem"
          >
            <div
              class="menuItem"
              v-for="(item, i) in frequencyArray"
              :key="item.frequencyId"
              @dblclick="dbClick(item)"
              style="user-select: none"
            >
              <el-menu-item :index="i.toString()">
                <span slot="title">{{ item.frequencyValue }}</span>
              </el-menu-item>
              <el-tooltip
                class="item"
                effect="dark"
                content="点击收藏"
                placement="top"
              >
                <el-image
                  style="
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                    margin-top: 18px;
                  "
                  v-if="!item.isCollection"
                  @click="joinCollection(item)"
                  :src="require('@/assets/unLove.png')"
                ></el-image>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="取消收藏"
                placement="top"
              >
                <el-image
                  style="
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                    margin-top: 18px;
                  "
                  v-if="item.isCollection"
                  @click="dropCollection(item)"
                  :src="require('@/assets/love.png')"
                ></el-image>
              </el-tooltip>
            </div>
          </el-menu>
        </el-aside>
        <el-main
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          element-loading-spinner="el-icon-loading"
        >
          <div v-if="!showInfo.frequencyValue">
            <p>请选择频率</p>
          </div>
          <div v-else>
            <div class="mainTitle">
              <div style="display: flex">
                <p style="width: 50px">监听:</p>
                <span
                  style="margin-left: 10px"
                  v-show="!isEdit"
                  @dblclick="changeInput()"
                  >{{ showFrequencyValue }}</span
                >
                <el-input
                  v-model="showFrequencyValue"
                  placeholder=""
                  v-show="isEdit"
                  @blur="changeP"
                  ref="editInput"
                  style="width: 80px"
                ></el-input>
              </div>

              <el-tooltip
                class="item"
                effect="dark"
                content="开始直播"
                placement="top"
                v-if="!isplay"
              >
                <i
                  class="el-icon-video-play"
                  @click="startPlay"
                  style="cursor: pointer; line-height: 40px"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="暂停直播"
                placement="top"
                v-else
              >
                <i
                  class="el-icon-video-pause"
                  @click="stopPlay"
                  style="cursor: pointer; line-height: 40px"
                ></i>
              </el-tooltip>
              <p>
                <span>信号:{{ showInfo.level }}</span>
              </p>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link" style="color: #409eff">
                  人工评分: {{ dropScore }}分
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1" :disabled="!isAssess"
                    >1分</el-dropdown-item
                  >
                  <el-dropdown-item command="2" :disabled="!isAssess"
                    >2分</el-dropdown-item
                  >
                  <el-dropdown-item command="3" :disabled="!isAssess"
                    >3分</el-dropdown-item
                  >
                  <el-dropdown-item command="4" :disabled="!isAssess"
                    >4分</el-dropdown-item
                  >
                  <el-dropdown-item command="5" :disabled="!isAssess"
                    >5分</el-dropdown-item
                  >
                  <el-dropdown-item command="0" :disabled="!isAssess"
                    >无效</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <div class="recordingBlock">
              <div class="joinRecording">
                <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入通道"
                    placement="top"
                  >
                    <svg-icon
                      class="svgIcon"
                      icon-class="add"
                      @click="addLeftRecord"
                    ></svg-icon>
                  </el-tooltip>
                </div>
                <div style="margin-top: 20px">
                  <span>录制通道:</span>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="双击修改"
                    placement="top"
                  >
                    <span v-show="!isLeftEdit" @dblclick="changeLeftInput">{{
                      leftRecordFrequency.frequencyValue
                    }}</span>
                  </el-tooltip>
                  <el-input
                    v-model="leftRecordFrequency.frequencyValue"
                    placeholder=""
                    style="width: 80px; height: 22px"
                    v-show="isLeftEdit"
                    ref="editLeftInput"
                    @blur="changeLeftP"
                  ></el-input>
                </div>
                <div style="margin-top: 20px">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入录制"
                    placement="top"
                  >
                    <svg-icon
                      class="svgIcon"
                      icon-class="recordAdd"
                      @click="joinLeftMain"
                    ></svg-icon>
                  </el-tooltip>
                </div>
              </div>

              <!-- <div class="joinRecording">
                <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入通道"
                    placement="top"
                  >
                    <svg-icon
                      class="svgIcon"
                      icon-class="add"
                      @click="addRightRecord"
                    ></svg-icon>
                  </el-tooltip>
                </div>
                <div style="margin-top: 20px">
                  <span>副录通道:</span>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="双击修改"
                    placement="top"
                  >
                    <span v-show="!isRightEdit" @dblclick="changeRightInput">{{
                      rightRecordFrequency.frequencyValue
                    }}</span>
                  </el-tooltip>
                  <el-input
                    v-model="rightRecordFrequency.frequencyValue"
                    placeholder=""
                    style="width: 80px; height: 22px"
                    v-show="isRightEdit"
                    ref="editRightInput"
                    @blur="changeRightP"
                  ></el-input>
                </div>
                <div style="margin-top: 20px">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="开始录制"
                    placement="top"
                  >
                    <svg-icon
                      class="svgIcon"
                      icon-class="recordAdd"
                      @click="joinRightMain"
                    ></svg-icon>
                  </el-tooltip>
                </div>
              </div> -->
            </div>

            <div class="pointChart">
              <p>历史压制效果</p>
              <div ref="chart" style="width: 100%; height: 120px"></div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  watch: {
    pontInfoData: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        this.getEchartData(this.showInfo);
      },
      deep: true,
      immediate: true,
    },
  },

  props: {
    pontInfoData: {
      type: Object,
      default: {},
    },
    switchValue: {
      type: Number,
      default: 1,
    },
    username: {
      type: String,
      default: "",
    },
    userid: {
      type: String,
      default: "",
    },
    isLoney: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      lookBackData: {},
      lookBackVisible: false,
      isAssess: false,
      isDisable: true,
      dropScore: "请选择",
      isEdit: false,
      isLeftEdit: false,
      isRightEdit: false,
      selScoreValue: "",
      selScoreArr: [],
      scoreOperationDialog: false,
      dialogVisible: true,
      frequencyArray: [],
      showInfo: {},
      collectionArray: [],
      leftFrequency: {},
      rightFrequency: {},
      isplay: false,
      rtsp: "",
      player: null,
      playFrequency: {},
      leftRecordFrequency: {},
      rightRecordFrequency: {},
      showFrequencyValue: "",
    };
  },
  mounted() {
    this.getCollection();
  },
  methods: {
    lookBack(data) {
      this.$emit("showLookBack", data);
    },
    joinRightMain() {
      let param = {
        monitorpointId: this.showInfo.monitorpointId,
        frequencyValue: this.rightRecordFrequency.frequencyValue,
      };
      this.$emit("joinRecord", param);
    },
    joinLeftMain() {
      let recordData = {
        monitorpointId: this.showInfo.monitorpointId,
        frequencyValue: this.leftRecordFrequency.frequencyValue,
      };
      this.$emit("joinRecord", recordData);
    },
    addLeftRecord() {
      this.leftRecordFrequency.frequencyValue = this.showFrequencyValue;
    },
    addRightRecord() {
      this.rightRecordFrequency.frequencyValue = this.showFrequencyValue;
    },
    handleCommand(command) {
      this.dropScore = command;
      let param = {
        bid: "assessPress",
        frequency: this.showFrequencyValue,
        assessvalue: command,
        monitorpointId: this.showInfo.monitorpointId,
        taskid: "",
        userid: this.userid,
        recording_time: this.dateFormatter(new Date()),
      };

      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        this.$message.success(res.data.data[0][0].messg);
      });
    },
    changeP(e) {
      this.isplay = false;
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
      this.isEdit = !this.isEdit;
    },
    changeInput() {
      this.isEdit = !this.isEdit;
      setTimeout(() => {
        this.$refs.editInput.focus();
      }, 500);
    },
    changeLeftInput() {
      this.isLeftEdit = !this.isLeftEdit;
      setTimeout(() => {
        this.$refs.editLeftInput.focus();
      }, 500);
    },
    changeLeftP(e) {
      this.isLeftEdit = !this.isLeftEdit;
    },
    changeRightInput() {
      this.isRightEdit = !this.isRightEdit;
      setTimeout(() => {
        this.$refs.editRightInput.focus();
      }, 500);
    },
    changeRightP(e) {
      this.isRightEdit = !this.isRightEdit;
    },
    dbClick(item) {
      this.$emit("showLoading", "luzhi");
      setTimeout(() => {
        this.startPlay();
      }, 2000);
    },
    cancleRecoding(frequency) {
      let param = new URLSearchParams();
      param.append("method", "delete");
      param.append("key", 123456);
      param.append("monitorpointId", frequency.monitorpointId);
      param.append("frequencyValue", frequency.frequencyValue);
      this.$getJSON(window.equipmentURL + 
        "FRP/TNewrecordtask.do",
        param
      ).then((res) => {
        if (res.success) {
          this.getFrequency(this.showInfo);
          this.getEchartData(this.showInfo);
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    dropMain() {
      this.$confirm("是否停止录制", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param = new URLSearchParams();
          param.append("method", "delete");
          param.append("key", 123456);
          param.append("monitorpointId", this.showInfo.monitorpointId);
          param.append(
            "frequencyValue",
            this.leftRecordFrequency.frequencyValue
          );
          this.$getJSON(window.equipmentURL + 
            "FRP/TNewrecordtask.do",
            param
          ).then((res) => {
            if (res.success) {
              this.getFrequency(this.showInfo);
              this.getEchartData(this.showInfo);
            } else {
              this.$message.warning(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    dropVice() {
      this.$confirm("是否停止录制", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param = new URLSearchParams();
          param.append("method", "delete");
          param.append("key", 123456);
          param.append("monitorpointId", this.showInfo.monitorpointId);
          param.append(
            "frequencyValue",
            this.rightRecordFrequency.frequencyValue
          );
          this.$getJSON(window.equipmentURL + 
            "FRP/TNewrecordtask.do",
            param
          ).then((res) => {
            if (res.success) {
              this.getFrequency(this.showInfo);
              this.getEchartData(this.showInfo);
            } else {
              this.$message.warning(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    scoreOperation() {
      if (this.userid == "" || this.username == "") {
        if (this.isLoney) {
          this.$emit("showLogin");
        } else {
          window.location.href =window.backstageURL +
            "ammonitor/#/passport/login";
        }
      } else {
        this.$emit("startScore", this.showInfo);
      }
    },
    getCharFromUtf8(str) {
      var cstr = "";
      var nOffset = 0;
      if (str == "") return "";
      str = str.toLowerCase();
      nOffset = str.indexOf("%e");
      if (nOffset == -1) return str;
      while (nOffset != -1) {
        cstr += str.substr(0, nOffset);
        str = str.substr(nOffset, str.length - nOffset);
        if (str == "" || str.length < 9) return cstr;
        cstr += utf8ToChar(str.substr(0, 9));
        str = str.substr(9, str.length - 9);
        nOffset = str.indexOf("%e");
      }
      return cstr + str;
    },
    joinRecording() {
      if (this.userid == "" || this.username == "") {
        if (this.isLoney) {
          this.$emit("showLogin");
        } else {
          window.location.href =window.backstageURL +
            "ammonitor/#/passport/login";
        }
      } else {
        this.$confirm(
          `是否确定将${this.showInfo.frequencyValue}加入录制`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$emit("showLoading", "luzhi");
            let param = new URLSearchParams();
            param.append("method", "record");
            param.append("key", 111111);
            param.append("recordTimeLength", 180);
            param.append("monitorpointId", this.showInfo.monitorpointId);
            param.append("frequencyValue", this.showInfo.frequencyValue);
            param.append("isUnderWay", 0);

            let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${this.showInfo.monitorpointId}&frequencyValue=${this.showInfo.frequencyValue}`;
            this.$getJSON(window.equipmentURL + 
              "FRP/TNewrecordtask.do",
              param
            ).then((res) => {
              this.$emit("hideLoading");
              let param1 = {
                bid: "setChannelRecord",
                monitorpointId: this.showInfo.monitorpointId,
                frequency: this.showInfo.frequencyValue,
                userid: this.userid,
                requesturl: url,
                success: res[0].success.toString(),
                msg: res[0].msg,
                recordminitus: 180,
              };

              this.$post(window.backstageURL +
                "dataservice/dealData",
                param1
              ).then((res1) => {});

              if (res.success) {
                this.$message.success(res[0].msg);
                this.getCollection();
                this.getFrequency(this.showInfo);
              } else {
                this.$message.error(res[0].msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    joinCollection(item) {
      if (this.userid == "" || this.username == "") {
        if (this.isLoney) {
          this.$emit("showLogin");
        } else {
          window.location.href = window.backstageURL +
            "ammonitor/#/passport/login";
        }
      } else {
        let param = new URLSearchParams();
        param.append("bid", "addFavoriteFreqs");
        param.append("frequency", item.frequencyValue);
        param.append("adduser", this.username);
        this.$getJSON(window.backstageURL +
          "dataservice/getNoTokenData",
          param
        ).then((res) => {
          if (res.code == 20000) {
            this.$message.success("收藏成功");
            this.getCollection();
          }
        });
      }
    },
    dropCollection(item) {
      if (this.userid == "" || this.username == "") {
        if (this.isLoney) {
          this.$emit("showLogin");
        } else {
          window.location.href = window.backstageURL +
            "ammonitor/#/passport/login";
        }
      } else {
        let param = new URLSearchParams();
        param.append("bid", "cancelFavoriteFreqs");
        param.append("frequency", item.frequencyValue);
        this.$getJSON(window.backstageURL +
          "dataservice/getNoTokenData",
          param
        ).then((res) => {
          if (res.code == 20000) {
            this.$confirm(res.data.data[0][0].msg, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                let param1 = new URLSearchParams();
                param1.append("bid", "delFavoriteFreqs");
                param1.append("frequency", item.frequencyValue);
                param1.append("canceluser", this.username);
                this.$getJSON(window.backstageURL +
                  "dataservice/getNoTokenData",
                  param1
                ).then((res) => {
                  if (res.code == 20000) {
                    this.$message.success("成功取消收藏");
                    this.getCollection();
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除",
                });
              });
          }
        });
      }
    },
    getCollection() {
      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData?bid=getFavoriteFreqs"
      ).then((res) => {
        let sourceData = [];
        res.data.data.forEach((item) => {
          sourceData.push(item.frequency);
        });
        this.collectionArray = sourceData;
        // this.getInfo();
      });
    },
    getInfo() {
      let param = new URLSearchParams();
      param.append("monitorpointId", this.pontInfoData.monitorpointId);
      param.append("userid", this.userid);
      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData?bid=getCurrPointFreqs",
        param
      ).then((res) => {
        this.frequencyArray = JSON.parse(JSON.stringify(res.data.data[0]));
        this.selectItem(2)
      });
    },
    selectItem(index) {
      console.log(index)
      this.isplay = false;
      this.isAssess = false;
      this.loading = true;
      if (this.frequencyArray[index].assessvalue) {
        this.dropScore = this.frequencyArray[index].assessvalue;
      } else {
        this.dropScore = "请选择";
      }

      this.recordingtime = "";
      this.rtsp = "";

      this.playFrequency = {};
      this.showFrequencyValue = this.frequencyArray[index].frequencyValue;
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
      this.showInfo = this.frequencyArray[index];

      this.getFrequency(this.showInfo);
      this.getEchartData(this.showInfo);
    },

    getFrequency(value) {
      this.playFrequency = {};
      this.leftRecordFrequency = {};
      this.rightRecordFrequency = {};
      let param = new URLSearchParams();
      param.append("bid", "getChannelRecord");
      param.append("monitorpointId", value.monitorpointId);

      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        let sourceData = res.data.data[0];
        sourceData.forEach((item) => {
          let playItem = JSON.parse(JSON.stringify(item));
          playItem.level = "--";
          playItem.pressvalue = "--";
          this.frequencyArray.forEach((i) => {
            if (i.frequencyValue == playItem.frequencyValue) {
              playItem.level = i.level;
              playItem.pressvalue = i.pressvalue;
            }
          });

          if (playItem.channelId == 1) {
            this.playFrequency = playItem;
          } else if (playItem.channelId == 2) {
            this.rightRecordFrequency = playItem;
          } else if (playItem.channelId == 3) {
            this.leftRecordFrequency = playItem;
          } else {
          }
        });
        this.loading = false;
      });
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    getEchartData(value) {
      let param = new URLSearchParams();
      if (this.switchValue == 1) {
        param.append("bid", "getPointSuppress");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getPointSuppress_auto");
      }
      param.append("frequencystr", value.frequencyValue);
      param.append("monitorpointId", this.pontInfoData.monitorpointId);

      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        let sourceData = res.data.data;
        let seriesData = [];
        let legendData = [];
        let xAxisData = [];

        for (let i = 0; i < sourceData.length - 1; i++) {
          let oneLegendData = { textStyle: {} };
          if (sourceData[i].length != 0) {
            oneLegendData.name = sourceData[i][0].frequencyValue;
            oneLegendData.icon = "circle";
            oneLegendData.textStyle.fontSize = 10;
            oneLegendData.textStyle.color = "white";
            legendData.push(oneLegendData);

            let oneSeriesData = { data: [] };
            oneSeriesData.name = sourceData[i][0].frequencyValue;
            oneSeriesData.type = "line";
            for (let j = 0; j < 15; j++) {
              let paramvalue = sourceData[i][j].paramvalue;
              oneSeriesData.data.push(paramvalue);
              xAxisData.push(
                this.formatDateTime(sourceData[i][j].wdate) +
                  "\n" +
                  sourceData[i][j].whour +
                  ":00"
              );
            }
            seriesData.push(oneSeriesData);
          }
        }

        const chart = this.$refs.chart;
        if (chart) {
          const myChart = this.$echarts.init(chart);
          const option = {
            grid: {
              top: "20px",

              left: "25px",

              right: "0px",

              bottom: "35px",

              backgroundColor: "#fff",
            },
            xAxis: {
              type: "category",
              data: xAxisData,
              axisLabel: {
                interval: 0,
                rotate: 0,
                color: "#FFFFFF",
                fontSize: 10,
              },
            },
            yAxis: {
              type: "value",
              min: 0,
              max: 4,
              axisLabel: {
                formatter: function (value) {
                  var texts = [];
                  if (value == 0) {
                    texts.push("1");
                  } else if (value <= 1) {
                    texts.push("2");
                  } else if (value <= 2) {
                    texts.push("3");
                  } else if (value <= 3) {
                    texts.push("4");
                  } else {
                    texts.push("5");
                  }
                  return texts;
                },
                interval: 0,
                rotate: 0,
                color: "#FFFFFF",
                fontSize: 10,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,225,255,0.5)",
                  width: 1,
                  type: "solid",
                },
              },
            },
            legend: {
              itemHeight: 7,
              data: legendData,
            },
            series: seriesData,
          };
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        }
      });
    },

    startPlay() {
      this.isplay = true;
      this.isAssess = true;
      let playData = {
        monitorpointId: this.showInfo.monitorpointId,
        frequencyValue: this.showFrequencyValue,
      };
      this.$emit("startPlay", playData);
    },
    stopPlay() {
      this.$emit("stopPlay");
      this.isplay = false;
      // this.player.pause();
    },
    formatDateTime(date) {
      if (date) {
        let time = new Date(date);
        var month = time.getMonth() + 1;
        var date = time.getDate();
        return this.add0(month) + "-" + this.add0(date);
      } else {
        return "--";
      }
    },

    dateFormatter(time) {
      if (time) {
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return 0;
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  background-color: #132763;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  font-size: 22px;
}

.el-aside {
  background-color: #0b1536;
  color: #ffffff;
  text-align: center;
  line-height: 200px;
  height: 370px;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
}

.el-main {
  background-color: #0b1536;
  color: #ffffff;
  text-align: center;
  height: 370px;
  padding: 0px;
  overflow: hidden;
}

.menuItem {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;

  li {
  }

  i {
    line-height: 56px;
    font-size: 10px;
    width: 30px;
  }
}

.mainTitle {
  width: 90%;
  margin-left: 5%;
  height: 40px;
  line-height: 40px;
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.3);
  font-size: 16px;
}

.recordingBlock {
  margin-top: 10px;
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.3);
  font-size: 16px;
  height: 120px;

  .joinRecording {
    width: 100%;

    .joinRecordingIcon {
      height: 40px;
      cursor: pointer;
      p {
        line-height: 40px;
      }
    }

    .joinRecordingContent {
      height: 40px;

      .have {
        line-height: 40px;
      }

      .nohave {
        text-align: center;
      }
    }
  }
}

.pointChart {
  margin-top: 10px;
  width: 90%;
  margin-left: 5%;
  p {
    line-height: 40px;
    font-size: 14px;
  }
}

.alertBlock {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 50%;
  height: 50%;
  z-index: 999;
  background-color: aqua;
}

.el-aside::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.el-aside::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  background: #535353;
}

.el-aside::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  border-radius: 0;

  background: #ededed;
}

/deep/ .el-input__inner {
  height: 22.5px;
  line-height: 22.5px;
}

.topButton {
  position: absolute;
  right: 30px;
  margin-top: 16px;
}

.svgIcon {
  cursor: pointer;
}
</style>

 bigScreen/src/views/components/rightBlock.vue

New file
@@ -0,0 +1,782 @@
<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-spinner="el-icon-loading"
  >
    <video
      ref="videoElement"
      id="videoElement"
      controls
      width="0"
      height="0"
      v-show="false"
    >
      xxx
    </video>
    <div v-if="radioValue == '1'" style="width: 100%; height: 100%">
      <div style="width: 100%; height: 30%; overflow: hidden">
        <div class="title">
          <el-image :src="diamondSrc" style="" class="imgSty"></el-image>
          <p>压制效果</p>
        </div>
        <suppressionEffect
          :timeValue="timeValue"
          :frequencyValue="frequencyValue"
          :switchValue="switchValue"
        ></suppressionEffect>
      </div>
      <div style="width: 100%; height: 30%; overflow-y: hidden; margin-top: 3%">
        <div class="title">
          <el-image :src="diamondSrc" style="" class="imgSty"></el-image>
          <p>压制覆盖率</p>
        </div>
        <suppressionCoverage
          :timeValue="timeValue"
          :frequencyValue="frequencyValue"
          :switchValue="switchValue"
        ></suppressionCoverage>
      </div>
      <div style="width: 100%; height: 30%; overflow-y: hidden; margin-top: 3%">
        <div class="title">
          <el-image :src="diamondSrc" style="" class="imgSty"></el-image>
          <p>压制覆盖率</p>
        </div>
        <blanketCoverage
          :timeValue="timeValue"
          :frequencyValue="frequencyValue"
          :switchValue="switchValue"
        ></blanketCoverage>
      </div>
    </div>
    <div v-if="radioValue == '0'" style="width: 100%; height: 100%">
      <div class="rightCover">
        <div class="rightCoverTitle">
          <p style="color: #409eff; line-height: 28px; font-size: 18px">
            频率:
            <span
              style="margin-left: 10px"
              v-show="!isEdit"
              @dblclick="changeInput()"
              >{{ nowFre }}</span
            >
            <el-input
              v-model="nowFre"
              placeholder=""
              v-show="isEdit"
              @blur="changeP"
              ref="editInput"
              style="width: 80px"
            ></el-input>
          </p>

          <el-button size="mini" type="primary" plain @click="recordAll"
            >录制</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="rightList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :height="divHeight"
          :header-cell-style="{ background: 'transparent' }"
          :key="tableKey"
        >
          <el-table-column type="selection" width="40"> </el-table-column>
          <el-table-column label="">
            <template slot-scope="scope"
              ><span style="color: #409eff">{{
                scope.row.monitorpointName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="55">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="开始直播"
                placement="top"
                v-if="!scope.row.isplay"
              >
                <i
                  class="el-icon-video-play"
                  @click="startPlay(scope)"
                  style="cursor: pointer; line-height: 40px; color: #ffffff"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="暂停直播"
                placement="top"
                v-else
              >
                <i
                  class="el-icon-video-pause"
                  @click="stopPlay(scope)"
                  style="cursor: pointer; line-height: 40px; color: #ffffff"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="" width="100">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.assessvalue"
                placeholder="评分"
                size="mini"
                :disabled="!(switchValue == 1)"
                @change="changeAssess(scope)"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="">
            <template slot-scope="scope">
              <div style="color: #409eff">
                <span>录制:{{ scope.row.main_freq }}</span>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="加入录制"
                  placement="top"
                  v-if="
                    scope.row.main_freq === null || scope.row.main_freq == ''
                  "
                >
                  <svg-icon
                    class="svgIcon"
                    icon-class="add"
                    style="margin-left: 10px"
                    @click="joinRecord(3, scope.row.monitorpointId, nowFre)"
                  ></svg-icon>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="停止录制"
                  placement="top"
                  v-else
                >
                  <svg-icon
                    class="svgIcon"
                    icon-class="stop"
                    @click="
                      dropRecord(scope.row.main_freq, scope.row.monitorpointId)
                    "
                    style="margin-left: 10px"
                  ></svg-icon>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="">
            <template slot-scope="scope">
              <div style="color: #409eff">
                <span>副:{{ scope.row.subsidiary_freq }}</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="加入录制"
                  placement="top"
                  v-if="
                    scope.row.subsidiary_freq === null ||
                    scope.row.subsidiary_freq == ''
                  "
                >
                  <svg-icon
                    class="svgIcon"
                    icon-class="add"
                    style="margin-left: 10px"
                    @click="joinRecord(2, scope.row.monitorpointId, nowFre)"
                  ></svg-icon>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="停止录制"
                  placement="top"
                  v-else
                >
                  <svg-icon
                    class="svgIcon"
                    icon-class="stop"
                    @click="
                      dropRecord(
                        scope.row.subsidiary_freq,
                        scope.row.monitorpointId
                      )
                    "
                    style="margin-left: 10px"
                  ></svg-icon>
                </el-tooltip>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import suppressionEffect from "./suppressionEffect";
import suppressionCoverage from "./suppressionCoverage";
import blanketCoverage from "./blanketCoverage";
export default {
  watch: {
    leftSelFre: {
      handler(n, o) {
        this.nowFre = JSON.parse(JSON.stringify(this.leftSelFre));
        this.getData();
      },
      deep: true,
    },
    timeValue: {
      handler(n, o) {
        this.getData();
      },
      deep: true,
    },
    frequencyValue: {
      handler(n, o) {
        this.nowFre = JSON.parse(JSON.stringify(this.frequencyValue));
        this.getData();
      },
      deep: true,
    },
  },
  components: { suppressionEffect, suppressionCoverage, blanketCoverage },
  props: [
    "rightDrawState",
    "timeValue",
    "frequencyValue",
    "switchValue",
    "radioValue",
    "leftSelFre",
    "userid",
  ],
  data() {
    return {
      loading: false,
      divHeight: document.body.clientHeight - 165, // 高
      isEdit: false,
      tableKey: false,
      isListen: true,
      diamondSrc: require("@/assets/diamond.png"),
      nowFre: "",
      rightList: [],
      multipleSelection: [],
      options: ["1", "2", "3", "4", "5", "无效"],
      pointValue: "",
      isplay: false,
      rtsp: "",
      player: null,
      recordingtime: null,
    };
  },
  mounted() {
    this.nowFre = "1557";
    this.getData();
  },
  methods: {
    changeInput() {
      this.isEdit = !this.isEdit;
      setTimeout(() => {
        this.$refs.editInput.focus();
      }, 500);
    },
    changeP(e) {
      this.isEdit = !this.isEdit;
      this.getData();
    },
    recordAll() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择频率");
      } else {
        this.$prompt("请输入时间(分钟)", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern:
            /^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/,
          inputErrorMessage: "请输入1到360的整数",
        })
          .then(({ value }) => {
            let tmpMul = this.multipleSelection;
            let sendId = [];
            tmpMul.forEach((item) => {
              sendId.push(item.monitorpointId);
            });
            let sendFre = [];
            sendId.forEach((item) => {
              sendFre.push(this.nowFre);
            });

            this.$emit("showLoading", "luzhi");
            let param = new URLSearchParams();
            param.append("method", "record");
            param.append("key", 123456);
            param.append("recordTimeLength", value);
            param.append("monitorpointId", sendId);
            param.append("frequencyValue", sendFre);
            param.append("isUnderWay", 0);

            let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${sendId}&frequencyValue=${this.nowFre}`;
            this.$getJSON(window.equipmentURL + 
              "FRP/TNewrecordtask.do",
              param
            ).then((res) => {
              this.$emit("hideLoading");
              let param1 = {
                bid: "setChannelRecord",
                monitorpointId: sendId,
                frequency: this.nowFre,
                userid: this.userid,
                requesturl: url,
                success: res[0].success.toString(),
                msg: res[0].msg,
                recordminitus: value,
              };

              console.log("123")
              this.$post(
                window.backstageURL + "dataservice/dealData",
                param1
              ).then((res1) => {
                console.log(res1)
              });

              if (res.success) {
                this.$message.success(res.msg);
                this.getData();
                this.tableKey = !this.tableKey;
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });
      }
    },
    changeAssess(scope) {
      let emitData = {
        assessvalue: scope.row.assessvalue,
        id: scope.row.monitorpointId,
      };
      this.$emit("changeAssess", emitData);
      let sendAssess = "";
      if (scope.row.assessvalue == "无效") {
        sendAssess = 0;
      } else {
        sendAssess = scope.row.assessvalue;
      }
      let param = {
        bid: "assessPress",
        frequency: this.nowFre,
        assessvalue: sendAssess,
        monitorpointId: scope.row.monitorpointId,
        taskid: scope.row.taskid,
        userid: this.userid,
        recording_time: this.dateFormatter(new Date()),
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {});
    },
    dateFormatter(time) {
      if (time) {
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return 0;
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getData() {
      this.loading = true;
      let tmpTimeValue = JSON.parse(JSON.stringify(this.timeValue));
      let date = tmpTimeValue.split(" ")[0];
      let hour = this.add0(Number(tmpTimeValue.split(" ")[1].split(":")[0]));
      this.rightList = [];
      this.$getJSON(
        window.backstageURL +
          "dataservice/getNoTokenData?bid=getChannelSettingB"
      ).then((res) => {
        let tmp = JSON.parse(JSON.stringify(res.data.data[0]));
        tmp.forEach((item) => {
          item.isplay = false;
          item.taskid = "";
          item.assessvalue = null;
        });

        let param = {
          bid: "getPointData",
          userid: this.userid,
          wdate: date,
          whour: hour,
          frequency: this.nowFre,
        };

        console.log(param);
        this.$getJSON(
          window.backstageURL + "dataservice/getNoTokenData",
          param
        ).then((res) => {
          let assessArr = JSON.parse(JSON.stringify(res.data.data[0]));
          tmp.forEach((item) => {
            assessArr.forEach((item1) => {
              if (item.monitorpointId == item1.monitorpointId) {
                item.taskid = item1.taskid;
                item.assessvalue = item1.assessvalue;
              }
            });
          });
          this.loading = false;
        });
        this.rightList = tmp;
        this.tableKey = !this.tableKey;
      });
    },

    joinRecord(channelId, id, fre) {
      let param = {
        bid: "checkChannel",
        channelId: channelId,
        monitorpointId: id,
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.data.data[0][0].frequencyValue === fre) {
        } else {
          if (res.data.data[0][0].frequencyValue) {
            this.$confirm(
              `是否停止录制${res.data.data[0][0].frequencyValue},并将${fre}加入录制`,
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
            )
              .then(() => {
                this.addRecording(0, res.data.data[0][0], id, fre);
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消",
                });
              });
          } else {
            this.addRecording(1, {}, id, fre);
          }
        }
      });
    },

    addRecording(type, oldFre, id, fre) {
      this.$prompt("请输入时间(分钟)", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern:
          /^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/,
        inputErrorMessage: "请输入1到360的整数",
      })
        .then(({ value }) => {
          if (type == 1) {
            this.$emit("showLoading", "luzhi");
            let param = new URLSearchParams();
            param.append("method", "record");
            param.append("key", 111111);
            param.append("recordTimeLength", value);
            param.append("monitorpointId", id);
            param.append("frequencyValue", fre);
            param.append("isUnderWay", 0);

            let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${id}&frequencyValue=${fre}`;
            this.$getJSON(window.equipmentURL + 
              "FRP/TNewrecordtask.do",
              param
            ).then((res) => {
              this.$emit("hideLoading");
              let param1 = {
                bid: "setChannelRecord",
                monitorpointId: id,
                frequency: fre,
                userid: this.userid,
                requesturl: url,
                success: res.success.toString(),
                msg: res.msg,
                recordminitus: value,
              };
              this.$post(
                window.backstageURL + "dataservice/dealData",
                param1
              ).then((res1) => {});
              if (res.success) {
                this.$message.success(res.msg);
                this.getData();
                this.tableKey = !this.tableKey;
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            let param = new URLSearchParams();
            param.append("method", "delete");
            param.append("key", 123456);
            param.append("monitorpointId", oldFre.monitorpointId);
            param.append("frequencyValue", oldFre.frequencyValue);
            this.$getJSON(window.equipmentURL + 
              "FRP/TNewrecordtask.do",
              param
            ).then((res) => {
              if (res.success) {
                let param1 = new URLSearchParams();
                param1.append("method", "record");
                param1.append("key", 111111);
                param1.append("recordTimeLength", value);
                param1.append("monitorpointId", id);
                param1.append("frequencyValue", fre);

                param.append("isUnderWay", 0);

                let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${id}&frequencyValue=${fre}`;
                this.$getJSON(window.equipmentURL + 
                  "FRP/TNewrecordtask.do",
                  param1
                ).then((res1) => {
                  this.$emit("hideLoading");
                  let param2 = {
                    bid: "setChannelRecord",
                    monitorpointId: id,
                    frequency: fre,
                    userid: this.userid,
                    requesturl: url,
                    success: res1.success.toString(),
                    msg: res1.msg,
                    recordminitus: value,
                  };

                  this.$post(
                    window.backstageURL + "dataservice/dealData",
                    param2
                  ).then((res2) => {});

                  if (res1.success) {
                    this.$message.success(res1.msg);
                    this.getData();
                    this.tableKey = !this.tableKey;
                  } else {
                    this.$message.error(res1.msg);
                  }
                });
              } else {
                this.$message.warning(res.msg);
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    dropRecord(fre, id) {
      this.$confirm("是否停止录制", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param = new URLSearchParams();
          param.append("method", "delete");
          param.append("key", 123456);
          param.append("monitorpointId", id);
          param.append("frequencyValue", fre);
          this.$getJSON(window.equipmentURL + 
            "FRP/TNewrecordtask.do",
            param
          ).then((res) => {
            if (res.success) {
              this.getData();
              this.tableKey = !this.tableKey;
            } else {
              this.$message.warning(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    stopPlay(scope) {
      console.log("@@@");
      this.$emit("stopPlay");
      scope.row.isplay = false;
    },
    startPlay(scope) {
      console.log(this.rightList);
      this.rightList.forEach((item) => {
        item.isplay = false;
      });
      scope.row.isplay = true;
      // this.$emit("jumpPoint", scope.row);

      let playData = {
        monitorpointId: scope.row.monitorpointId,
        frequencyValue: this.nowFre,
      };
      console.log(playData)
      this.$emit("startPlay", playData);
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 96%;
  margin-left: 2%;
  margin-top: 20px;
  height: 30px;

  .imgSty {
    width: 15px;
    height: 15px;
    margin-top: 7.5px;
  }

  p {
    font-size: 18px;
    color: #4dd6b6;
    line-height: 30px;
    margin-left: 10px;
  }
}

/deep/ .el-table--fit {
  padding: 0px !important;
}

.rightCover {
  width: 96%;
  margin-left: 2%;
  padding-top: 20px;

  .rightCoverTitle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /deep/ .el-table--fit {
    padding: 20px;
  }
  /deep/ .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
  }

  /deep/ .el-table tr {
    background-color: transparent !important;
  }
  /deep/ .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent;
  }
  div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  div::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  div::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  div::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  div::-webkit-scrollbar-corner {
    background: #179a16;
  }
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  height: 50px;
  background: #eee;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}
</style>

 bigScreen/src/views/components/socketInfo.vue

New file
@@ -0,0 +1,842 @@
<template>
  <div v-loading="loading">
    <div v-show="isShow" class="shadowDiv"></div>
    <div
      v-show="isShow"
      class="scoreTask"
      :style="{ height: windowHeight * 0.5 - 20 + 'px' }"
    >
      <i class="el-icon-close iconPos" @click="closeTop()"></i>

      <div style="width: 90%; margin-left: 5%; margin-top: 30px; z-index: 1000">
        <el-table
          :data="tableData"
          style="width: 100%"
          :border="false"
          :show-header="false"
          :height="windowHeight * 0.5 - 50 + 'px'"
        >
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="name" label="日期" min-width="130">
          </el-table-column>
          <el-table-column prop="frequency" label="姓名"> </el-table-column>
          <el-table-column prop="taskcompletion" label="地址">
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="success" @click="startScore(scope)"
                  >开始评分</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div
      v-show="showCard"
      class="scoreTask2"
      :style="{
        height: windowHeight * 0.3 + 'px',
        top: windowHeight * 0.6 + 'px',
      }"
    >
      <i class="el-icon-close iconPos" @click="closeBottom()"></i>

      <div>
        <div
          :style="{ width: '100%', height: windowHeight * 0.3 - 30 + 'px' }"
          :key="key"
        >
          <div>
            <div class="carouselDiv">
              <div class="carouselTop">
                <p>{{ nowTime }}</p>
                <p>频率:{{ socketArray[nowSocketIndex].frequency }}</p>

                <p>{{ nowSocketIndex + 1 }} / {{ socketArray.length }}</p>

                <el-button
                  type="primary"
                  class="submit"
                  size="mini"
                  :disabled="!isCanClick"
                  @click="submitAll()"
                  >提交</el-button
                >
              </div>
              <div class="carouselMid" :key="isKey">
                <div
                  class="carouselMidHover"
                  @click="rePlay(socketArray[nowSocketIndex], nowSocketIndex)"
                  style="margin-left: 20px"
                  v-if="isHaveTime"
                >
                  <i class="el-icon-refresh-right" style="font-size: 36px"></i>
                  <p style="margin-top: 5px; text-align: center">回放</p>
                </div>

                <div v-else>
                  <div
                    class="carouselMidHover"
                    @click="
                      pausePlay(socketArray[nowSocketIndex], nowSocketIndex)
                    "
                    v-if="isplay"
                  >
                    <i class="el-icon-video-pause" style="font-size: 36px"></i>
                    <p style="margin-top: 5px; text-align: center">暂停</p>
                  </div>
                  <div
                    class="carouselMidHover"
                    @click="
                      startPlay(socketArray[nowSocketIndex], nowSocketIndex)
                    "
                    v-else
                  >
                    <i class="el-icon-video-play" style="font-size: 36px"></i>
                    <p style="margin-top: 5px; text-align: center">播放</p>
                  </div>
                </div>
              </div>
              <div class="carouselbottom">
                <p style="line-height: 28px">请评分:</p>

                <el-radio-group
                  v-model="socketArray[nowSocketIndex].assessvalue"
                  size="mini"
                  style="margin-left: 20px; height: 28px"
                >
                  <el-radio-button label="1">1分</el-radio-button>
                  <el-radio-button label="2">2分</el-radio-button>
                  <el-radio-button label="3">3分</el-radio-button>
                  <el-radio-button label="4">4分</el-radio-button>
                  <el-radio-button label="5">5分</el-radio-button>
                  <el-radio-button label="0">无效</el-radio-button>
                </el-radio-group>
              </div>

              <div
                class="carouselLeft"
                @click="jumpPrev(socketArray[nowSocketIndex], nowSocketIndex)"
              >
                <p>&lt;&lt; 上一项</p>
              </div>
              <div
                class="carouselRight"
                @click="jumpNext(socketArray[nowSocketIndex], nowSocketIndex)"
              >
                <p>下一项 &gt;&gt;</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="socketPlay" width="50" @close="socketReplay">
      <video
        id="socketVidoPlay"
        ref="socketVidoPlay"
        src=""
        controls
        preload
        width="100%"
        height="300"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
export default {
  watch: {
    visible: {
      handler(n, o) {
        this.windowHeight = document.body.clientHeight;
        this.isShow = this.visible;
        if (this.visible) {
          this.getInfo();
        }
      },
      isShow: {
        handler(n, o) {
          if (this.isShow) {
            this.getInfo();
          }
        },
      },
    },
    socketArray: {
      handler(n, o) {
        let isShow = true;

        this.socketArray.forEach((item) => {
          if (item.assessvalue) {
          } else {
            isShow = false;
          }
        });

        this.isCanClick = isShow;
      },
      deep: true,
    },
  },
  data() {
    return {
      isHaveTime: false,
      isKey: false,
      socketPlay: false,
      nowTime: "",
      key: false,
      nowSocketIndex: 0,
      loading: false,
      windowHeight: document.body.clientHeight,
      tableData: [],
      isShow: false,
      showCard: false,
      socketArray: [{ frequency: "", assessvalue: "" }],
      rateValue: "",
      nowPlayId: null,
      isplay: true,
      player: null,
      isCanClick: false,
      recordingtime: "",
      nowScoreId: "",
      playVideo: null,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    username: {
      type: String,
      default: "",
    },
    userid: {
      type: String,
      default: "",
    },
    isLoney: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {},
  methods: {
    rePlay(data, index) {
      if (data.update_time) {
        let startTime = this.dateFormatter(
          new Date(new Date(data.update_time).getTime())
        );
        let endTime = this.dateFormatter(
          new Date(new Date(data.update_time).getTime() + 1000 * 60 * 180)
        );

        let param = new URLSearchParams();
        param.append("method", "mutipleReview");
        param.append("instruct", 1);
        param.append("playType", 1);
        param.append("hls", 1);
        param.append("key", 123456);
        param.append("monitorpointId", data.monitorpoint_id);
        param.append("frequencyValue", data.frequency);
        param.append("startTime", startTime);
        param.append("endTime", endTime);

        this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
          (res) => {
            if (res.success == "true") {
              this.socketPlay = true;
              let url = res.url;
              this.playVideo = this.$refs.socketVidoPlay;
              if (Hls.isSupported()) {
                var hls = new Hls();
                hls.loadSource(url);
                hls.attachMedia(this.playVideo);
                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                  this.playVideo.play();
                });
              } else if (
                this.playVideo.canPlayType("application/vnd.apple.mpegurl")
              ) {
                this.playVideo.src = url;
                this.playVideo.addEventListener("loadedmetadata", function () {
                  this.playVideo.play();
                });
              }
            } else {
              this.$message.error(res.msg);
            }
          }
        );
      } else {
        this.$message.warning("尚未有回放");
      }
    },
    socketReplay() {
      if (this.playVideo) {
        this.playVideo.pause();
        this.playVideo = null;
      }
    },
    jumpPrev(data, index) {
      if (data.assessvalue) {
        if (index == 0) {
          this.nowSocketIndex = this.socketArray.length - 1;
        } else {
          this.nowSocketIndex = index - 1;
        }
        let param = {
          bid: "assessPress",
          frequency: this.socketArray[index].frequency,
          assessvalue: this.socketArray[index].assessvalue,
          monitorpointId: this.socketArray[index].monitorpoint_id,
          taskid: this.socketArray[index].id,
          userid: this.userid,
          recording_time: this.dateFormatter(new Date()),
        };

        this.$getJSON(window.backstageURL +
          "dataservice/getNoTokenData",
          param
        ).then((res) => {});

        if (this.player) {
          this.player.pause();
          this.player.unload();
          this.player.detachMediaElement();
          this.player.destroy();
        }
        this.player = null;
        this.nowPlayId = null;
        this.isplay = false;

        this.getInfo();

        if (this.socketArray[this.nowSocketIndex].update_time) {
          this.isHaveTime = true;
        } else {
          this.isHaveTime = false;
          this.socketArray[this.nowSocketIndex].update_time = "1";
          this.startPlay(
            this.socketArray[this.nowSocketIndex],
            this.nowSocketIndex
          );
        }
        this.isKey = !this.isKey;
      } else {
        this.$message.warning("请评分");
      }

      this.key = !this.key;
    },
    jumpNext(data, index) {
      if (data.assessvalue) {
        if (index == this.socketArray.length - 1) {
          this.nowSocketIndex = 0;
        } else {
          this.nowSocketIndex = index + 1;
        }
        this.isKey = !this.isKey;
        let param = {
          bid: "assessPress",
          frequency: this.socketArray[index].frequency,
          assessvalue: this.socketArray[index].assessvalue,
          monitorpointId: this.socketArray[index].monitorpoint_id,
          taskid: this.socketArray[index].id,
          userid: this.userid,
          recording_time: this.dateFormatter(new Date()),
        };
        this.$getJSON(window.backstageURL +
          "dataservice/getNoTokenData",
          param
        ).then((res) => {});

        this.recordingtime = "";
        if (this.player) {
          this.player.pause();
          this.player.unload();
          this.player.detachMediaElement();
          this.player.destroy();
        }
        this.player = null;
        this.nowPlayId = null;
        this.isplay = false;

        this.getInfo();
        if (this.socketArray[this.nowSocketIndex].update_time) {
          this.isHaveTime = true;
        } else {
          this.isHaveTime = false;
          this.socketArray[this.nowSocketIndex].update_time = "1";
          this.startPlay(
            this.socketArray[this.nowSocketIndex],
            this.nowSocketIndex
          );
        }

        this.isKey = !this.isKey;
      } else {
        this.$message.warning("请评分");
      }
    },
    submitAll() {
      let param = new URLSearchParams();
      param.append("bid", "updateAssessSchedule");
      param.append("schedule_id", this.nowScoreId);
      param.append(
        "complate_rate",
        this.socketArray.length + "/" + this.socketArray.length
      );
      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == 20000) {
          this.$message.success("提交成功");
        }
      });
    },
    getInfo() {
      if (this.userid == "" || this.username == "") {
        if (this.isLoney) {
          this.$emit("showLogin");
        } else {
          window.location.href =window.backstageURL +
            "ammonitor/#/passport/login";
        }
      } else {
        let param = new URLSearchParams();
        param.append("bid", "getAssessSchedule");
        param.append("userid", this.userid);

        this.$getJSON(window.backstageURL +
          "dataservice/getNoTokenData",
          param
        ).then((res) => {
          this.tableData = JSON.parse(JSON.stringify(res.data.data[0]));
        });
      }
    },
    startScore(scope) {
      if (this.userid == "" || this.username == "") {
        if (this.isLoney) {
          this.$emit("showLogin");
        } else {
          window.location.href =window.backstageURL +
            "ammonitor/#/passport/login";
        }
      } else {
        this.nowScoreId = scope.row.id;
        this.nowTime = scope.row.name;
        let param = new URLSearchParams();
        param.append("bid", "getAssessTask");
        param.append("userid", this.userid);
        param.append("schedule_id", scope.row.id);

        this.$getJSON(window.backstageURL +
          "dataservice/getNoTokenData",
          param
        ).then((res) => {
          if (res.code == 20000) {
            this.socketArray = res.data.data;
            this.showCard = true;

            if (this.socketArray[this.nowSocketIndex].update_time) {
              this.isHaveTime = true;
            } else {
              this.isHaveTime = false;
              this.socketArray[this.nowSocketIndex].update_time = "1";
              this.startPlay(
                this.socketArray[this.nowSocketIndex],
                this.nowSocketIndex
              );
            }
          }
        });
      }
    },
    closeTop() {
      this.isShow = false;
      this.showCard = false;
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
      this.$emit("closeIsShow");
    },
    closeBottom() {
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
      this.showCard = false;
    },
    carouselChange(index, oldindex) {
      if (this.recordingtime && this.socketArray[oldindex].assessvalue) {
        let param = {
          bid: "assessPress",
          frequency: this.socketArray[oldindex].frequency,
          assessvalue: this.socketArray[oldindex].assessvalue,
          monitorpointId: this.socketArray[oldindex].monitorpoint_id,
          taskid: this.socketArray[oldindex].id,
          userid: this.userid,
          recording_time: this.dateFormatter(this.recordingtime),
        };

        this.$getJSON(window.backstageURL +
          "dataservice/getNoTokenData",
          param
        ).then((res) => {});

        if (this.player) {
          this.player.pause();
          this.player.unload();
          this.player.detachMediaElement();
          this.player.destroy();
        }
        this.player = null;
        this.nowPlayId = null;
        this.isplay = false;
      } else {
        this.$message.warning("请收听并评分");

        if (this.recordingtime) {
          let param1 = new URLSearchParams();
          param1.append("method", "delete");
          param1.append(
            "monitorpointId",
            this.socketArray[oldindex].monitorpoint_id
          );
          param1.append("frequencyValue", this.socketArray[oldindex].frequency);
          param1.append("key", 123456);
          this.$getJSON(window.equipmentURL + 
            "FRP/TNewrecordtask.do",
            param1
          ).then((res) => {});
        }

        if (oldindex < index) {
          this.$refs.carousel.activeIndex = this.$refs.carousel.activeIndex - 1;
        } else {
          this.$refs.carousel.activeIndex = this.$refs.carousel.activeIndex + 1;
        }
      }
    },

    startPlay(item, index) {
      if (this.nowPlayId) {
        if (this.nowPlayId == index) {
          if (this.isplay) {
            this.$message.warning("当前设备正在播放");
          } else {
            this.isplay = true;
            this.recordingtime = new Date();
            this.player.play();
          }
        } else {
        }
      } else {
        this.nowPlayId = index;
        this.getPalyUrl(item);
      }
    },

    pausePlay() {
      this.isplay = false;
      this.player.pause();
    },
    stopPlay() {
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
      }
      this.player = null;
      this.nowPlayId = null;
      this.isplay = false;
    },

    getPalyUrl(item) {
      this.loading = true;
      let par = new URLSearchParams();

      par.append("method", "record");
      par.append("key", 111111);
      par.append("recordTimeLength", 1);
      par.append("monitorpointId", item.monitorpoint_id);
      par.append("frequencyValue", item.frequency);
      par.append("isUnderWay", 3);

      let url1 = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${item.monitorpoint_id}&frequencyValue=${item.frequency}`;
      this.$getJSON(window.equipmentURL + 
        "FRP/TNewrecordtask.do",
        par
      ).then((re) => {
        let par1 = {
          bid: "setTempRecord",
          monitorpointId: item.monitorpoint_id,
          frequency: item.frequency,
          userid: this.userid,
          requesturl: url1,
          success: re.success.toString(),
          msg: re.msg,
          recordminitus: 1,
        };

        this.$post(window.backstageURL +
          "dataservice/dealData",
          par1
        ).then((re1) => {});

        if (re.success) {
          this.$message.success(re.msg);
        } else {
          this.$message.error(re.msg);
        }
      });

      let param = new URLSearchParams();
      param.append("method", "playLiveNew");
      param.append("instruct", 1);
      param.append("playType", 0);
      param.append("hls", 0);
      param.append("key", 123456);
      param.append("monitorpointId", item.monitorpoint_id);
      param.append("frequencyValue", item.frequency);

      let url = `${window.equipmentURL}FRP/ScanSignal.do?method=playLiveNew&instruct=1&playType=0&hls=0&key=123456&monitorpointId=${item.monitorpoint_id}&frequencyValue=${item.frequency}`;
      this.$getJSON(window.equipmentURL + 
        "FRP/ScanSignal.do",
        param
      ).then((res) => {
        if (res.success == "true") {
          this.$message.success("获取直播成功");
          this.loading = false;

          let flvurl = "";
          if (res.url) {
            flvurl = res.url;
          }

          let param1 = {
            bid: "setMonitoringRecord",
            monitorpointId: item.monitorpoint_id,
            frequency: item.frequency,
            userid: this.userid,
            requesturl: url,
            success: res.success,
            msg: res.msg,
            flvurl: flvurl,
            recordminitus: 1,
          };

          this.$getJSON(
            "dataservice/recordMonitorOpt",
            param1
          ).then((res1) => {});

          if (res.url) {
            this.rtsp = res.url;

            let video = document.getElementById("videoElement");

            if (flvjs.isSupported()) {
              this.player = flvjs.createPlayer({
                type: "flv",
                url: this.rtsp,
              });

              this.player.attachMediaElement(video);

              this.player.load(); //加载

              if (this.rtsp) {
                this.recordingtime = new Date();
                this.isplay = true;
                this.player.play();
              } else {
                this.$message.error("无音频文件");
              }
            }
          } else {

          }
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    dateFormatter(time) {
      if (time) {
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return 0;
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },
  },
};
</script>
<style lang="scss" scoped>
.shadowDiv {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(96, 96, 96, 0.5);
  z-index: 998;
}
.scoreTask {
  position: fixed;
  width: 60%;
  top: 10%;
  left: 20%;
  background-color: white;
  z-index: 5000;
}

.scoreTask2 {
  position: fixed;
  width: 30%;
  left: 35%;
  background-color: white;
  z-index: 5000;
}

.iconPos {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 14px;
  z-index: 1001;
}

.carouselDiv {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.carouselbottom {
  position: absolute;
  bottom: 30px;
  display: flex;
  justify-content: center;
  width: 80%;
  margin-left: 10%;
}

.carouselTop {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;
  position: absolute;
  top: 0;
  height: 50px;

  p {
    line-height: 50px;
    font-size: 14px;
  }

  .submit {
    width: 60px;
    height: 30px;
    margin-top: 10px;
  }
}

.carouselLeft {
  position: absolute;
  top: 50px;
  bottom: 0px;
  width: 20%;
  left: 0;
  p {
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
  }
}

.carouselRight {
  position: absolute;
  top: 50px;
  bottom: 0px;
  width: 20%;
  right: 0;
  p {
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
  }
}

.carouselMid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 60%;
  margin-left: 20%;

  .carouselMidHover:hover {
    color: #409eff;
    margin-top: -3px;
    cursor: pointer;
  }
}

/deep/ .el-dialog__wrapper {
  z-index: 6000 !important;
}
</style>

 bigScreen/src/views/components/suppressionCoverage.vue

New file
@@ -0,0 +1,221 @@
<template>
  <div
    style="width: 96%; margin-left: 2%"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-text="正在加载数据"
    element-loading-spinner="el-icon-loading"
  >
    <div
      ref="chart"
      :style="{ width:'100%', height: chartHeight + 'px' }"
    ></div>
  </div>
</template>
<script>
export default {
  watch: {
    frequencyValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    timeValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    frequencyValue: {
      type: Number,
      default: 1557,
    },
    timeValue: {
      type: String,
      default: "2021-06-30 17:00",
    },
    switchValue: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      loading: true,
      chartWidth: document.body.clientWidth * 0.25 * 0.96, // 宽
      chartHeight: (document.body.clientHeight - 85) * 0.3 - 30, // 高
      xAxisData: [
        "0h",
        "1h",
        "2h",
        "3h",
        "4h",
        "5h",
        "6h",
        "7h",
        "8h",
        "9h",
        "10h",
        "11h",
        "12h",
        "13h",
        "14h",
      ],
      seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.loading = true;
      let param = new URLSearchParams();

      if (this.switchValue == 1) {
        param.append("bid", "getFreqSuppress");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getFreqSuppress_auto");
      }

      param.append("frequencystr", this.frequencyValue);
      param.append("pressMode", this.switchValue);
      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData/",
        param
      ).then((res) => {
        if (res.code == "20000") {
          let sourceData = res.data.data;
          this.xAxisData = [];
          this.seriesData = [];
          for (let i = 0; i < 15; i++) {
            this.xAxisData.push(sourceData[i].whour + "h");
            this.seriesData.push(
              sourceData[i].coverrate.substring(
                0,
                sourceData[i].coverrate.length - 1
              )
            );
          }
          this.getEchartData();
        }
      });
    },
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        let option = {
          tooltip: {
            position: "top",
          },
          legend: {
            itemHeight: 7,
            right: "30px",
            top: "0px",
            data: [String(this.frequencyValue)],
            textStyle:{
              color:"#FFFFFF",
              fontSize:10
            }
          },
          grid: {
            top: "20px",

            left: "45px",

            right: "20px",

            bottom: "40px",

            backgroundColor: "#fff",
          },
          xAxis: {
            type: "category",
            data: this.xAxisData,
            axisLabel: {
              interval: 0,
              rotate: 0,
              color: "#FFFFFF",
              fontSize: 10,
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: function (value) {
                var texts = [];
                if (value == 0) {
                  texts.push("0%");
                } else if (value <= 10) {
                  texts.push("10%");
                } else if (value <= 20) {
                  texts.push("20%");
                } else if (value <= 40) {
                  texts.push("40%");
                } else if (value <= 50) {
                  texts.push("50%");
                } else if (value <= 60) {
                  texts.push("60%");
                } else if (value <= 70) {
                  texts.push("70%");
                } else if (value <= 80) {
                  texts.push("80%");
                } else if (value <= 90) {
                  texts.push("90%");
                } else {
                  texts.push("100%");
                }
                return texts;
              },
              interval: 0,
              rotate: 0,
              color: "#FFFFFF",
              fontSize: 10,
            },

            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,225,255,0.5)",
                width: 1,
                type: "solid",
              },
            },
          },
          series: [
            {
              name: String(this.frequencyValue),
              data: this.seriesData,
              type: "line",
              color: "#5A82FC",
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

 bigScreen/src/views/components/suppressionEffect.vue

New file
@@ -0,0 +1,236 @@
<template>
  <div
    style="width:100%"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-text="正在加载数据"
    element-loading-spinner="el-icon-loading"
  >
    <div
      id="chart"
      ref="chart"
      :style="{ width:'100%', height: chartHeight + 'px' }"
    ></div>
  </div>
</template>
<script>
export default {
  watch: {
    frequencyValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    timeValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    frequencyValue: {
      type: Number,
      default: 1557,
    },
    timeValue: {
      type: String,
      default: "2021-06-30 17:00",
    },
    switchValue: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      loading: true,
      chartWidth: document.body.clientWidth * 0.25 * 0.96, // 宽
      chartHeight: (document.body.clientHeight - 85) * 0.3 - 30, // 高
      xAxisData: [
        "无数据",
        "无数据",
        "无数据",
        "无数据",
        "无数据",
        "无数据",
        "无数据",
      ],
      seriesData: [0, 0, 0, 0, 0, 0, 0],
      autopressvalue: [1, 2, 3, 4, 5, 4, 3, 2, 1],
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.loading = true;
      let param = new URLSearchParams();

      if (this.switchValue == 1) {
        param.append("bid", "getFreqParams");
      }
      if (this.switchValue == 0) {
        param.append("bid", "getFreqParams_auto");
      }

      param.append("wdate", this.timeValue.split(" ")[0]);
      param.append("whour", this.timeValue.split(" ")[1].split(":")[0]);
      param.append("frequencystr", this.frequencyValue);
      param.append("pressMode", this.switchValue);

      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == "20000") {
          let sourceData = res.data.data[0];
          this.xAxisData = [];
          this.seriesData = [];
          this.autopressvalue = [];
          sourceData.forEach((item) => {
            this.xAxisData.push(
              item.monitorpointName.replace(/[^\u4e00-\u9fa5]/gi, "")
            );
            this.seriesData.push(item.paramvalue);
            if (item.autopressvalue) {
              this.autopressvalue.push(item.autopressvalue);
            } else {
              this.autopressvalue.push(0);
            }
          });

          this.getEchartData();
        }
      });
    },
    getEchartData() {
      const myChart = this.$echarts.init(document.getElementById("chart"));
      const option = {
        legend: {
          itemHeight: 7,
          right: "30px",
          top: "0px",
          textStyle: {
            color: "#FFFFFF",
            fontSize: 10,
          },
          data: ["人工评分", "自动评分"],
        },
        grid: {
          top: "20px",

          left: "35px",

          right: "20px",

          bottom: "80px",

          backgroundColor: "#fff",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          data: this.xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 0,
            color: "#FFFFFF",
            fontSize: 10,
            formatter: function (value) {
              let arr = value.split("");
              let str = "";
              arr.forEach((item, index) => {
                if (index % 2 == 0) {
                  str += item;
                } else {
                  str += item + "\n";
                }
              });
              return value.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            interval: 0,
            rotate: 0,
            color: "#FFFFFF",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,225,255,0.5)",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            color: "#FFFFFF",
            fontSize: 10,
          },
        },
        series: [
          {
            name: "人工评分",
            data: this.seriesData,
            type: "bar",
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [10, 10, 0, 0],
              },
            },
            barWidth: 10,
            color: "#5A82FC",
          },
          {
            name: "自动评分",
            data: this.autopressvalue,
            type: "bar",
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [10, 10, 0, 0],
              },
            },
            barWidth: 10,
            color: "#4dd6b6",
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      this.loading = false;

      // }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

 bigScreen/src/views/components/topBlock.vue

New file
@@ -0,0 +1,444 @@
<template>
  <div>
    <div class="block frequencyBlock">
      <p style="color: rgba(77, 214, 182, 1)">频率</p>
      <el-slider
        v-model="frequencyValue"
        :min="frequencyMin"
        :max="frequencyMax"
        :marks="frequencyMarks"
        :format-tooltip="frequencyFormatTooltip"
        :show-tooltip="true"
        :step="9"
        ref="slider1"
        style="width: 100%; margin-left: 20px"
        :key="key"
      >
      </el-slider>
      <div class="labelShow">123</div>
      <el-switch
        v-model="switchValue"
        active-text="人工"
        inactive-text="自动"
        style="width: 180px"
        active-color="#4DD6B6"
      >
      </el-switch>
    </div>

    <div class="block timeBlock" style="padding-bottom: 25px">
      <p style="color: rgba(77, 214, 182, 1)">时间</p>

      <el-slider
        v-model="timeValue"
        :min="timeMin"
        :max="timeMax"
        :marks="marks"
        :format-tooltip="formatTooltip"
        :show-tooltip="true"
        style="width: 100%; margin-left: 20px"
        ref="slider2"
        @change="changeTimeWay"
      >
      </el-slider>

      <el-tooltip class="item" effect="dark" content="自动播放" placement="top">
        <i
          class="el-icon-video-play"
          style="margin-left: 20px; cursor: pointer"
          v-if="!playState"
          @click="startPlay"
        ></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="暂停播放" placement="top">
        <i
          class="el-icon-video-pause"
          style="margin-left: 20px; cursor: pointer"
          v-if="playState"
          @click="stopPlay"
        ></i>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="切换等高线"
        placement="top"
      >
        <i
          class="el-icon-refresh"
          style="margin-left: 20px; cursor: pointer"
          @click="changeMap"
        ></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="设置色值" placement="top">
        <i
          class="el-icon-s-tools"
          style="margin-left: 20px; cursor: pointer"
          @click="setColor"
        ></i>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
export default {
  watch: {
    frequencyValue: {
      handler(n, o) {
        if (this.timer2) {
          clearTimeout(this.timer2);
        }
        this.timer2 = setTimeout(() => {
          this.getInfo();
          this.$emit("changeFrequency", this.frequencyValue);
        }, 1000);
      },
      deep: true,
      immediate: true,
    },
    timeValue: {
      handler(n, o) {
        if (this.timer1) {
          clearTimeout(this.timer1);
        }
        this.timer1 = setTimeout(() => {
          this.getInfo();
          if (this.marksData[this.timeValue]) {
            this.$emit("changeTimeValue", this.marksData[this.timeValue]);
          } else {
            this.$emit("changeTimeValue", this.getCurrentTime());
          }
        }, 1000);
      },
      deep: true,
      immediate: true,
    },
    switchValue: {
      handler(n, o) {
        if (this.switchValue) {
          this.$emit("changeSwitchValue", 1);
        } else {
          this.$emit("changeSwitchValue", 0);
        }
        this.getInfo();
      },
      deep: true,
      immediate: true,
    },
    leftSelFre: {
      handler(n, o) {
        this.frequencyValue = Number(
          JSON.parse(JSON.stringify(this.leftSelFre))
        );
        this.key = !this.key;
      },
    },
  },
  computed: {
    timeMarks() {
      let marks = {};
      for (let i = 0; i <= 24; i++) {
        marks[i] = {
          style: {
            color: "rgba(77, 214, 182, 1)",
          },
          label: i + "h",
        };
      }
      return marks;
    },
  },
  props: ["leftSelFre"],
  data() {
    return {
      key: false,
      timer1: null,
      timer2: null,
      switchValue: true,
      playState: false,
      timeInterval: null,
      artificialChecked: false,
      timeValue: 0,
      timeMin: 0,
      timeMax: 24,
      marks: {},
      marksData: [],

      frequencyMin: 522,
      frequencyMax: 1620,
      frequencyValue: 1557,
      frequencyMarks: {
        540: {
          style: {
            color: "rgba(77, 214, 182, 1)",
          },
          label: "540MHZ",
        },
        1600: {
          style: {
            color: "rgba(77, 214, 182, 1)",
          },
          label: "1600MHZ",
        },
      },
    };
  },
  mounted() {

    this.$nextTick(() => {
      this.$refs.slider1.setPosition(((1557 - 522) / 1098) * 100);
      this.$refs.slider2.setPosition(0);
    });
    this.getInfoInit();
    this.timeValue = this.timeMax;
  },
  methods: {
    setColor() {
      this.$emit("showColorBlock");
    },
    changeTimeWay() {},
    getCurrentTime() {
      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let gettime = yy + "-" + mm + "-" + dd + " " + hh + ":00";
      return gettime;
    },
    changeMap() {
      this.$emit("changeMap");
    },
    frequencyFormatTooltip(val) {
      return val + "MHz";
    },
    formatTooltip(val) {
      return this.marksData[val];
    },
    getInfo() {
      let param = new URLSearchParams();

      if (this.switchValue) {
        param.append("bid", "getTimeline");
      } else {
        param.append("bid", "getTimeline_auto");
      }

      param.append("frequencystr", this.frequencyValue);
      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == "20000") {
          let sourceData = res.data.data[0];
          this.marks = {};
          let marksData = [];
          this.timeMax = sourceData.length - 1;
          sourceData.forEach((item, index) => {
            // console.log(item.wdate.split("T")[0].split(" ")[0])
            marksData.push(
              item.wdate.split("T")[0].split(" ")[0] + " " + item.whour + ":00"
            );
          });
          this.marks = {
            0: {
              style: {
                color: "rgba(77, 214, 182, 1)",
              },
              label: marksData[0],
            },
            [marksData.length - 1]: {
              style: {
                color: "rgba(77, 214, 182, 1)",
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              },
              label: marksData[marksData.length - 1],
            },
          };
          this.marksData = marksData;
        }
      });
    },
    getInfoInit() {
      let param = new URLSearchParams();

      if (this.switchValue) {
        param.append("bid", "getTimeline");
      } else {
        param.append("bid", "getTimeline_auto");
      }

      param.append("frequencystr", this.frequencyValue);
      this.$getJSON(window.backstageURL +
        "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == "20000") {
          let sourceData = res.data.data[0];
          this.marks = {};
          let marksData = [];
          this.timeMax = sourceData.length - 1;
          this.timeValue = this.timeMax;
          sourceData.forEach((item, index) => {
            marksData.push(
              item.wdate.split("T")[0].split(" ")[0] + " " + item.whour + ":00"
            );
          });
          this.marks = {
            0: {
              style: {
                color: "rgba(77, 214, 182, 1)",
              },
              label: marksData[0],
            },
            [marksData.length - 1]: {
              style: {
                color: "rgba(77, 214, 182, 1)",
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              },
              label: marksData[marksData.length - 1],
            },
          };
          this.marksData = marksData;
        }
      });
    },
    startPlay() {
      if (this.timeValue == this.timeMax) {
        this.timeValue = 0;
      }
      this.playState = true;
      this.startInterval();
    },
    stopPlay() {
      this.playState = false;
      this.dropInterval();
    },
    changeSlider() {
      let start = new Date(this.dataPick[0]);
      let end = new Date(this.dataPick[1]);
    },
    startInterval() {
      this.playState = true;

      this.timeInterval = setInterval(() => {
        if (this.timeValue == this.timeMax) {
          this.dropInterval();
        } else {
          this.timeValue = this.timeValue + 1;
        }
      }, 10000);
    },
    dropInterval() {
      clearInterval(this.timeInterval);
      this.playState = false;
      this.timeInterval = null;
    },
  },

  beforeDestroy() {
    this.dropInterval();
    clearTimeout(this.timer1);
    clearTimeout(this.timer2);
  },
};
</script>
<style lang="scss" scoped>

/deep/ .el-switch__label span {
  color: #ffffff;
}

/deep/ .is-active span {
  color: #4dd6b6 !important;
}

/deep/ .el-switch {
  height: 30px;
  line-height: 30px;
  text-align: right !important;
  display: block;
}

/deep/ .el-range-editor.el-input__inner {
  background-color: rgba(77, 214, 182, 1);
}

/deep/ .el-date-editor .el-range__icon {
  color: black;
}

/deep/ .el-range-editor .el-range-input {
  background-color: rgba(77, 214, 182, 1);
  color: black;
}

/deep/ .frequencyBlock .el-slider__marks-text {
  margin-top: -25px !important;
}

/deep/ .timeBlock .el-slider__marks-text {
}

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: rgba(77, 214, 182, 1) !important;
}

/deep/ .el-checkbox__inner {
  background-color: rgba(77, 214, 182, 0.6) !important;
  border-color: rgba(77, 214, 182, 1) !important;
}

/deep/ .el-slider__bar {
  background-color: rgba(77, 214, 182, 1) !important;
}

/deep/ .el-slider__stop {
  background-color: transparent !important;
}

.block {
  width: 96%;
  margin-left: 2%;
  display: flex;
  justify-content: space-between;
  z-index: 109;
  padding-top: 25px;

  i {
    white-space: nowrap;
    line-height: 38px;
    font-size: 14px;
    color: rgba(77, 214, 182, 1);
  }

  p {
    white-space: nowrap;
    line-height: 38px;
    font-size: 14px;
  }
}

.labelShow {
  position: absolute;
  border-radius: 4px;
  padding: 10px;
  z-index: 2000;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  word-wrap: break-word;
}
</style>

 bigScreen/src/views/components/validCode.vue

New file
@@ -0,0 +1,187 @@
// 第二种方法 canvas 绘制干扰点干扰线
<template>
  <div class="s-canvas" @click="createdCode">
    <canvas
      id="s-canvas"
      :width="contentWidth"
      :height="contentHeight"
    ></canvas>
  </div>
</template>
<script>
import Vue from "vue";
export default Vue.extend({
  props: {
    fontSizeMin: {
      type: Number,
      default: 25,
    },
    fontSizeMax: {
      type: Number,
      default: 30,
    },
    backgroundColorMin: {
      type: Number,
      default: 255,
    },
    backgroundColorMax: {
      type: Number,
      default: 255,
    },
    colorMin: {
      type: Number,
      default: 0,
    },
    colorMax: {
      type: Number,
      default: 160,
    },
    lineColorMin: {
      type: Number,
      default: 100,
    },
    lineColorMax: {
      type: Number,
      default: 255,
    },
    dotColorMin: {
      type: Number,
      default: 0,
    },
    dotColorMax: {
      type: Number,
      default: 255,
    },
    contentWidth: {
      type: Number,
      default: 120,
    },
    contentHeight: {
      type: Number,
      default: 34,
    },
  },
  watch: {
    identifyCode: {
      handler(n, o) {
        this.$emit("changeIdent",this.identifyCode)
      },
    },
  },
  data() {
    return {
      identifyCode: "",
    };
  },
  mounted() {
    this.createdCode();
  },
  methods: {
    // 生成4个随机数
    createdCode() {
      const len = 4;
      const codeList = [];
      const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
      const charsLen = chars.length;
      for (let i = 0; i < len; i++) {
        codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)));
      }
      this.identifyCode = codeList.join("");
      this.$emit("getIdentifyCode", this.identifyCode.toLowerCase());
      this.drawPic();
    },

    // 生成一个随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 生成一个随机的颜色
    randomColor(min, max) {
      const r = this.randomNum(min, max);
      const g = this.randomNum(min, max);
      const b = this.randomNum(min, max);
      return "rgb(" + r + "," + g + "," + b + ")";
    },

    drawPic() {
      const canvas = document.getElementById("s-canvas");
      const ctx = canvas.getContext("2d");
      ctx.textBaseline = "bottom";
      // 绘制背景
      ctx.fillStyle = this.randomColor(
        this.backgroundColorMin,
        this.backgroundColorMax
      );
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
      // 绘制文字
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i);
      }
      this.drawLine(ctx);
      this.drawDot(ctx);
    },

    drawText(ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
      ctx.font =
        this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";
      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
      const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
      var deg = this.randomNum(-45, 45);
      // 修改坐标原点和旋转角度
      ctx.translate(x, y);
      ctx.rotate((deg * Math.PI) / 180);
      ctx.fillText(txt, 0, 0);
      // 恢复坐标原点和旋转角度
      ctx.rotate((-deg * Math.PI) / 180);
      ctx.translate(-x, -y);
    },

    // 绘制干扰线
    drawLine(ctx) {
      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = this.randomColor(
          this.lineColorMin,
          this.lineColorMax
        );
        ctx.beginPath();
        ctx.moveTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.lineTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.stroke();
      }
    },

    // 绘制干扰点
    drawDot(ctx) {
      for (let i = 0; i < 80; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight),
          1,
          0,
          2 * Math.PI
        );
        ctx.fill();
      }
    },
  },
});
</script>
<style scoped>
.s-canvas {
  height: 38px;
  cursor: pointer;
}
.s-canvas canvas {
  margin-top: 1px;
  margin-left: 8px;
}
</style>

 bigScreen/src/views/homePage.vue

New file
@@ -0,0 +1,1557 @@
<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :element-loading-text="alertInfo"
    element-loading-spinner="el-icon-loading"
  >
    <div
      id="img"
      style="
        display: none;
        width: 200px;
        height: 450px;
        position: absolute;
        top: 8px;
        left: 216px;
      "
    ></div>

    <div class="title">
      <p class="whether">
        <span
          >{{ whetherInfo.reporttime.split(" ")[0] }}
          {{ whetherInfo.reporttime.split(" ")[1].split(":")[0] + ":00" }}
          天气:{{ whetherInfo.weather }} 气温:{{
            whetherInfo.temperature
          }}</span
        >
        <br /><span>
          湿度:{{ whetherInfo.humidity }} 风向:{{
            whetherInfo.winddirection
          }}
          风力:{{ whetherInfo.windpower }}</span
        >

        <!-- 日期+ 小时 天气 气温 湿度 风向 风力 -->
      </p>
      <p class="titleText">上海市中波广播监测平台</p>
      <p class="tagDiv">
        <el-radio-group v-model="radioValue" size="mini">
          <el-radio-button label="0">监测评估</el-radio-button>
          <el-radio-button label="1">覆盖评估</el-radio-button>
        </el-radio-group>
        <svg-icon
          class="svgIcon"
          icon-class="task"
          style="margin-left: 20px"
          @click="showSocket()"
        ></svg-icon>
      </p>
    </div>
    <transition name="topMove" enter-class="topMoveStart">
      <div class="topBlock" v-if="topDrawState">
        <div class="topBlockMain">
          <topBlock
            @changeFrequency="changeFrequency"
            @changeTimeValue="changeTimeValue"
            @changeSwitchValue="changeSwitchValue"
            @changeMap="changeMap"
            @showColorBlock="showColorBlock"
            :leftSelFre="leftSelFre"
          ></topBlock>
        </div>
        <div class="topButton" @click="hideTop" v-if="!topDrawState">
          <i class="el-icon-caret-top"></i>
        </div>
      </div>
    </transition>
    <div class="hideTopButton" @click="showTop" v-if="!topDrawState">
      <i class="el-icon-caret-bottom"></i>
    </div>

    <!-- <div v-draw class="drawTip">1231231 12312312</div> -->

    <el-dialog
      title=""
      :visible.sync="colorBlockIsShow"
      width="40%"
      style="z-index: 8000; over-flow: scroll"
    >
      <span slot="title">
        <div
          style="
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            width: 80%;
            margin-left: 10%;
          "
        >
          <p style="line-height: 28px; font-size: 16px">设置色值</p>
          <el-button type="primary" size="mini" @click="addColor"
            >增加</el-button
          >
        </div>
      </span>
      <el-table :data="colors" style="width: 100%" height="400">
        <el-table-column label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column prop="color" label="颜色">
          <template slot-scope="scope">
            <div>
              <el-color-picker v-model="scope.row.color"></el-color-picker>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="color" label="色值"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" type="danger" @click="delColor(scope)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="colorBlockIsShow = false">取 消</el-button>
        <el-button type="primary" @click="sureColor">确 定</el-button>
      </span>
    </el-dialog>

    <transition name="pointMove" enter-class="pointMoveStart">
      <div class="pointBlock" v-if="pointDrawState">
        <div class="pointBlockMain">
          <div class="pointBlockContent">
            <pointInfo
              ref="pointInfo"
              :pontInfoData="pontInfoData"
              @showLogin="showLogin"
              @showLoading="showLoading"
              @hideLoading="hideLoading"
              @startScore="startScore"
              @showLookBack="showLookBack"
              @joinRecord="joinRecord"
              @startPlay="startPlay"
              @stopPlay="stopPlay"
              :userid="userid"
              :username="username"
              :isLoney="isLoney"
            ></pointInfo>
          </div>
        </div>
        <div class="pointButton" @click="hidePoint">
          <i class="el-icon-circle-close"></i>
        </div>
      </div>
    </transition>

    <div style="z-index: 98">
      <bigScreenMap
        @showInfo="showInfo"
        @changeNowType="changeNowType"
        :switchValue="switchValue"
        :frequencyValue="frequencyValue"
        :timeValue="timeValue"
        :isChage="isChage"
        ref="bigScreenMap"
        :jumpPointId="jumpPointId"
        :changeAssessValue="changeAssessValue"
      ></bigScreenMap>
    </div>

    <transition name="leftMove" enter-class="leftMoveStart">
      <div class="leftBlock" v-if="leftDrawState">
        <leftBlock
          class="leftBlockMain"
          :switchValue="switchValue"
          :frequencyValue="frequencyValue"
          :timeValue="timeValue"
          :radioValue="radioValue"
          @selFre="selFre"
        ></leftBlock>
        <div class="leftButton" @click="hideLeft">
          <i class="el-icon-caret-left"></i>
        </div>
      </div>
    </transition>
    <div class="hideLeftButton" @click="showLeft" v-if="!leftDrawState">
      <i class="el-icon-caret-right"></i>
    </div>

    <transition name="rightMove" enter-class="rightMoveStart">
      <div class="rightBlock" v-if="rightDrawState">
        <rightBlock
          class="rightBlockMain"
          :switchValue="switchValue"
          :frequencyValue="frequencyValue"
          :timeValue="timeValue"
          :radioValue="radioValue"
          :leftSelFre="leftSelFre"
          :userid="userid"
          @showLoading="showLoading"
          @hideLoading="hideLoading"
          @assessUpdate="assessUpdate"
          @jumpPoint="jumpPoint"
          @changeAssess="changeAssess"
          @playVideoRight="playVideoRight"
          @startPlay="startPlay"
          @stopPlay="stopPlay"
        ></rightBlock>
        <div class="rightButton" @click="hideRight">
          <i class="el-icon-caret-right"></i>
        </div>
      </div>
    </transition>

    <div class="hideRightButton" @click="showRight" v-if="!rightDrawState">
      <i class="el-icon-caret-left"></i>
    </div>

    <div>
      <el-dialog title="提示" :visible.sync="loginDialogVisible" width="50%">
        <el-form
          :model="loginForm"
          :rules="loginFormRule"
          ref="loginForm"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="identifyCode">
            <div style="display: flex">
              <el-input v-model="loginForm.identifyCode"></el-input>

              <valid-code @changeIdent="changeIdent"></valid-code>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')"
              >确定</el-button
            >
            <el-button @click="loginDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <el-dialog title="请评分" :visible.sync="scoreOperationDialog">
      <div class="scoreOperation">
        <p>评分:</p>
        <el-select
          v-model="selScoreValue"
          placeholder="请选择评分"
          style="width: 100%; margin-left: 20px"
        >
          <el-option
            :label="item.level_name"
            :value="item.id"
            v-for="item in selScoreArr"
            :key="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="scoreOperationDialog = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="sureScore()" size="mini"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <socketInfo
      :visible.sync="socketInfoDialog"
      @closeIsShow="closeIsShow"
      @showLookBack="showLookBack"
      :userid="userid"
      :username="username"
      :isLoney="isLoney"
    >
    </socketInfo>

    <el-dialog :visible.sync="lookBackVisible" @close="closeReplay">
      <div slot="title" class="lookBackDataTitle">
        <p>{{ lookBackData.monitorpointName }}</p>
        <p>{{ lookBackData.status_name }}</p>
      </div>
      <div>
        <div class="lookBackBlock">
          <span class="demonstration">回放时间</span>
          <el-date-picker
            v-model="selTimeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="margin-left: 20px"
          >
          </el-date-picker>
        </div>
        <div class="lookBackBlock" style="margin-top: 30px">
          <span>请选择频率:</span>
          <el-select
            v-model="frequencySel"
            placeholder="请先填写日期"
            style="margin-left: 20px"
          >
            <el-option
              v-for="(item, index) in frequencyArr"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-tooltip
            class="item"
            effect="dark"
            content="点击收听"
            placement="top"
          >
            <i
              class="el-icon-video-play"
              style="margin-left: 20px"
              @click="replayRecord()"
              v-show="!isReplay"
            ></i>
          </el-tooltip>
        </div>
      </div>

      <div style="margin-top: 30px">
        <video
          id="testVideo"
          ref="testVideo"
          src=""
          controls
          preload
          width="90%"
          height="300"
          v-show="isReplay"
        >
          qqq
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bigScreenMap from "./components/bigScreenMap";
import leftBlock from "./components/leftBlock";
import rightBlock from "./components/rightBlock";
import topBlock from "./components/topBlock";
import pointInfo from "./components/pointInfo";
import socketInfo from "./components/socketInfo";
import validCode from "./components/validCode";
import kriging_default_params from "@/utils/kriging_default_params";
import { Notification } from "element-ui";

export default {
  components: {
    bigScreenMap,
    leftBlock,
    rightBlock,
    topBlock,
    pointInfo,
    socketInfo,
    validCode,
  },
  filters: {
    formatSocketTime(time) {
      if (time) {
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return 0;
      }
    },
  },
  sockets: {
    connect() {
      this.$socket.emit("connection"); //监听connect事件
    },
    getMsg(data) {
      console.log(JSON.parse(data));
      this.$refs.bigScreenMap.changePointState(JSON.parse(data));
    },
  },
  data() {
    return {
      nowType: 0,
      colors: [],
      colorBlockIsShow: false,
      identifyCode: null,
      changeAssessValue: null,
      isChage: false,
      leftSelFre: "",
      radioValue: "0",
      isReplay: false,
      lookBackVisible: false,
      lookBackData: {},
      selTimeValue: [],
      frequencySel: "",
      frequencyArr: [],
      isLoney: false,
      userid: "",
      username: "",
      rateValue: "",
      isChange: true,
      whetherInfo: {
        city: "",
        weather: "",
        reporttime: "",
        temperature: "",
        humidity: "",
        winddirection: "",
        windpower: "",
      },
      loginForm: {
        username: "",
        password: "",
        identifyCode: "",
      },
      loginFormRule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        identifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      scoreFrequency: "",
      switchValue: 1,
      leftDrawState: false,
      rightDrawState: false,
      topDrawState: true,
      pointDrawState: false,
      pontInfoData: null,
      timeValue: "",
      frequencyValue: 1557,
      loginDialogVisible: false,
      alertInfo: "",
      loading: false,
      scoreOperationDialog: false,
      selScoreValue: "",
      selScoreArr: [],
      scoreInfo: {},
      socketInfoDialog: false,
      isClose: false,
      socketArray: [{ frequency: "--", monitorpointName: "--" }],
      nowTaskId: "",
      nowPlayId: null,
      player: null,
      showIndex: 0,
      isLogin: false,
      playVideo: null,

      jumpPointId: null,
    };
  },
  mounted() {
    let nowUrl = window.parent.document.URL.split("/");
    if (nowUrl[3] == "ammonitor") {
      this.isLoney = false;
      if (localStorage.getItem("user") && localStorage.getItem("_token")) {
        this.userid = JSON.parse(localStorage.getItem("user")).name;
        this.username = JSON.parse(localStorage.getItem("_token")).account;
        this.getColors();
      } else {
        window.location.href =
          window.backstageURL + "ammonitor/#/passport/login";
      }
    } else {
      this.isLoney = true;
      if (sessionStorage.getItem("userName")) {
        this.isLogin = true;
        let userInfo = JSON.parse(sessionStorage.getItem("userName"));
        this.userid = userInfo.account;
        this.username = userInfo.username;
        this.getColors();
      } else {
        this.isLogin = false;
        this.showLogin();
      }
    }

    if (this.timeValue) {
      this.getWhetherInfo();
    } else {
      this.timeValue = this.getCurrentTime();
    }
  },
  watch: {
    selTimeValue: {
      handler(n, o) {
        if (this.selTimeValue.length == 2) {
          this.frequencySel = "";
          this.getFrequencySel();
        }
      },
    },
    frequencySel: {
      handler(n, o) {
        if (this.frequencySel) {
          this.isReplay = false;
          if (this.playVideo) {
            this.playVideo.pause();
            this.playVideo = null;
          }
        }
      },
    },

    timeValue: {
      handler(n, o) {
        if (this.timeValue) {
          this.getWhetherInfo();
        } else {
          this.timeValue = this.getCurrentTime();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    startPlay(playData) {
      this.$emit("startPlay", playData);
    },
    stopPlay() {
      this.$emit("stopPlay");
    },
    joinRecord(recordData) {
      this.$emit("joinRecord", recordData);
    },
    playVideoRight() {
      this.$emit("playVideo");
    },
    changeNowType(nowType) {
      this.nowType = nowType;
    },
    getColors() {
      let param = {
        bid: "getCoverColors",
        userid: this.userid,
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        let getColor = JSON.parse(res.data.data[0][0].colors);
        this.color = [];
        kriging_default_params.colors = getColor;
        getColor.forEach((item) => {
          let one = { color: item };
          this.colors.push(one);
        });
      });
    },
    sureColor() {
      this.colorBlockIsShow = false;
      let changeColor = [];
      this.colors.forEach((item) => {
        changeColor.push(item.color);
      });
      kriging_default_params.colors = changeColor;

      let param = {
        bid: "setCoverColors",
        userid: this.userid,
        colors: changeColor,
      };
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {});

      if (this.nowType == 1) {
        this.$refs.bigScreenMap.changeColor();
      }
    },
    addColor() {
      if (this.colors.length > 30) {
        this.$message.warning("个数不能大于30个");
      } else {
        let oneColor = { color: "#FFFFFF" };
        this.colors.push(oneColor);
      }
    },
    delColor(scope) {
      this.colors.splice(scope.$index, 1);
    },
    showColorBlock() {
      this.colorBlockIsShow = true;
    },
    changeIdent(val) {
      this.identifyCode = val;
    },
    changeAssess(changeAssessValue) {
      this.changeAssessValue = changeAssessValue;
    },
    jumpPoint(pointInfo) {
      this.jumpPointId = pointInfo.monitorpointId;
    },
    add0(val) {
      return val < 10 ? "0" + val : val;
    },
    tryDownLoad() {
      this.$refs.bigScreenMap.tryDown();
    },
    assessUpdate() {
      this.isChage = !this.isChage;
    },
    selFre(fre) {
      this.leftSelFre = fre;
    },
    closeReplay() {
      this.selTimeValue = [];
      this.frequencySel = "";
      this.frequencyArr = [];
      this.isReplay = false;
      if (this.playVideo) {
        this.playVideo.pause();
        this.playVideo = null;
      }
    },
    playReplay(url) {
      this.playVideo = this.$refs.testVideo;
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(this.playVideo);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          this.playVideo.play();
        });
      } else if (this.playVideo.canPlayType("application/vnd.apple.mpegurl")) {
        this.playVideo.src = url;
        this.playVideo.addEventListener("loadedmetadata", function () {
          this.playVideo.play();
        });
      }
    },
    replayRecord() {
      let param = new URLSearchParams();
      param.append("method", "mutipleReview");
      param.append("instruct", 1);
      param.append("playType", 1);
      param.append("hls", 1);
      param.append("key", 123456);
      param.append("monitorpointId", this.lookBackData.monitorpointId);
      param.append("frequencyValue", this.frequencySel);
      param.append("startTime", this.dateFormatter(this.selTimeValue[0]));
      param.append("endTime", this.dateFormatter(this.selTimeValue[1]));

      this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
        (res) => {
          if (res.success == "true") {
            this.isReplay = true;
            this.playReplay(res.url);
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    getFrequencySel() {
      this.isReplay = false;
      if (this.playVideo) {
        this.playVideo.pause();
        this.playVideo = null;
      }

      let param = new URLSearchParams();
      param.append("bid", "getRecordFreqs");
      param.append("start_time", this.dateFormatter(this.selTimeValue[0]));
      param.append("end_time", this.dateFormatter(this.selTimeValue[1]));
      param.append("monitorpointId", this.lookBackData.monitorpointId);
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        let fArr = [];
        res.data.data[0].forEach((item) => {
          fArr.push(item.frequencyValue);
        });
        this.frequencyArr = fArr;
      });
    },
    showLookBack(data) {
      this.$emit("showRePlay", data);
    },
    handleCommand(command) {
      if (command == "a") {
        this.showSocket();
      }
      if (command == "b") {
        this.loginOut();
      }
      if (command == "c") {
        this.showLogin();
      }
    },
    loginOut() {
      sessionStorage.setItem("userName", "");
      this.isLogin = false;
      this.$message.success("退出成功");
    },
    closeIsShow() {
      this.socketInfoDialog = false;
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === this.showIndex) {
        return "successRow";
      }
      return "";
    },
    changeMap() {
      // this.colorTips = true
      this.$refs.bigScreenMap.changeMapInit();
    },

    openSocket() {
      let that = this;
      this.$notify({
        title: "提示",
        message: "您有一条未处理信息",
        type: "warning",
        duration: 0,
        onClick() {
          that.showSocket(); //自定义回调,message为传的参数
        },
        onClose() {
          if (that.socketInfoDialog) {
          } else {
            that.isClose = true;
          }
        },
      });
    },
    showSocket() {
      if (this.userid == "" || this.username == "") {
        if (this.isLoney) {
          this.showLogin();
        } else {
          window.location.href =
            window.backstageURL + "ammonitor/#/passport/login";
        }
      } else {
        this.socketInfoDialog = true;
        this.isClose = false;
        Notification.closeAll();
      }
    },
    sureScore() {
      let param = new URLSearchParams();
      param.append("bid", "assessPress");
      param.append("frequency", this.scoreInfo.frequencyValue);
      param.append("monitorstationId", this.scoreInfo.monitorpointId);
      param.append("assessvalue", this.selScoreValue);
      param.append("userName", this.username);
      param.append("userid", this.userid);
      if (this.scoreInfo.taskid) {
        param.append("taskid", this.scoreInfo.taskid);
      } else {
        param.append("taskid", "");
      }

      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == 20000) {
          this.$message.success(res.data.data[0][0].messg);
        } else {
          this.$message.error(res.data.data[0][0].messg);
        }
        this.scoreOperationDialog = false;
      });
    },
    showStartScore(info) {
      this.scoreInfo = {};
      this.scoreInfo.taskid = info.id;
      this.scoreInfo.frequencyValue = info.frequency;
      this.scoreInfo.monitorpointId = info.monitorpointId;
      let param = new URLSearchParams();
      param.append("bid", "assessDict");
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == 20000) {
          this.selScoreArr = res.data.data;
          this.scoreOperationDialog = true;
        }
      });
    },
    startScore(info) {
      this.scoreInfo = {};
      this.scoreInfo = info;
      let param = new URLSearchParams();
      param.append("bid", "assessDict");
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        if (res.code == 20000) {
          this.selScoreArr = res.data.data;
          this.scoreOperationDialog = true;
        }
      });
    },
    getWhetherInfo() {
      console.log(new Date(this.timeValue));
      let param = new URLSearchParams();
      param.append("bid", "getWeather");
      param.append("datestr", this.timeValue.split(" ")[0]);
      param.append("hour", this.timeValue.split(" ")[1].split(":")[0]);
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        this.whetherInfo = res.data.data[0][0];
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            this.identifyCode.toUpperCase() ==
            this.loginForm.identifyCode.toUpperCase()
          ) {
            let param = new URLSearchParams();
            param.append("bid", "login");
            param.append("userid", this.loginForm.username);
            param.append("psw", this.loginForm.password);
            this.$getJSON(
              window.backstageURL + "dataservice/getNoTokenData",
              param
            ).then((res) => {
              if (res.data.data.length == 0) {
                this.$message.error("用户名或者密码错误");
              } else {
                sessionStorage.setItem(
                  "userName",
                  JSON.stringify(res.data.data[0])
                );
                this.userid = res.data.data[0].account;
                this.username = res.data.data[0].username;
                this.loginDialogVisible = false;
                this.isLogin = true;
                // this.$refs.bigScreenMap.oldMapInit()
                localStorage.setItem("user",JSON.stringify({name:res.data.data[0].account}));
                localStorage.setItem("_token",JSON.stringify({account:res.data.data[0].username}));
                this.$refs.bigScreenMap.mapInit()
                this.getColors();
              }
            });
          } else {
            this.$message.error("验证码错误");
          }
        } else {
          return false;
        }
      });
    },
    resetForm() {},
    showInfo(content) {
      this.pontInfoData = content;
      this.pointDrawState = true;
      // this.showDraw();
    },
    hideLeft() {
      this.leftDrawState = false;
    },
    showLeft() {
      this.leftDrawState = true;
    },
    hideTop() {
      this.topDrawState = false;
    },
    showTop() {
      this.topDrawState = true;
    },
    hidePoint() {
      this.pointDrawState = false;
    },
    hideRight() {
      this.rightDrawState = false;
    },
    showRight() {
      this.rightDrawState = true;
    },
    showDraw() {
      this.leftDrawState = true;
      this.topDrawState = true;
      this.rightDrawState = true;
      this.pointDrawState = true;
    },
    closeDrow() {
      this.leftDrawState = false;
      this.rightDrawState = false;
      this.topDrawState = false;
      this.pointDrawState = false;
    },
    changeFrequency(value) {
      this.frequencyValue = value;
    },
    changeTimeValue(value) {
      this.timeValue = value;
    },
    changeSwitchValue(value) {
      this.switchValue = value;
    },
    showLogin() {
      this.loginDialogVisible = true;
    },
    showLoading(msg) {
      if (msg == "jianting") {
        this.alertInfo = "正在获取监听文件";
      }
      if (msg == "luzhi") {
        this.alertInfo = "正在加入录制";
      }
      this.loading = true;
    },
    hideLoading() {
      this.loading = false;
    },
    getCurrentTime() {
      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let gettime = yy + "-" + mm + "-" + dd + " " + hh + ":00";
      return gettime;
    },
    dateFormatter(time) {
      if (time) {
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return (
          this.add0(year) +
          "-" +
          this.add0(month) +
          "-" +
          this.add0(date) +
          " " +
          this.add0(hour) +
          ":" +
          this.add0(minute) +
          ":" +
          this.add0(second)
        );
      } else {
        return 0;
      }
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.pause();
      this.player.unload();
      this.player.detachMediaElement();
      this.player.destroy();
      this.player = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.leftMove-leave-to {
  animation: leftMoveLeave 0.3s linear;
}
.leftMove-enter-to {
  animation: leftMoveEnter 0.3s linear;
}

@keyframes leftMoveLeave {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
@keyframes leftMoveEnter {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.rightMove-leave-to {
  animation: rightMoveLeave 0.3s linear;
}
.rightMove-enter-to {
  animation: rightMoveEnter 0.3s linear;
}

@keyframes rightMoveLeave {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}
@keyframes rightMoveEnter {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.topMove-leave-to {
  animation: topMoveLeave 0.3s linear;
}
.topMove-enter-to {
  animation: topMoveEnter 0.3s linear;
}

@keyframes topMoveLeave {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}
@keyframes topMoveEnter {
  0% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.pointMove-leave-to {
  animation: pointMoveLeave 0.3s linear;
}
.pointMove-enter-to {
  animation: pointMoveEnter 0.3s linear;
}

@keyframes pointMoveLeave {
  0% {
    transform: scale(100%, 100%);
  }
  100% {
    transform: scale(0, 0);
  }
}
@keyframes pointMoveEnter {
  0% {
    transform: scale(0, 0);
  }
  100% {
    transform: scale(100%, 100%);
  }
}

.title {
  width: 100%;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;

  .titleText {
    font-size: 46px;
    line-height: 80px;
    text-align: center;
    background: linear-gradient(
      to bottom,
      rgba($color: aqua, $alpha: 0.8),
      rgba($color: blue, $alpha: 0.8)
    );
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 900;
    letter-spacing: 20px;
    font-family: Tahoma;
  }

  .whether {
    position: fixed;
    line-height: 40px;
    font-size: 18px;
    color: white;
    left: 30px;
    top: 0;

    span {
      font-size: 18px;
      font-weight: 800;
    }
  }

  .tagDiv {
    position: fixed;
    line-height: 80px;
    font-size: 20px;
    color: white;
    right: 30px;
    top: 0;
  }
}
.haveMessage {
  position: flex;
  top: 0;
  left: 0;

  width: 106px;
  z-index: 999;
}
.topBlock {
  top: 85px;
  left: 30%;
  width: 40%;
  height: 150px;
  position: fixed;
  z-index: 100;
  background: rgba(0, 0, 0, 0.8);

  .topBlockMain {
    width: 100%;
    height: 100%;
    z-index: 100;
    background: linear-gradient(
          to top,
          rgba(77, 214, 182, 0.6),
          rgba(77, 214, 182, 1)
        )
        left top no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        left top no-repeat,
      linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right top no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        right top no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
  }

  .topButton {
    width: 100px;
    height: 30px;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(77, 214, 182, 1);
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -50px;
    font-size: 24px;
    font-weight: 900;
    z-index: 100;
  }
}
.hideTopButton {
  width: 100px;
  height: 30px;
  background: rgba(0, 0, 0, 0.8);
  color: rgba(77, 214, 182, 1);
  position: absolute;
  left: 52.5%;
  top: 0;
  margin-left: -50px;
  font-size: 24px;
  font-weight: 900;
  z-index: 99;
}

.topMoveStart {
  top: -150px;
  left: 33%;
  width: 39%;
  height: 150px;
  position: fixed;
  z-index: 99;
  background: rgba(0, 0, 0, 0.8);
}

.pointBlock {
  position: fixed;
  top: 300px;
  left: 30%;
  width: 40%;
  background: rgba(0, 0, 0, 0.8);
  height: 450px;
  z-index: 99;

  .pointBlockMain {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(
          to top,
          rgba(77, 214, 182, 0.6),
          rgba(77, 214, 182, 1)
        )
        left top no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        left top no-repeat,
      linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right top no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        right top no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat;
    background-size: 3px 25px, 20px 3px, 3px 20px, 20px 3px;

    .pointBlockContent {
      width: 96%;
      margin-left: 2%;
      height: 450px;
      margin-top: 10px;
    }
  }

  .pointButton {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    top: -10px;
    right: -10px;
    color: rgba(77, 214, 182, 1);
    background: rgba(0, 0, 0, 0.8);
    i {
      font-size: 20px;
    }
  }
}

.pointMoveStart {
  position: fixed;
  top: 300px;
  left: 50%;
  background: rgba(0, 0, 0, 0.8);
  width: 0;
  height: 0;
  margin-left: -250px;
  z-index: 99;
}

.leftBlock {
  position: fixed;
  top: 85px;
  left: 0px;
  bottom: 5px;
  background: rgba(0, 0, 0, 0.8);
  width: 28%;
  z-index: 99;

  .leftBlockMain {
    width: 100%;
    height: 100%;
    background: linear-gradient(
          to top,
          rgba(77, 214, 182, 0.6),
          rgba(77, 214, 182, 1)
        )
        left top no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        left top no-repeat,
      linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right top no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        right top no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
  }

  .leftButton {
    display: block;
    width: 30px;
    height: 100px;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(77, 214, 182, 1);
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -50px;
    line-height: 100px;
    font-size: 24px;
    font-weight: 900;
  }
}

.hideLeftButton {
  display: block;
  width: 30px;
  height: 100px;
  background: rgba(0, 0, 0, 0.8);
  color: rgba(77, 214, 182, 1);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -7.5px;
  line-height: 100px;
  font-size: 24px;
  font-weight: 900;
}

.leftMoveStart {
  position: fixed;
  top: 85px;
  left: 0px;
  bottom: 5px;
  width: 0px;
  z-index: 999;
}

.rightBlock {
  position: fixed;
  top: 85px;
  right: 0;
  bottom: 5px;
  background: rgba(0, 0, 0, 0.8);
  width: 28%;
  z-index: 99;

  .rightBlockMain {
    width: 100%;
    height: 100%;
    background: linear-gradient(
          to top,
          rgba(77, 214, 182, 0.6),
          rgba(77, 214, 182, 1)
        )
        left top no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        left top no-repeat,
      linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right top no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
        right top no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        left bottom no-repeat,
      linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat,
      linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
        right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
  }

  .rightButton {
    display: block;
    width: 30px;
    height: 100px;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(77, 214, 182, 1);
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -50px;
    line-height: 100px;
    font-size: 24px;
    font-weight: 900;
  }
}

.hideRightButton {
  display: block;
  width: 30px;
  height: 100px;
  background: rgba(0, 0, 0, 0.8);
  color: rgba(77, 214, 182, 1);
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -7.5px;
  line-height: 100px;
  font-size: 24px;
  font-weight: 900;
}

.rightMoveStart {
  position: fixed;
  top: 85px;
  right: 0;
  bottom: 5px;
  width: 0px;
  z-index: 99;
}

.scoreOperation {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  p {
    width: 40px;
    line-height: 40px;
  }
}

.optionButton {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/deep/ .el-carousel__arrow {
  transition: none !important;
  border-radius: 0 !important;
  top: 0;
  transform: none !important;
  height: 100%;
  line-height: 100%;
}

/deep/ .el-icon-arrow-right::after {
  content: "\4e0b\4e00\9879";
  display: block;
  color: black;
  margin-top: 10px;
}
/deep/ .el-icon-arrow-right::before {
  content: ">>";
  color: black;
}

/deep/ .el-carousel__arrow--right {
  right: 0px !important;
  width: 50px;
}

/deep/ .el-icon-arrow-left::after {
  content: "\4e0a\4e00\9879";
  display: block;
  color: black;
  margin-top: 10px;
}
/deep/ .el-icon-arrow-left::before {
  content: "<<";
  color: black;
}

/deep/ .el-carousel__arrow--left {
  left: 0px !important;
  width: 50px;
}

/deep/ .renwu .el-dialog__body {
  background: transparent !important;
}

/deep/ .el-table .successRow {
  background: #67c23a;
}

.middleLine {
  height: 500px;
  width: 1px;
  border-left: dashed 1px #cccccc;
}

.lookBackDataTitle {
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.svgIcon {
  cursor: pointer;
}

.colorBlock {
  top: 220px;
  left: 50%;
  width: 20%;
  margin-left: 50px;
  height: 300px;
  position: fixed;
  z-index: 6000;
  background-color: #ffffff;
}

// .drawTip {
//   z-index: 9000 !important;
//   overflow: scroll !important;
//   position: fixed !important;
//   top: 50px;
//   height: 300px !important;
//   width: 100px !important;
//   background-color: white !important;
// }
</style>

 bigScreen/src/views/monitoringPointManage/index.vue

New file
@@ -0,0 +1,820 @@
<template>
  <div>
    <video id="videoElement" controls width="0" height="0" v-show="false">
      xxx
    </video>
    <div class="tableDiv">
      <el-table
        :data="tableData"
        style="width: 100%"
        :key="isKey"
        v-loading="loading"
      >
        <el-table-column label="ID" prop="monitorpointId"> </el-table-column>
        <el-table-column label="监测点名称" prop="monitorpointName">
        </el-table-column>
        <el-table-column label="状态" prop="status_name" align="center">
        </el-table-column>
        <el-table-column label="频率清单">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                type="success"
                @click="lookFrequency(scope)"
                >查看</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="录音回放">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" type="success" @click="lookBack(scope)"
                >回放</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="录制通道1">
          <template slot-scope="scope">
            <div>
              <div>
                <el-form label-position="left" class="demo-table-expand">
                  <el-form-item label="频率:">
                    <span
                      v-show="!scope.row.isLeftEdit"
                      @dblclick="changeLeftInput($event, scope)"
                      >{{
                        scope.row.channels[0].frequencyValue | formateFre
                      }}</span
                    >
                    <el-input
                      v-model="scope.row.channels[0].frequencyValue"
                      placeholder=""
                      style="width: 80px; height: 22px"
                      v-show="scope.row.isLeftEdit"
                      ref="editLeftInput"
                      @blur="changeLeftP(scope)"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="状态:">
                    <span>{{
                      scope.row.channels[0].status | formatSTATUS
                    }}</span>
                  </el-form-item>
                  <el-form-item label="操作:">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="加入录制"
                      placement="top"
                    >
                      <svg-icon
                        class="svgIcon"
                        icon-class="recordAddBlack"
                        @click="jionRecord(scope.row.channels[0])"
                      ></svg-icon>
                    </el-tooltip>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column label="录制通道2">
          <template slot-scope="scope">
            <div style="width: 50%">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="频率:">
                  <span
                    v-show="!scope.row.isRightEdit"
                    @dblclick="changeRightInput($event, scope)"
                    >{{
                      scope.row.channels[1].frequencyValue | formateFre
                    }}</span
                  >
                  <el-input
                    v-model="scope.row.channels[1].frequencyValue"
                    placeholder=""
                    style="width: 80px; height: 22px"
                    v-show="scope.row.isRightEdit"
                    ref="editRightInput"
                    @blur="changeRightP(scope)"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                  <span>{{ scope.row.channels[1].status | formatSTATUS }}</span>
                </el-form-item>
                <el-form-item label="操作:">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入录制"
                    placement="top"
                  >
                    <svg-icon
                      class="svgIcon"
                      icon-class="recordAddBlack"
                      @click="jionRecord(scope.row.channels[1])"
                    ></svg-icon>
                  </el-tooltip>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <el-dialog title="查看通道" :visible.sync="lookPassageVisible">
      <el-table :data="showFirst" :show-header="false" :key="tableKey">
        <el-table-column label="channelId" prop="channelId">
          <template slot-scope="scope">
            <div>
              {{ scope.row.channelId | formatChannelId }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="STATUS" prop="STATUS">
          <template slot-scope="scope">
            <div v-if="scope.row.channelId != 0">
              {{ scope.row.STATUS | formatSTATUS }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="frequencyValue" prop="frequencyValue">
          <template slot-scope="scope">
            <div style="display: flex">
              <div v-if="!scope.row.isEdit">
                <div v-if="scope.row.channelId != 0">
                  {{ scope.row.frequencyValue }}
                </div>
                <div v-else>--</div>
              </div>
              <div v-else>
                <el-input
                  v-model="scope.row.frequencyValue"
                  placeholder=""
                ></el-input>
              </div>
              <i
                style="margin-left: 10px"
                :class="{
                  'el-icon-edit': !scope.row.isEdit,
                  'el-icon-check': scope.row.isEdit,
                }"
                @click="changeEdit(scope)"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="start_time" prop="start_time">
          <template slot-scope="scope">
            <div v-if="scope.row.channelId != 0">
              <div v-if="scope.row.start_time">
                {{ scope.row.start_time }}
              </div>
              <div v-else>--</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="stop_time" prop="stop_time">
          <template slot-scope="scope">
            <div v-if="scope.row.channelId != 0">
              <div v-if="scope.row.stop_time">
                {{ scope.row.stop_time }}
              </div>
              <div v-else>--</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.channelId != 0">
              <div
                :key="isChange"
                v-if="
                  !(
                    scope.row.frequencyValue == '' ||
                    scope.row.frequencyValue == '--'
                  )
                "
              >
                <div v-if="scope.row.channelId == 1">
                  <i class="el-icon-video-play"></i>
                  <i
                    class="el-icon-video-pause"
                    @click="pauseVideo(scope)"
                    style="margin-left: 20px"
                  ></i>
                </div>
                <div v-else>
                  <i
                    class="el-icon-download"
                    @click="jionRecord(scope)"
                    v-if="scope.row.STATUS == 0"
                  ></i>
                  <i
                    class="el-icon-delete-solid"
                    @click="dropRecord(scope)"
                    v-if="scope.row.STATUS == 1"
                  ></i>
                </div>
              </div>
              <div v-else>--</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="频率清单" :visible.sync="lookFrequencyVisible">
      <el-table :data="showSecond">
        <el-table-column label="频率" prop="frequencyValue"> </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | formateFreStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="信号" prop="level"> </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="lookBackVisible" @close="closeReplay">
      <div slot="title" class="lookBackDataTitle">
        <p>{{ lookBackData.monitorpointName }}</p>
        <p>{{ lookBackData.status_name }}</p>
      </div>
      <div>
        <div class="lookBackBlock">
          <span class="demonstration">回放时间</span>
          <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="margin-left: 20px"
          >
          </el-date-picker>
        </div>
        <div class="lookBackBlock" style="margin-top: 30px">
          <span>请选择频率:</span>
          <el-select
            v-model="frequencySel"
            placeholder="请先填写日期"
            style="margin-left: 20px"
          >
            <el-option
              v-for="(item, index) in frequencyArr"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-tooltip
            class="item"
            effect="dark"
            content="点击收听"
            placement="top"
          >
            <i
              class="el-icon-video-play"
              style="margin-left: 20px"
              @click="replayRecord()"
              v-show="!isReplay"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <div style="margin-top: 30px">
        <video
          id="testVideo"
          ref="testVideo"
          src=""
          controls
          preload
          width="90%"
          height="300"
          v-show="isReplay"
        >
          qqq
        </video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  watch: {
    timeValue: {
      handler(n, o) {
        if (this.timeValue.length == 2) {
          this.frequencySel = "";
          this.getFrequencySel();
        }
      },
    },
    frequencySel: {
      handler(n, o) {
        if (this.frequencySel) {
          this.isReplay = false;
          if (this.playVideo) {
            this.playVideo.pause();
            this.playVideo = null;
          }
        }
      },
    },
    lookPassageVisible: {
      handler(n, o) {
        if (!this.lookPassageVisible) {
          if (this.player) {
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null;
          }
        }
      },
    },
  },
  filters: {
    formateFre(fre) {
      if (fre) {
        return fre;
      } else {
        return "--";
      }
    },
    formatChannelId(id) {
      if (id == 1) {
        return "监听通道";
      } else if (id == 0) {
        return "扫频通道";
      } else {
        return "录制通道";
      }
    },
    formatSTATUS(status) {
      if (status == "1") {
        return "正在录制";
      }
      if (status == "0") {
        return "停止录制";
      } else {
        return "停止录制";
      }
    },
    formateFreStatus(status) {
      if (status == "0") {
        return "合法频点";
      } else if (status == "1") {
        return "非法频点";
      } else if (status == "2") {
        return "误报";
      } else if (status == "3") {
        return "白名单";
      } else if (status == "4") {
        return "异地频点";
      } else if (status == "5") {
        return "疑似非法频点";
      } else if (status == "6") {
        return "丢失";
      } else {
        return "未知";
      }
    },
  },
  data() {
    return {
      loading: false,
      isKey: false,
      playVideo: null,
      isReplay: false,
      isEdit: false,
      tableData: [],
      activeName: "first",
      showFirst: [],
      showSecond: [],
      lookPassageVisible: false,
      lookFrequencyVisible: false,
      lookBackVisible: false,
      lookBackData: {},
      timeValue: [],
      frequencySel: "",
      frequencyArr: [],
      nowPlayId: null,
      player: null,
      isPlay: false,
      isChange: false,
      tableKey: false,
      userid: "",
      username: "",
      isLeftEdit: false,
      isRightEdit: false,
    };
  },
  mounted() {
    if (localStorage.getItem("user") && localStorage.getItem("_token")) {
      this.userid = JSON.parse(localStorage.getItem("user")).name;
      this.username = JSON.parse(localStorage.getItem("_token")).account;
    } else {
      window.location.href = window.backstageURL + "ammonitor/#/passport/login";
    }
    this.getInfo();
  },
  methods: {
    changeLeftInput(e, scope) {
      let target = e.currentTarget;
      scope.row.isLeftEdit = !scope.row.isLeftEdit;
      this.isKey = !this.isKey;
      setTimeout(() => {
        target.parentNode.children[1].children[0].focus();
      }, 500);
    },
    changeLeftP(scope) {
      scope.row.isLeftEdit = !scope.row.isLeftEdit;
      this.isKey = !this.isKey;
    },
    changeRightInput(e, scope) {
      let target = e.currentTarget;
      scope.row.isRightEdit = !scope.row.isRightEdit;
      this.isKey = !this.isKey;
      setTimeout(() => {
        target.parentNode.children[1].children[0].focus();
      }, 500);
    },
    changeRightP(scope) {
      scope.row.isRightEdit = !scope.row.isRightEdit;
      this.isKey = !this.isKey;
    },
    closeReplay() {
      this.timeValue = [];
      this.frequencySel = "";
      this.frequencyArr = [];
      this.isReplay = false;
      if (this.playVideo) {
        this.playVideo.pause();
        this.playVideo = null;
      }
    },
    replayRecord() {
      let param = new URLSearchParams();
      param.append("method", "mutipleReview");
      param.append("instruct", 1);
      param.append("playType", 1);
      param.append("hls", 1);
      param.append("key", 123456);
      param.append("monitorpointId", this.lookBackData.monitorpointId);
      param.append("frequencyValue", this.frequencySel);
      param.append("startTime", this.dateFormatter(this.timeValue[0]));
      param.append("endTime", this.dateFormatter(this.timeValue[1]));

      this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
        (res) => {
          if (res.success == "true") {
            this.isReplay = true;
            this.playReplay(res.url);
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    playReplay(url) {
      this.playVideo = this.$refs.testVideo;
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(this.playVideo);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          this.playVideo.play();
        });
      } else if (this.playVideo.canPlayType("application/vnd.apple.mpegurl")) {
        this.playVideo.src = url;
        this.playVideo.addEventListener("loadedmetadata", function () {
          this.playVideo.play();
        });
      }
    },
    changeEdit(scope) {
      scope.row.isEdit = !scope.row.isEdit;
      this.tableKey = !this.tableKey;
    },
    jionRecord(scope) {
      if (localStorage.getItem("user") && localStorage.getItem("_token")) {
        let userInfo = JSON.parse(localStorage.getItem("user"));
        let userIdInfo = JSON.parse(localStorage.getItem("_token"));
        this.$confirm(`是否确定将${scope.frequencyValue}加入录制`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$prompt("请输入时间(分钟)", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              inputPattern:
                /^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/,
              inputErrorMessage: "请输入1到360的整数",
            })
              .then(({ value }) => {
                this.$emit("showLoading", "luzhi");
                let param = new URLSearchParams();
                param.append("method", "record");
                param.append("key", 111111);
                param.append("recordTimeLength", value);
                param.append("monitorpointId", scope.monitorpointId);
                param.append("frequencyValue", scope.frequencyValue);
                param.append("isUnderWay", 0);

                let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${scope.monitorpointId}&frequencyValue=${scope.frequencyValue}`;
                this.$getJSON(
                  window.equipmentURL + "FRP/TNewrecordtask.do",
                  param
                ).then((res) => {
                  this.$emit("hideLoading");
                  let param1 = {
                    bid: "setChannelRecord",
                    monitorpointId: scope.monitorpointId,
                    frequency: scope.frequencyValue,
                    userid: this.userid,
                    requesturl: url,
                    success: res[0].success.toString(),
                    msg: res[0].msg,
                    recordminitus: 180,
                  };

                  this.$post(
                    window.backstageURL + "dataservice/dealData",
                    param1
                  ).then((res1) => {});

                  if (res[0].success) {
                    this.$message.success(res[0].msg);
                  } else {
                    this.$message.error(res[0].msg);
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "取消输入",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        window.location.href =
          window.backstageURL + "ammonitor/#/passport/login";
      }
    },
    dropRecord(scope) {
      let param = new URLSearchParams();
      param.append("method", "delete");
      param.append("key", 123456);
      param.append("monitorpointId", scope.monitorpointId);
      param.append("frequencyValue", scope.frequencyValue);
      this.$getJSON(window.equipmentURL + "FRP/TNewrecordtask.do", param).then(
        (res) => {
          if (res.success) {
            scope.status == 0;
            this.tableKey = !this.tableKey;
          } else {
            this.$message.warning(res.msg);
          }
        }
      );
    },
    pauseVideo(scope) {
      this.player.pause();
    },
    playVideo1(scope) {
      if (this.nowPlayId) {
        if (this.nowPlayId == scope.row.monitorpointId) {
          this.isplay = true;
          this.player.play();
        } else {
          this.player.pause();
          this.player.unload();
          this.player.detachMediaElement();
          this.player.destroy();
          this.player = null;

          this.nowPlayId = scope.row.monitorpointId;
          this.getPalyUrl(scope.row);
        }
      } else {
        this.nowPlayId = scope.row.monitorpointId;
        this.getPalyUrl(scope.row);
      }
    },
    stopVideo(scope) {
      let param = new URLSearchParams();
      param.append("method", "delete");
      param.append("monitorpointId", scope.row.monitorpointId);
      param.append("frequencyValue", scope.row.frequencyValue);
      param.append("key", 123456);
      this.$getJSON(window.equipmentURL + "FRP/TNewrecordtask.do", param).then(
        (res) => {}
      );

      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
    },

    getPalyUrl(row) {
      let param = new URLSearchParams();
      param.append("method", "playLiveNew");
      param.append("instruct", 1);
      param.append("playType", 0);
      param.append("hls", 0);
      param.append("key", 123456);
      param.append("monitorpointId", row.monitorpointId);
      param.append("frequencyValue", row.frequencyValue);

      this.$getJSON(window.equipmentURL + "FRP/ScanSignal.do", param).then(
        (res) => {
          this.$message.warning(res.success);

          let flvurl = "";
          if (res.url) {
            flvurl = res.url;
          }

          if (res.url) {
            this.rtsp = res.url;

            let video = document.getElementById("videoElement");

            if (flvjs.isSupported()) {
              this.player = flvjs.createPlayer({
                type: "flv",
                url: this.rtsp,
              });

              this.player.attachMediaElement(video);

              this.player.load(); //加载

              if (this.rtsp) {
                this.isplay = true;
                this.player.play();
              } else {
                this.$message.error("无音频文件");
              }
            }
          } else {
            this.isPlay = true;
            this.isChange = !this.isChange;
          }
        }
      );
    },

    dateFormatter(time) {
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hour = time.getHours();
      var minute = time.getMinutes();
      var second = time.getSeconds();
      return (
        this.add0(year) +
        "-" +
        this.add0(month) +
        "-" +
        this.add0(date) +
        " " +
        this.add0(hour) +
        ":" +
        this.add0(minute) +
        ":" +
        this.add0(second)
      );
    },

    add0(val) {
      return val < 10 ? "0" + val : val;
    },
    getInfo() {
      this.loading = true;
      this.$getJSON(
        window.backstageURL +
          "dataservice/getNoTokenData?bid=getPointAndChannels"
      ).then((res) => {
        this.tableData = JSON.parse(
          JSON.stringify(res.data.data.monitorpoints)
        );
        this.tableData.forEach((item) => {
          item.isLeftEdit = false;
          item.isRightEdit = false;
        });
        this.loading = false;
      });
    },
    lookBack(scope) {
      this.$emit("showRePlay", scope.row);
    },
    getFrequencySel() {
      this.isReplay = false;
      if (this.playVideo) {
        this.playVideo.pause();
        this.playVideo = null;
      }

      let param = new URLSearchParams();
      param.append("bid", "getRecordFreqs");
      param.append("start_time", this.dateFormatter(this.timeValue[0]));
      param.append("end_time", this.dateFormatter(this.timeValue[1]));
      param.append("monitorpointId", this.lookBackData.monitorpointId);
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        let fArr = [];
        res.data.data[0].forEach((item) => {
          fArr.push(item.frequencyValue);
        });
        this.frequencyArr = fArr;
      });
    },
    handleClick(tab, event) {},
    lookFrequency(scope) {
      let param = new URLSearchParams();
      param.append("bid", "getCurrPointFreqs");
      param.append("monitorpointId", scope.row.monitorpointId);
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        this.showSecond = res.data.data[0];
        this.lookFrequencyVisible = true;
      });
    },
    lookPassage(scope) {
      let param = new URLSearchParams();
      param.append("bid", "getChannelRecord");
      param.append("monitorpointId", scope.row.monitorpointId);
      this.$getJSON(
        window.backstageURL + "dataservice/getNoTokenData",
        param
      ).then((res) => {
        this.showFirst = res.data.data[0];
        this.showFirst.forEach((item) => {
          item.isEdit = false;
        });
        this.lookPassageVisible = true;
      });
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.pause();
      this.player.unload();
      this.player.detachMediaElement();
      this.player.destroy();
      this.player = null;
    }
  },
};
</script>
<style lang="scss">
.tableDiv {
  width: 90%;
  margin-left: 5%;
  margin-top: 30px;
}

.lookBackDataTitle {
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.svgIcon {
  cursor: pointer;
}
</style>

Diff truncated after the above file
bigScreen/src/views/recordSearch/index.vue
bigScreen/src/views/whiteList/components/WhiteListEdit.vue
bigScreen/src/views/whiteList/components/WhiteListOfTask.vue
bigScreen/src/views/whiteList/index.vue
bigScreen/vue.config.js
deploy/2021-11-24-deploy/dist-s.zip
deploy/2021-11-24-deploy/dist.zip