|
|
@@ -4,25 +4,204 @@
|
|
|
<!--主体-->
|
|
|
<div class="con_left con_left_js">
|
|
|
<div class="list_tit">设备列表</div>
|
|
|
- <div class="info-list">
|
|
|
- <p>用户数：253872户</p>
|
|
|
- <p>管线长度：260公里</p>
|
|
|
- <p>商用户：3535户 </p>
|
|
|
- <p>中压长度：260公里</p>
|
|
|
- <p>民用：253535户次 </p>
|
|
|
- <p>高压长度：260公里</p>
|
|
|
- <p>场站数：1 </p>
|
|
|
- <p>低压长度：260公里</p>
|
|
|
- </div>
|
|
|
- <div class="list_tit">设备分析</div>
|
|
|
- <div class="sb_fx" ref="sbfx">
|
|
|
+ <div class="info-list_left">
|
|
|
+ <p>用户总数：257005户</p>
|
|
|
+ <p>管线总长：930公里</p>
|
|
|
+ <p>商业用户：3999户 </p>
|
|
|
+ <p>中压长度：186.707公里</p>
|
|
|
+ <p>居民用户：252906户 </p>
|
|
|
+ <p>次高压长度：65.9公里</p>
|
|
|
+ <p>工业用户：100户 </p>
|
|
|
+ <p>低压长度：577公里</p>
|
|
|
</div>
|
|
|
+ <div class="list_tit">监测长度</div>
|
|
|
+ <div class="cd_fx" ref="jccd"></div>
|
|
|
+ <div class="list_tit">图层控制</div>
|
|
|
+ <div class="map_tab">
|
|
|
+ <span v-for="(item,index) in tabList"
|
|
|
+ :key="index"
|
|
|
+ :class="{on:currentClass==index}"
|
|
|
+ @click="toggleTab(index)">{{item}}</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="con_tckz_div">
|
|
|
+ <div class="tab_con" v-show="currentTab==0">
|
|
|
+ <div class="rq_div tekz_div">
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx">
|
|
|
+ <span>华生燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_1" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>港华燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_2" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>奥德燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_3" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>润发燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_4" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="map_btn">
|
|
|
+ <button class="map_btn_span on" @click="showExcavation()">开挖</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
|
|
|
+ <button class="map_btn_span" @click="boxSelection()">框选</button>
|
|
|
+ <button class="map_btn_span" @click="clearAll()">清除</button>
|
|
|
+ <!-- <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab_con" v-show="currentTab==1">
|
|
|
+ <div class="rq_div tekz_div">
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx">
|
|
|
+ <span>华生燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_1" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>港华燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_2" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>奥德燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_3" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>润发燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_4" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="map_btn">
|
|
|
+ <button class="map_btn_span on" @click="showExcavation()">开挖</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
|
|
|
+ <button class="map_btn_span" @click="boxSelection()">框选</button>
|
|
|
+ <button class="map_btn_span" @click="clearAll()">清除</button>
|
|
|
+ <!-- <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab_con" v-show="currentTab==2">
|
|
|
+ <div class="rq_div tekz_div">
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx">
|
|
|
+ <span>华生燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_1" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>港华燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_2" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>奥德燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_3" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tc_div">
|
|
|
+ <div class="scrollx"><span>润发燃气：</span>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities">
|
|
|
+ <el-checkbox v-for="city in cities1_4" :label="city.url" :key="city.type">{{ city.type }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="map_btn">
|
|
|
+ <button class="map_btn_span on" @click="showExcavation()">开挖</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
|
|
|
+ <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
|
|
|
+ <button class="map_btn_span" @click="boxSelection()">框选</button>
|
|
|
+ <button class="map_btn_span" @click="clearAll()">清除</button>
|
|
|
+ <!-- <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!--主体右侧-->
|
|
|
<div class="con_right con_left_js">
|
|
|
+ <div class="list_tit">设备分析</div>
|
|
|
+ <div class="sb_fx" ref="sbfx"></div>
|
|
|
<div class="list_tit">用户分析</div>
|
|
|
<div class="yh_fx" ref="yhfx"></div>
|
|
|
<div class="list_tit">事件分析</div>
|
|
|
+ <div class="info-list_right">
|
|
|
+ <p>报警累计：6</p>
|
|
|
+ <p>已处理：6，未处理：0</p>
|
|
|
+ <p>泄露：3，震动：1</p>
|
|
|
+ <p>位移：2，超限：0</p>
|
|
|
+ </div>
|
|
|
<div class="sj_fx" ref="sjfx"></div>
|
|
|
</div>
|
|
|
<div class="visual-body" style="height: 100%;">
|
|
|
@@ -46,6 +225,12 @@
|
|
|
selectConfigKey
|
|
|
} from "@/api/system/config";
|
|
|
import * as echarts from 'echarts'
|
|
|
+
|
|
|
+
|
|
|
+ const cityOptions1_1 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-huashengranqi-2/rest/realspace' }, { type: '中压管网', url: '' }];
|
|
|
+ const cityOptions1_2 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-ganghuaranqi/rest/realspace' }, { type: '中压管网', url: '' }];
|
|
|
+ const cityOptions1_3 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-aode/rest/realspace' }, { type: '中压管网', url: '' }];
|
|
|
+ const cityOptions1_4 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
|
|
|
export default {
|
|
|
name: 'SentryCockpit',
|
|
|
components: {
|
|
|
@@ -67,6 +252,7 @@
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.jccdChart();
|
|
|
this.sbfxChart();
|
|
|
this.yhfxChart();
|
|
|
this.sjfxChart();
|
|
|
@@ -83,30 +269,258 @@
|
|
|
input: '',
|
|
|
input1: '',
|
|
|
title: '四平市智慧哨兵监管平台',
|
|
|
- options: [{
|
|
|
- value: '选项1',
|
|
|
- label: '华生1'
|
|
|
- }, {
|
|
|
- value: '选项2',
|
|
|
- label: '华生2'
|
|
|
- }, {
|
|
|
- value: '选项3',
|
|
|
- label: '华生3'
|
|
|
- }, {
|
|
|
- value: '选项4',
|
|
|
- label: '华生4'
|
|
|
- }, {
|
|
|
- value: '选项5',
|
|
|
- label: '华生5'
|
|
|
- }],
|
|
|
- value: ''
|
|
|
+ value: '',
|
|
|
+ //图层控制
|
|
|
+ checkedCities: [],
|
|
|
+ cities1_1: cityOptions1_1,
|
|
|
+ cities1_2: cityOptions1_2,
|
|
|
+ cities1_3: cityOptions1_3,
|
|
|
+ cities1_4: cityOptions1_4,
|
|
|
+ currentTab: 0,
|
|
|
+ currentClass: 0,
|
|
|
+ tabList:[ '四平市', '铁东区', '铁西区'],
|
|
|
}
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ toggleTab(current){
|
|
|
+ this.currentTab = current;
|
|
|
+ this.currentClass = current;
|
|
|
+ },
|
|
|
+ handleCheckedCities(checkedCities) {
|
|
|
+ // checkedCities 是当前选中的所有选项的数组
|
|
|
+ this.$parent.$refs.supermap.addLifelineOpen(this.checkedCities)
|
|
|
+ },
|
|
|
+ //开挖
|
|
|
+ showExcavation() {
|
|
|
+ this.$parent.$refs.supermap.excavation()
|
|
|
+ },
|
|
|
+ //开挖
|
|
|
+ showExcavationAnalyze() {
|
|
|
+ this.$parent.$refs.supermap.excavationAnalyze()
|
|
|
+ },
|
|
|
+ //测距
|
|
|
+ choseMeasuringDistance() {
|
|
|
+ this.$parent.$refs.supermap.choseMeasuringDistance()
|
|
|
+ },
|
|
|
+ //测面
|
|
|
+ choseMeasuringArea() {
|
|
|
+ this.$parent.$refs.supermap.choseMeasuringArea()
|
|
|
+ },
|
|
|
+ //测高
|
|
|
+ choseMeasuringHeight() {
|
|
|
+ this.$parent.$refs.supermap.choseMeasuringHeight()
|
|
|
+ },
|
|
|
+ //选择、框选
|
|
|
+ boxSelection() {
|
|
|
+ this.$parent.$refs.supermap.boxSelection()
|
|
|
+ },
|
|
|
+ //清除
|
|
|
+ clearAll() {
|
|
|
+ this.$parent.$refs.supermap.closeMeasuringAll()
|
|
|
+ this.$parent.$refs.supermap.closeExcavationAll()
|
|
|
+ this.checkedCities = []
|
|
|
+ this.$parent.$refs.supermap.addLifelineOpen(this.checkedCities)
|
|
|
+ this.$parent.$refs.supermap.removeBoxSelection()
|
|
|
+ },
|
|
|
toggleDisplay() {
|
|
|
this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
|
|
|
},
|
|
|
+ //检测长度
|
|
|
+ jccdChart() {
|
|
|
+ const chartDom = this.$refs.jccd;
|
|
|
+ const myChart = echarts.init(chartDom);
|
|
|
+
|
|
|
+ function deepCopy(obj) {
|
|
|
+ if (typeof obj !== "object") {
|
|
|
+ return obj;
|
|
|
+ }
|
|
|
+ var newobj = {};
|
|
|
+ for (var attr in obj) {
|
|
|
+ newobj[attr] = obj[attr];
|
|
|
+ }
|
|
|
+ return newobj;
|
|
|
+ }
|
|
|
+ var xData = [],
|
|
|
+ yData = [];
|
|
|
+ var data = [{
|
|
|
+ name: "监测长度",
|
|
|
+ value: 3999,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data.map((a, b) => {
|
|
|
+ xData.push(a.name);
|
|
|
+ yData.push(a.value);
|
|
|
+ });
|
|
|
+ var startColor = ["#0157be", "#7a18ed", "#00bbce", "#ea865a"];
|
|
|
+ var endColor = ["#0367d4", "#2743ed", "#00c4a5", "#ea2e41"];
|
|
|
+ var borderStartColor = ["#05acff", "#ee36ff", "#05fcfb", "#ffa597"];
|
|
|
+ var borderEndColor = ["#09c1ff", "#8171ff", "#05ffff", "#ff6584"];
|
|
|
+ var RealData = [];
|
|
|
+ var borderData = [];
|
|
|
+ data.map((item, index) => {
|
|
|
+ var newobj = deepCopy(item);
|
|
|
+ var newobj1 = deepCopy(item);
|
|
|
+ RealData.push(newobj);
|
|
|
+ borderData.push(newobj1);
|
|
|
+ });
|
|
|
+ RealData.map((item, index) => {
|
|
|
+ item.itemStyle = {
|
|
|
+ normal: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: startColor[index], // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: endColor[index], // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ borderData.map((item, index) => {
|
|
|
+ item.itemStyle = {
|
|
|
+ normal: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: borderStartColor[index], // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: borderEndColor[index], // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.option = {
|
|
|
+ legend: {
|
|
|
+ top: "5%",
|
|
|
+ // left: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: "#f2f2f2",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ icon: "circle",
|
|
|
+ data: data,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: "<br/>{b}: {c}KM",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ // 主要展示层的
|
|
|
+ {
|
|
|
+ radius: ["33%", "61%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ type: "pie",
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: "监测长度",
|
|
|
+ data: RealData,
|
|
|
+ },
|
|
|
+ // 边框的设置
|
|
|
+ {
|
|
|
+ radius: ["31%", "34%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ type: "pie",
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ animation: false,
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: borderData,
|
|
|
+ },
|
|
|
+ // 中心的圆圈
|
|
|
+ {
|
|
|
+ radius: ["26%", "31%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ type: "pie",
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 100,
|
|
|
+ name: "监测长度",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#3d3d6b",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ animation: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(this.option, true);
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
//设备分析
|
|
|
sbfxChart() {
|
|
|
const chartDom = this.$refs.sbfx;
|
|
|
@@ -216,20 +630,16 @@
|
|
|
var xData = [],
|
|
|
yData = [];
|
|
|
var data = [{
|
|
|
- name: "第一种",
|
|
|
- value: 1895457,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "第二种",
|
|
|
- value: 722232,
|
|
|
+ name: "商业用户",
|
|
|
+ value: 3999,
|
|
|
},
|
|
|
{
|
|
|
- name: "第三种",
|
|
|
- value: 1723130,
|
|
|
+ name: "居民用户",
|
|
|
+ value: 252906,
|
|
|
},
|
|
|
{
|
|
|
- name: "第四种",
|
|
|
- value: 854920,
|
|
|
+ name: "工业用户",
|
|
|
+ value: 100,
|
|
|
},
|
|
|
];
|
|
|
data.map((a, b) => {
|
|
|
@@ -907,7 +1317,7 @@
|
|
|
background: rgba(0, 0, 0, 0.39);
|
|
|
}
|
|
|
|
|
|
- .info-list {
|
|
|
+ .info-list_left {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
margin-bottom: 20px !important;
|
|
|
@@ -919,7 +1329,22 @@
|
|
|
background-size: 12px;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
- line-height: 60px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-list_right {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 5px !important;
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 50%;
|
|
|
+ padding-left: 20px;
|
|
|
+ background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
|
|
|
+ background-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 35px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1008,20 +1433,133 @@
|
|
|
}
|
|
|
|
|
|
//图表设备分析
|
|
|
+ .cd_fx {
|
|
|
+ width: 100%;
|
|
|
+ height: 18vh;
|
|
|
+ }
|
|
|
+ //图表设备分析
|
|
|
.sb_fx {
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: 20vh;
|
|
|
}
|
|
|
|
|
|
.yh_fx {
|
|
|
width: 100%;
|
|
|
- height: 260px;
|
|
|
+ height: 20vh;
|
|
|
}
|
|
|
|
|
|
.sj_fx {
|
|
|
width: 100%;
|
|
|
- height: 280px;
|
|
|
+ height: 20vh;
|
|
|
}
|
|
|
+
|
|
|
+ .map_tab {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+ border-bottom: 2px solid rgba(13, 107, 179, 0.53);
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ /*background: rgba(13, 107, 179, 0.53);*/
|
|
|
+ padding: 8px 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ text-shadow: 0px 0px 4px #0bf3f7;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .on {
|
|
|
+ color: #0bf3f7;
|
|
|
+ background: none !important;
|
|
|
+ box-shadow: none;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .on::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10px; /* 下三角位于链接的底部 */
|
|
|
+ left: 50%; /* 水平居中 */
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 9px solid transparent; /* 左边透明 */
|
|
|
+ border-right: 9px solid transparent; /* 右边透明 */
|
|
|
+ border-top: 10px solid rgba(13, 107, 179, 0.53); /* 上边是三角形颜色 */
|
|
|
+ transform: translateX(-50%); /* 确保三角形中心对齐链接的中心 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .con_tckz_div {
|
|
|
+ margin: 0px 10px;
|
|
|
+
|
|
|
+ .tekz_div {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ color: #fff;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ border-bottom: 1px dashed #4a5958;
|
|
|
+ margin-bottom: 00px;
|
|
|
+ }
|
|
|
+ .scroll-container::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px !important;
|
|
|
+ display: block !important;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-container::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 15px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 22, 55, 0.87);
|
|
|
+ // background: #E5E5E5;
|
|
|
+ background: rgba(38, 235, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-container::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(10, 37, 64, 0.75);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .map_btn button {
|
|
|
+ display: inline-block;
|
|
|
+ background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 8px 20px;
|
|
|
+ margin: 8px 8px 8px 0px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map_btn button.on {
|
|
|
+ background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map_clear {
|
|
|
+ background: #09335f;
|
|
|
+ color: #a4bfe2;
|
|
|
+ font-size: 14px;
|
|
|
+ float: right;
|
|
|
+ margin: 20px 0px;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 6px 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map_clear:hover {
|
|
|
+ background: #0a5184;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
@import '@/assets/styles/base.scss';
|
