大屏数据对接2

fuliqi

2024-09-18 4c03db2f0d6b4320e670b770f4c1e252809303a3

大屏数据对接2

 src/api/newpage.js

@@ -63,3 +63,11 @@
    method: "get",
  });
}

// 考核积分数据
export function checkScore(dataScope, deptId) {
  return request({
    url: "/dashboard/check/score?dataScope=" + dataScope + "&deptId=" + deptId,
    method: "get",
  });
}

 src/views/login.vue

@@ -191,7 +191,7 @@
              if (this.loginInfo.firstLogin == 1) {
                // this.$router.push({ path: "/" }).catch(() => { });
                // return;
                if (this.roles .includes("admin") || this.roles .includes("city_leader") || this.roles .includes("county_leader")) {
                if (this.roles .includes("admin") || this.roles .includes("city_leader")) {
                  this.$router.push({
                    path: '/screen'
                  })

 src/views/screen/components/lineChart.vue

@@ -13,21 +13,26 @@
      default: null,
    },
  },
  data () {
  data() {
    return {
      dataList: {
        name: [],
        data1: [],
        data2: [],
      },
      // 配置
      option: {
      name: [],
      data1: [],
      data2: [],

      myDrawLine: null
    }
  },

  methods: {
    initDrawLine() {
      const that = this
      let option = {
        grid: {
          width: '100%'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
              formatter: function (params) {
            let str = '<div><p>' + params.name + '</p></div>'
            str += params.marker + params.seriesName + '：' + params.data
            return str
@@ -40,9 +45,9 @@
        // 图例组件
        legend: {
          type: 'plain',
          top: 20,
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
              top: 20,
              data: ['已处理工单数', '未处理工单数'],
              textStyle: {
            color: '#A0AEC0'
          }
        },
@@ -50,41 +55,41 @@
        // X轴配置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
              boundaryGap: false,
              axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#A0AEC0',
              type: 'solid'
                  type: 'solid'
            }
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            margin: 20,
            rotate: 30
                fontSize: 12,
                margin: 20,
                rotate: 30
          },
          data: this.dataList.name,
          data: that.name,
        },
        // Y轴配置
        yAxis: {
          type: 'value',
          splitLine: {
              splitLine: {
            lineStyle: {
              color: '#A0AEC0',
              type: 'dashed'
                  type: 'dashed'
            }
          },
          splitNumber: 5,
          axisLine: {
              axisLine: {
            show: false
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            margin: 15
                fontSize: 12,
                margin: 15
          }
        },
        // 系列列表（多个折线图）
@@ -92,13 +97,13 @@
          {
            name: '已处理工单数',
            type: 'line',
            data: this.dataList.data1,
            data: that.data1,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00a2ff' },
                { offset: 0.5, color: 'rgba(0,162,255,0.1)' },
                { offset: 1, color: 'rgba(0,162,255,0.1)' }
                {offset: 0, color: '#00a2ff'},
                {offset: 0.5, color: 'rgba(0,162,255,0.1)'},
                {offset: 1, color: 'rgba(0,162,255,0.1)'}
              ])
            },

@@ -113,13 +118,13 @@
          {
            name: '未处理工单数',
            type: 'line',
            data: this.dataList.data2,
            data: that.data2,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#e4b54f' },
                { offset: 0.5, color: 'rgba(228,181,79,0.1)' },
                { offset: 1, color: 'rgba(228,181,79,0.1)' }
                {offset: 0, color: '#e4b54f'},
                {offset: 0.5, color: 'rgba(228,181,79,0.1)'},
                {offset: 1, color: 'rgba(228,181,79,0.1)'}
              ])
            },

@@ -132,17 +137,9 @@
            }
          }
        ]
      },

      myDrawLine: null
    }
  },

  methods: {
    initDrawLine () {
      const that = this
      }
      that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
      that.myDrawLine.setOption(that.option)
      that.myDrawLine.setOption(option)
      window.addEventListener('resize', function () {
        that.myDrawLine.resize()
      })
@@ -152,26 +149,20 @@
  watch: {
    workOrderRegion: {
      handler(newV, oldV) {
        let name = [];
        let data1 = [];
        let data2 =  [];
        this.workOrderRegion.map((item) => {
          name.push(item.area);
          data1.push(item.doneNum);
          data2.push(item.todoNum);
        this.name =[]
        this.data1=[]
        this.data2=[]
        newV.map((item) => {
          this.name.push(item.area);
          this.data1.push(item.doneNum);
          this.data2.push(item.todoNum);
        })
        console.log(this, "ddddd")
        console.log(this.dataList, "ddddd")
        this.dataList.name = name;
        console.log(name)
        this.dataList.data1 = data1;
        this.dataList.data2 = data2;
        this.initDrawLine()
      },
      deep: true
    }
  },
  mounted () {
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initDrawLine()

 src/views/screen/components/map.vue

@@ -12,52 +12,58 @@
import ZGSJson from '@/assets/map/zigong.json' // JOSN地图文件
export default {
  name: 'mapApp',
  props: {
    geoCoordinates: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
      geoCoordinates: {
        自流井区: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        高新区: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        大安区: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        沿滩区: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        贡井区: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        荣县: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        富顺县: [
          {
            value: 12312,
            name: 'XXX'
          }
        ]
      },
      // geoCoordinates: {
      //   自流井区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   高新区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   大安区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   沿滩区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   贡井区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   荣县: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   富顺县: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ]
      // },

      // 地图配置
      // option: {
@@ -357,7 +363,7 @@
      that.map.setOption(option)
      that.map.on('click', function (params) {
        if (params.seriesType === 'map3D') {
          console.log('Clicked adcode:', params)
          that.$emit('clickMap', params.name);
        }
      })
    },

 src/views/screen/components/subheading.vue

@@ -107,6 +107,18 @@
        this.isData.color
      )
    })
  },
  watch: {
    isData(){
      this.getW()
      this.$nextTick(() => {
        this.initChart(
          this.isData.value1,
          this.isData.value2,
          this.isData.color
        )
      })
    }
  }
}
</script>

 src/views/screen/index.vue

