Merge branch 'master' of http://192.168.0.105:10010/r/zhny-dsjdp

guanqb

2022-08-03 6fed72f0cb2e2ec499fd46b54a48fd9a71d5817b

Merge branch 'master' of http://192.168.0.105:10010/r/zhny-dsjdp

 src/views/home/index.vue

@@ -234,37 +234,46 @@
                    农场
                    <i class="el-icon-caret-top"></i>
                </div>
                <div
                    v-for="(item, index) in farmNumArray"
                    :key="index"
                    class="box"
                    :class="{ first: index == 0 }"
                    @click="setCenter(item)"
                >{{ item.farmName }}</div>
                <div class="content">
                    <div
                        v-for="(item, index) in farmNumArray"
                        :key="index"
                        class="box"
                        :class="{ first: index == 0 }"
                        @click="setCenter(item)"
                        :title="item.farmName"
                    >{{ item.farmName }}</div>
                </div>
            </div>
            <div v-show="jkListShow" class="jk-list">
                <div class="title" @click="jkListShow = false">
                    监控设备
                    <i class="el-icon-caret-top"></i>
                </div>
                <div
                    v-for="(item, index) in equipmentList.vidList"
                    :key="index"
                    class="box"
                    :class="{ first: index == 0 }"
                >{{ item.name }}</div>
                <div class="content">
                    <div
                        v-for="(item, index) in equipmentList.vidList"
                        :key="index"
                        class="box"
                        :class="{ first: index == 0 }"
                        :title="item.name"
                    >{{ item.name }}</div>
                </div>
            </div>
            <div v-show="jcListShow" class="jc-list">
                <div class="title" @click="jcListShow = false">
                    监测设备
                    <i class="el-icon-caret-top"></i>
                </div>
                <div
                    v-for="(item, index) in equipmentList.staList"
                    :key="index"
                    class="box"
                    :class="{ first: index == 0 }"
                >{{ item.name }}</div>
                <div class="content">
                    <div
                        v-for="(item, index) in equipmentList.staList"
                        :key="index"
                        class="box"
                        :class="{ first: index == 0 }"
                        :title="item.name"
                    >{{ item.name }}</div>
                </div>
            </div>
        </div>

