内容提交

longyvfengyun

2023-02-23 eebd0dad9171156c3f201122d51c3fab128ca0eb

内容提交

 src/assets/images/science-blue/dw_bg.jpg

 src/assets/images/science-blue/page-header-left-bg.png

 src/assets/js/const/const_devType.js

@@ -49,6 +49,10 @@
      label: "LD9设备"
    },
    {
      value: 4016,
      label: "LD6设备"
    },
    {
      value: 9606,
      label: "皮特设备"
    },

 src/components/bigScreenPage/big_screen_card.vue

New file
@@ -0,0 +1,47 @@
<template>
  <div class="big-screen-card">
    <div class="big-screen-card-container">
      <div class="big-screen-card-header">
        <img src="./images/arrow_mark.png">
        <span class="big-screen-card-title">{{ title }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "big_screen_card",
  props: {
    title: {
      type: String,
      default: ""
    },
  },
}
</script>

<style scoped>
.big-screen-card {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 8px;
}
.big-screen-card-container {
  display: flex;
  height: 100%;
  background-color: #023752;
}
.big-screen-card-header {
  padding: 8px;
}
.big-screen-card-header img {
  height: 16px;
  vertical-align: middle;
}
.big-screen-card-title {
  margin-left: 8px;
  color: #00feff;
  font-size: 16px;
}
</style>

 src/components/bigScreenPage/big_screen_page.vue

New file
@@ -0,0 +1,193 @@
<template>
  <div class="big-screen-container">
    <div class="big-screen-content">
      <div class="big-screen-header">
        <img src="./images/title_text.png">
      </div>
      <div class="big-screen-body">
        <div class="big-screen-body-container">
          <div class="big-screen-left">
            <div class="big-screen-left-container">
              <div class="card-container">
                <big-screen-card title="单体容量"></big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="设备状态"></big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="交流ABC"></big-screen-card>
              </div>
            </div>
          </div>
          <div class="big-screen-middle">
            <div class="big-screen-middle-container">
              <div class="big-screen-middle-header">
                <div class="total-data-container">
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <total-data type="站点" label="个" value="53"></total-data>
                    </el-col>
                    <el-col :span="6">
                      <total-data type="电源" label="个" value="76"></total-data>
                    </el-col>
                    <el-col :span="6">
                      <total-data type="设备" label="个" value="64"></total-data>
                    </el-col>
                    <el-col :span="6">
                      <total-data type="电池" label="个" value="213"></total-data>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="big-screen-middle-body">
                <div class="map-chart-container">
                  <map-chart></map-chart>
                </div>
              </div>
              <div class="big-screen-middle-footer">
                <div class="monitor-box-list">
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <monitor-box title="设备监测" :num="64" :warn="8" :img="pcImage"></monitor-box>
                    </el-col>
                    <el-col :span="6">
                      <monitor-box title="电池监测" :num="213" :warn="53" :img="batteryImage"></monitor-box>
                    </el-col>
                    <el-col :span="6">
                      <monitor-box title="电源监测" :num="213" :warn="53" :img="powerImage"></monitor-box>
                    </el-col>
                    <el-col :span="6">
                      <monitor-box title="续航监测" :num="48" :warn="3" :img="xuHangImage"></monitor-box>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
          <div class="big-screen-right">
            <div class="big-screen-left-container">
              <div class="card-container">
                <big-screen-card title="电池统计"></big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="单体电压/内阻/温度"></big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="实时告警"></big-screen-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BigScreenCard from "@/components/bigScreenPage/big_screen_card.vue";
import totalData from "@/components/bigScreenPage/totalData.vue";
import MonitorBox from "@/components/bigScreenPage/monitorBox.vue";
import pcImage from "./images/pc.png";
import powerImage from "./images/power.png";
import batteryImage from "./images/battery.png";
import xuHangImage from "./images/xuhang.png";
import MapChart from "@/components/myCharts/MapChart.vue";
import CityChart from "@/components/chart/cityChart.vue";
export default {
  name: "big_screen_page",
  components: {
    CityChart,
    MapChart,
    MonitorBox,
    BigScreenCard,
    totalData
  },
  data() {
    return {
      pcImage,
      powerImage,
      batteryImage,
      xuHangImage,
      mapName: 'zhongguo'
    }
  }
}
</script>