@@ -36,7 +36,7 @@
            <div class="statistics-container">
              <div class="DrawLine-content">
                <!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> -->
                <lineChart :workOrderRegion = workOrderRegion></lineChart>
                <lineChart :workOrderRegion=workOrderRegion></lineChart>
              </div>
            </div>
          </div>
@@ -44,7 +44,7 @@
      </div>

      <div class="map-container" ref="isMap">
        <mapApp></mapApp>
        <mapApp @clickMap="getDeptId" :geoCoordinates=scoreData></mapApp>
        <div class="btn-container">
          <img src="@/assets/images/btn-bg.png" class="bg-img"/>
          <div class="btn-list" v-model="activerBtnType">
@@ -192,7 +192,8 @@
  getNormalRate,
  checkFace,
  checkCar,
  checkVideo
  checkVideo,
  checkScore
} from "@/api/newpage";

export default {
@@ -207,6 +208,50 @@
      faceList: [],
      workOrderData: [],
      workOrderRegion: [],
      scoreData: {
          自流井区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          高新区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          大安区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          沿滩区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          贡井区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          荣县: [
            {
              value: 0,
              name: '得分'
            }
          ],
          富顺县: [
            {
              value: 0,
              name: '得分'
            }
          ]
        },
      // 设备数据
      facilityData: {
        video: [],
@@ -308,6 +353,14 @@
        })
        .catch((err) => {
        });
      checkScore(this.activerBtnType, this.deptId)
        .then((res) => {
          if(res.data && Object.keys(res.data).length > 0){
            this.scoreData = res.data;
          }
        })
        .catch((err) => {
        });
    },
    returnPath() {
      this.$router.push("/index");
@@ -340,6 +393,7 @@
      item2.color = '#ff7b72'
      item2.title = '未处理工单数'
      this.statistics.push(item2)
      console.log( this.statistics)
    },

    videoData() {