@@ -559,8 +568,8 @@
            farmID: '',
            // 设备
            mTotalObj: {},
            //设备列表
            equipmentList: {},
            // 设备列表
            equipmentList: {}
        }
    },
    created () {
@@ -725,160 +734,160 @@
            const option = {
                title: {
                    text: that.mTotalObj.mTotal,
                    subtext: "设备总数",
                    top: "38%",
                    left: "center",
                    subtext: '设备总数',
                    top: '38%',
                    left: 'center',
                    textStyle: {
                        color: "#69E2ED",
                        color: '#69E2ED',
                        fontSize: 34,
                        fontWeight: "bold",
                        lineHeight: 12,
                        fontWeight: 'bold',
                        lineHeight: 12
                    },
                    subtextStyle: {
                        color: "#A9D1D7",
                        color: '#A9D1D7',
                        fontSize: 18,
                        fontWeight: "bold",
                    },
                        fontWeight: 'bold'
                    }
                },
                series: [
                    {
                        type: "pie",
                        radius: ["44%", "62%"],
                        center: ["50%", "50%"],
                        type: 'pie',
                        radius: ['44%', '62%'],
                        center: ['50%', '50%'],
                        data: [
                            {
                                value:
                                    that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
                                name: "离线",
                                name: '离线',
                                itemStyle: {
                                    color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 0,
                                            color: "#F39302",
                                            color: '#F39302'
                                        },
                                        {
                                            offset: 1,
                                            color: "#E5F302",
                                        },
                                    ]),
                                            color: '#E5F302'
                                        }
                                    ])
                                },
                                labelLine: {
                                    show: false,
                                    show: false
                                },
                                label: {
                                    show: false,
                                },
                                    show: false
                                }
                            },
                            {
                                value:
                                    that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
                                name: "在线",
                                name: '在线',
                                itemStyle: {
                                    color: "#00F0FF",
                                    color: '#00F0FF'
                                },
                                labelLine: {
                                    show: false,
                                    show: false
                                },
                                label: {
                                    show: false,
                                },
                            },
                        ],
                                    show: false
                                }
                            }
                        ]
                    },
                    {
                        // 指示线
                        // 通过value 的值 调节lableLine的位置
                        type: "pie",
                        radius: ["44%", "62%"],
                        type: 'pie',
                        radius: ['44%', '62%'],
                        data: [
                            {
                                value:
                                    that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
                                itemStyle: {
                                    color: "transparent",
                                    color: 'transparent'
                                },
                                labelLine: {
                                    show: true,
                                    length: 24,
                                    length2: 16,
                                    color: "#fff",
                                    color: '#fff',
                                    lineStyle: {
                                        color: "#fff",
                                    },
                                        color: '#fff'
                                    }
                                },
                                label: {
                                    color: "#A9D1D7",
                                    color: '#A9D1D7',
                                    fontSize: 16,
                                    position: "outside",
                                    position: 'outside',
                                    formatter: `{a|${that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine
                                        }}\n离线`,
                                    rich: {
                                        a: {
                                            color: "#EBC802",
                                            color: '#EBC802',
                                            fontSize: 22,
                                            fontWeight: "bold",
                                            lineHeight: 30,
                                        },
                                    },
                                },
                                            fontWeight: 'bold',
                                            lineHeight: 30
                                        }
                                    }
                                }
                            },
                            {
                                value:
                                    that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
                                itemStyle: {
                                    color: "transparent",
                                },
                            },
                        ],
                                    color: 'transparent'
                                }
                            }
                        ]
                    },

                    {
                        // 指示线
                        // 通过value 的值 调节lableLine的位置
                        type: "pie",
                        radius: ["44%", "62%"],
                        type: 'pie',
                        radius: ['44%', '62%'],
                        data: [
                            {
                                value:
                                    that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
                                itemStyle: {
                                    color: "transparent",
                                },
                                    color: 'transparent'
                                }
                            },
                            {
                                value:
                                    that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
                                itemStyle: {
                                    color: "transparent",
                                    color: 'transparent'
                                },
                                labelLine: {
                                    show: true,
                                    length: 24,
                                    length2: 16,
                                    color: "#fff",
                                    color: '#fff',
                                    lineStyle: {
                                        color: "#fff",
                                    },
                                        color: '#fff'
                                    }
                                },
                                label: {
                                    color: "#A9D1D7",
                                    color: '#A9D1D7',
                                    fontSize: 16,
                                    position: "outside",
                                    position: 'outside',
                                    formatter: `{a|${that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine
                                        }}\n在线`,
                                    rich: {
                                        a: {
                                            color: "#38ADD7",
                                            color: '#38ADD7',
                                            fontSize: 22,
                                            fontWeight: "bold",
                                            lineHeight: 30,
                                        },
                                    },
                                },
                            },
                        ],
                    },
                ],
                                            fontWeight: 'bold',
                                            lineHeight: 30
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            }

            option && myChart.setOption(option)
@@ -1273,22 +1282,21 @@
        getStationAndVideoCount () {
            var that = this
            getStationAndVideoCount().then((res) => {
                if (JSON.stringify(res.data) != "{}" && res.data.data) {
                if (JSON.stringify(res.data) != '{}' && res.data.data) {
                    that.mTotalObj = res.data.data
                }
                that.initRightPie('EquipmentEcharts')

            })
        },
        // 获取监控/监测设备列表
        getStationAndVideoList () {
            var that = this
            getStationAndVideoList().then((res) => {
                if (JSON.stringify(res.data) != "{}" && res.data.data) {
                if (JSON.stringify(res.data) != '{}' && res.data.data) {
                    that.equipmentList = res.data.data
                }
            })
        },
        }
    }
}
</script>
@@ -1899,9 +1907,9 @@
            }
        }

        .nc-list,
        .jk-list,
        .jc-list {
        & > .nc-list,
        & > .jk-list,
        & > .jc-list {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
@@ -1910,8 +1918,7 @@
            left: 172px;
            width: 144px;
            height: 224px;
            overflow-x: hidden;
            overflow-y: auto;

            background: rgba(6, 28, 29, 0.8);
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #69e2ed;
@@ -1926,6 +1933,13 @@
                font-size: 20px;
            }

            .content {
                width: 100%;
                height: calc(100% - 46px);
                overflow-x: hidden;
                overflow-y: auto;
            }

            .box {
                margin-top: 16px;
                padding-left: 20px;
@@ -1933,10 +1947,18 @@
                // height: 24px;
                line-height: 24px;
                text-align: left;
                box-sizing: border-box;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .box.first {
                margin-top: 0 !important;
            }

            .box:last-child {
                margin-bottom: 15px;
            }
        }
        .jk-list {
@@ -1946,6 +1968,7 @@
            top: 108px;
        }
    }

    .city-flow {
        padding: 0 12px;
        display: flex;