<style scoped>
.big-screen-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #011f39;
  background-size: 100% 100%;
  z-index: 99999999;
}
.big-screen-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.big-screen-header {
  background-image: url("./images/header_bg.png");
  background-size: 100% 100%;
  height: 88px;
  text-align: center;
}
.big-screen-header img{
  margin-top: 20px;
  height: 41px;
}
.big-screen-body {
  flex: 1;
}
.big-screen-body-container {
  display: flex;
  height: 100%;
}
.big-screen-left,
.big-screen-right {
  flex: 1;
  height: 100%;
}
.big-screen-middle {
  width: 881px;
  padding: 8px;
}
.big-screen-middle-container {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.big-screen-middle-header {
  background-image: url("./images/round_bg.png");
  background-size: 100% 100%;
  height: 184px;
}
.big-screen-left-container {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.card-container {
  flex: 1;
}
.total-data-container {
  height: 100%;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
}
.big-screen-middle-body {
  flex: 1;
}
.monitor-box-list {
  padding-bottom: 24px;
}
.map-chart-container {
  height: 100%;
  padding-bottom: 8px;
}
</style>

 src/components/bigScreenPage/images/arrow_mark.png

 src/components/bigScreenPage/images/battery.png

 src/components/bigScreenPage/images/header_bg.png

 src/components/bigScreenPage/images/pallet.png

 src/components/bigScreenPage/images/pc.png

 src/components/bigScreenPage/images/power.png

 src/components/bigScreenPage/images/round_bg.png

 src/components/bigScreenPage/images/title_text.png

 src/components/bigScreenPage/images/xuhang.png

 src/components/bigScreenPage/monitorBox.vue

New file
@@ -0,0 +1,63 @@
<template>
  <div class="monitor-box-container">
    <img :src="img">
    <div class="monitor-box-content">
      <div class="monitor-box-title">{{ title }}</div>
      <div class="monitor-box-num">监测数量：<span>{{ num }}</span></div>
      <div class="monitor-box-warn">正在告警：<span>{{ warn }}</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "monitorBox",
  props: {
    title: {
      type: String,
      default: ""
    },
    num: {
      type: [String, Number],
      default: 0
    },
    warn: {
      type: [String, Number],
      default: 0
    },
    img: {
      type: String,
      default: ""
    }
  },
}
</script>

<style scoped>
.monitor-box-container {
  text-align: center;
}
.monitor-box-container img {
  height: 76px;
}
.monitor-box-content {
  display: inline-block;
  margin-left: 8px;
  vertical-align: top;
}
.monitor-box-title {
  text-align: left;
  color: #00feff;
}
.monitor-box-num,
.monitor-box-warn {
  text-align: left;
  color: #fff;
  font-size: 14px;
}
.monitor-box-num span,
.monitor-box-warn span {
  font-size: 18px;
  color: #ffff00;
}
</style>

 src/components/bigScreenPage/totalData.vue

New file
@@ -0,0 +1,67 @@
<template>
  <div class="total-data">
    <div class="total-data-content">
      <div class="total-data-num">
        <span class="total-data-value">{{ value }}</span>
        <span class="total-data-label">{{ label }}</span>
      </div>
      <div class="total-type">{{ type }}</div>
    </div>
    <img src="./images/pallet.png">
  </div>
</template>

<script>
export default {
  name: "totalData",
  props: {
    type: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Number],
      default: 0
    }
  },
}
</script>

<style scoped>
.total-data {
  position: relative;
  text-align: center;
  margin-top: 30px;
}
.total-data img {
  height: 69px;
}
.total-data-content {
  position: absolute;
  width: 139px;
  margin-left: -70px;
  left: 50%;
  top: -16px;
}
.total-data-num {
  padding-bottom: 8px;
}
.total-data-value {
  font-size: 36px;
  color: #ffff00;
  text-align: right;
  width: 60px;
}
.total-data-label {
  color: #00feff;
  font-size: 14px;
}
.total-type {
  color: #00feff;
  font-size: 14px;
}
</style>

 src/components/myCharts/MapChart.vue

New file
@@ -0,0 +1,244 @@
<script>
import echarts from "echarts";
import BaseChart from "./BaseChart";
export default {
  name: "MapChart",
  extends: BaseChart,
  data() {
    return {}
  },
  methods: {
    setData() {
      let option = this.getOption();
      this.setOption(option);
    },
    getOption() {
      let myChart = this.$options.chart;
      let mapName = 'zhongguo';
      let data = [
        {name:"北京市",value:199},
        {name:"天津市",value:42},
        {name:"河北省",value:102},
        {name:"山西省",value:81},
        {name:"内蒙古自治区",value:47},
        {name:"辽宁",value:67},
        {name:"吉林",value:82},
        {name:"黑龙江",value:123},
        {name:"上海",value:24},
        {name:"江苏",value:92},
        {name:"浙江",value:114},
        {name:"安徽",value:109},
        {name:"福建",value:116},
        {name:"江西",value:91},
        {name:"山东",value:119},
        {name:"河南",value:137},
        {name:"湖北",value:116},
        {name:"湖南",value:114},
        {name:"重庆",value:91},
        {name:"四川",value:125},
        {name:"贵州",value:62},
        {name:"云南",value:83},
        {name:"西藏",value:9},
        {name:"陕西",value:80},
        {name:"甘肃",value:56},
        {name:"青海",value:10},
        {name:"宁夏",value:18},
        {name:"新疆",value:180},
        {name:"广东",value:123},
        {name:"广西",value:59},
        {name:"海南",value:14},
      ];
      let geoCoordMap = {};
      let toolTipData = [
        {name:"北京",value:[{name:"科技人才总数",value:95},{name:"理科",value:82}]},
        {name:"天津",value:[{name:"文科",value:22},{name:"理科",value:20}]},
        {name:"河北",value:[{name:"文科",value:60},{name:"理科",value:42}]},
        {name:"山西",value:[{name:"文科",value:40},{name:"理科",value:41}]},
        {name:"内蒙古",value:[{name:"文科",value:23},{name:"理科",value:24}]},
        {name:"辽宁",value:[{name:"文科",value:39},{name:"理科",value:28}]},
        {name:"吉林",value:[{name:"文科",value:41},{name:"理科",value:41}]},
        {name:"黑龙江",value:[{name:"文科",value:35},{name:"理科",value:31}]},
        {name:"上海",value:[{name:"文科",value:12},{name:"理科",value:12}]},
        {name:"江苏",value:[{name:"文科",value:47},{name:"理科",value:45}]},
        {name:"浙江",value:[{name:"文科",value:57},{name:"理科",value:57}]},
        {name:"安徽",value:[{name:"文科",value:57},{name:"理科",value:52}]},
        {name:"福建",value:[{name:"文科",value:59},{name:"理科",value:57}]},
        {name:"江西",value:[{name:"文科",value:49},{name:"理科",value:42}]},
        {name:"山东",value:[{name:"文科",value:67},{name:"理科",value:52}]},
        {name:"河南",value:[{name:"文科",value:69},{name:"理科",value:68}]},
        {name:"湖北",value:[{name:"文科",value:60},{name:"理科",value:56}]},
        {name:"湖南",value:[{name:"文科",value:62},{name:"理科",value:52}]},
        {name:"重庆",value:[{name:"文科",value:47},{name:"理科",value:44}]},
        {name:"四川",value:[{name:"文科",value:65},{name:"理科",value:60}]},
        {name:"贵州",value:[{name:"文科",value:32},{name:"理科",value:30}]},
        {name:"云南",value:[{name:"文科",value:42},{name:"理科",value:41}]},
        {name:"西藏",value:[{name:"文科",value:5},{name:"理科",value:4}]},
        {name:"陕西",value:[{name:"文科",value:38},{name:"理科",value:42}]},
        {name:"甘肃",value:[{name:"文科",value:28},{name:"理科",value:28}]},
        {name:"青海",value:[{name:"文科",value:5},{name:"理科",value:5}]},
        {name:"宁夏",value:[{name:"文科",value:10},{name:"理科",value:8}]},
        {name:"新疆",value:[{name:"文科",value:36},{name:"理科",value:31}]},
        {name:"广东",value:[{name:"文科",value:63},{name:"理科",value:60}]},
        {name:"广西",value:[{name:"文科",value:29},{name:"理科",value:30}]},
        {name:"海南",value:[{name:"文科",value:8},{name:"理科",value:6}]},
      ];
      myChart.showLoading();
      let geoJson = require(`../../../public/mapJson/zhongguo.json`);
      echarts.registerMap("map", geoJson);
      let mapFeatures = geoJson.features;
      myChart.hideLoading();
      console.log(mapFeatures);
      mapFeatures.forEach(function(v) {
        // 地区名称
        let name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.center;

      });

      let max = 480,
        min = 9; // todo
      let maxSize4Pin = 100,
        minSize4Pin = 20;

      let convertData = function(data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].name];
          console.log(data[i].name);
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      return {
        tooltip: {
          show: false,
        },
        geo: {
          show: true,
          map: "map",
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#023677',
              borderColor: '#1180c7',
            },
            emphasis: {
              areaColor: '#4499d0',
            }
          }
        },
        series: [{
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(data),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#fff'
            }
          }
        },
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: data
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6,
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function(a, b) {
              return b.value - a.value;
            }).slice(0, 10)),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
              }
            },
            zlevel: 1
          },

        ]
      };
    }
  },
  mounted() {
    this.setData();
  }
}
</script>

 src/layout/components/Navbar.vue

@@ -120,11 +120,10 @@
                @handleClick="handleClick"
              ></progress-state>
              <progress-state
                v-if="bigScreen"
                icon="el-icon-dapingzhanshi_active"
                :state="1"
                content="大屏展示管理"
                @handleClick="goToScreenManage"
                content="大屏展示"
                @handleClick="showBigScreen"
              ></progress-state>
            </div>
            <!--            <weather-component-->
@@ -270,6 +269,7 @@
        :visible.sync="alarmAlertStatus"
      ></alarm-alert>
    </el-dialog>
    <big-screen-page v-if="false"></big-screen-page>
  </div>
</template>

@@ -296,7 +296,7 @@
import { getPageMenuApi } from "@/views/pageSetting/js/api";
import createWs from "@/assets/js/websocket";
const WSMixin = createWs("homePageSocket");

import BigScreenPage from "@/components/bigScreenPage/big_screen_page.vue";
export default {
  bMapTools: new BMapTools(BMap),
  components: {
@@ -305,7 +305,8 @@
    ProgressState,
    PifuList,
    PwdChange,
    alarmAlert
    alarmAlert,
    BigScreenPage
  },
  mixins: [WSMixin],
  data() {
@@ -427,6 +428,9 @@
      }
      window.open(url);
    },
    showBigScreen() {

    },
    outSystem() {
      sessionStorage.removeItem("username");
      sessionStorage.removeItem("userId");