大屏部分数据对接

黄何裕

2024-08-08 98899e05df715b4fc19b361ddde0f2a7b9ec5c29

大屏部分数据对接

 src/api/newpage.js

New file
@@ -0,0 +1,17 @@
import request from '@/utils/request'

// 设备数据
export function getDeviceData() {
  return request({
    url: '/dashboard/monitor',
    method: 'get',
  })
}

// 工单数据
export function getWorkOrderData() {
  return request({
    url: '/dashboard/workOrder',
    method: 'get',
  })
}

 src/main.js

@@ -107,7 +107,7 @@
      duration: 1,
      ease: "power2.out",
      onUpdate: () => {
        el.innerText = formatNumber(target.count.toFixed(0));
        // el.innerText = formatNumber(target.count.toFixed(0));
      }
    })

@@ -122,7 +122,7 @@
      duration: 1,
      ease: "power2.out",
      onUpdate: () => {
        el.innerText = formatNumber(target.count.toFixed(0));
        // el.innerText = formatNumber(target.count.toFixed(0));
      }
    })
  }

 src/views/home/data-view/components/data-icon.vue

@@ -85,7 +85,7 @@
          duration: 1,
          ease: "power2.out",
          onUpdate: () => {
            el.innerText = target.count.toFixed(0);
            // el.innerText = target.count.toFixed(0);
          }
        })
      },
@@ -99,7 +99,7 @@
          duration: 1,
          ease: "power2.out",
          onUpdate: () => {
            el.innerText = target.count.toFixed(0);
            // el.innerText = target.count.toFixed(0);
          }
        })
      }

 src/views/screen/components/screen-data/index.vue

@@ -7,7 +7,7 @@

    <div class="data-content">
      <div class="data-panel">
        <div class="panel-title" style="margin-bottom: 30px;">
        <div class="panel-title" style="margin-bottom: 30px">
          <div class="icon">
            <img src="@/assets/icons/arrow.png" alt="" />
          </div>
@@ -17,28 +17,28 @@
          <div class="panel-item">
            <data-hola
              :holaTitle="`工单总数`"
              :centerValue="3000"
              :centerValue="workOrderData.workOrderTotal.totalNum"
              :holaColor="`#4ea8ff`"
            ></data-hola>
          </div>
          <div class="panel-item">
            <data-hola
              :holaTitle="`已处理工单数`"
              :centerValue="1600"
              :centerValue="workOrderData.workOrderTotal.todolNum"
              :holaColor="`#5dec24`"
            ></data-hola>
          </div>
          <div class="panel-item">
            <data-hola
              :holaTitle="`未处理工单数`"
              :centerValue="200"
              :centerValue="workOrderData.workOrderTotal.doneNum"
              :holaColor="`#dfc639`"
            ></data-hola>
          </div>
        </div>
      </div>
      <div class="data-panel">
        <div class="panel-title" style="margin: 50px 0 30px 0;">
        <div class="panel-title" style="margin: 50px 0 30px 0">
          <div class="icon">
            <img src="@/assets/icons/arrow.png" alt="" />
          </div>
@@ -63,6 +63,12 @@
    WrapperTitle,
    DataHola,
  },
  props: {
    workOrderData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      dataList: {

 src/views/screen/newPage/index.vue

@@ -22,7 +22,7 @@
        </div>
        <div class="card" style="height: 622px">
          <div class="card_header"><div class="title">工单数据</div></div>
          <div><ScreenData></ScreenData></div>
          <div><ScreenData :workOrderData="workOrderData"></ScreenData></div>
        </div>
      </div>
      <div class="large_screen_box">
@@ -35,89 +35,35 @@
            <div class="title">设备数据</div>
          </div>
          <div>
            <div class="device_data">
            <div
              class="device_data"
              v-for="(item, index) in deviceList"
              :key="index"
            >
              <img
                src="../../../assets/images/screen/lxicon.png"
                alt=""
                style="height: 25px"
              />
              <div style="margin: 0 10px">人脸</div>
              <div style="margin: 0 10px">{{ item.type }}</div>
              <div class="data-info">
                <div class="data-lable">设备总数</div>
                <div class="data-num type1">
                  <span v-roll>{{ 1123 }}</span
                  <span v-roll>{{ item.totalNum }}</span
                  ><i class="el-icon-top"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备正常数</div>
                <div class="data-num type2">
                  <span v-roll>{{ 1123 }}</span
                  <span v-roll>{{ item.normalNum }}</span
                  ><i class="el-icon-top"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备异常数</div>
                <div class="data-num type3">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
            </div>
            <div class="device_data">
              <img
                src="../../../assets/images/screen/lxicon.png"
                alt=""
                style="height: 25px"
              />
              <div style="margin: 0 10px">车辆</div>
              <div class="data-info">
                <div class="data-lable">设备总数</div>
                <div class="data-num type1">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备正常数</div>
                <div class="data-num type2">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备异常数</div>
                <div class="data-num type3">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
            </div>
            <div class="device_data">
              <img
                src="../../../assets/images/screen/lxicon.png"
                alt=""
                style="height: 25px"
              />
              <div style="margin: 0 10px">视频</div>
              <div class="data-info">
                <div class="data-lable">设备总数</div>
                <div class="data-num type1">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备正常数</div>
                <div class="data-num type2">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备异常数</div>
                <div class="data-num type3">
                  <span v-roll>{{ 1123 }}</span
                  <span v-roll>{{ item.errorNum }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
@@ -179,6 +125,7 @@
import ExamineChart from "../components/screen-examine/components/examine-chart.vue";
import ScreenData from "../components/screen-data/index.vue";
import NewMap from "./components/newMap.vue";
import { getDeviceData, getWorkOrderData } from "@/api/newpage";
export default {
  name: "Newpage",
  components: {
@@ -199,7 +146,7 @@
          value: "1",
        },
        {
          name: "市局数据",
          name: "区县数据",
          value: "2",
        },
        {
@@ -207,9 +154,36 @@
          value: "3",
        },
      ],
      deviceList: [],
      workOrderData: {
        workOrderRegion: {
          create_time: "2024-03-05T19:04:24",
          deleted: 0,
          error_type: "网络故障,无光",
          id: 1,
          serial_number: 0,
          source: "中山大道与宝善巷交叉口东",
          status: "DISTRIBUTED",
          unit_id: 2,
          update_time: "2024-04-15T17:07:54",
          work_order_no: "202403051212",
          yw_check_result: "/profile/upload/2024/03/26/20240326100819A001.jpg",
          yw_condition: "修复完成",
          yw_handle_time: "2024-03-05T19:04:06",
          yw_people_id: 1,
          yw_result: "OK",
        },
        workOrderTotal: {
          doneNum: 8,
          todoNum: 20,
          totalNum: 28,
        },
      },
    };
  },
  mounted() {},
  mounted() {
    this.getData();
  },
  methods: {
    returnPath() {
      this.$router.push("/index");
@@ -217,6 +191,19 @@
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData() {
      getDeviceData()
        .then((res) => {
          this.deviceList = res.data.monitorTotal;
        })
        .catch((err) => {});
      getWorkOrderData()
        .then((res) => {
          this.workOrderData = res.data;
          console.log(res, "zxczxczxcxc");
        })
        .catch((err) => {});
    },
  },
};
</script>

 src/views/system/point/region/index.vue

@@ -86,7 +86,6 @@
    <el-table v-loading="loading"
              :data="regionList"
              row-key="id"
              border
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              @selection-change="handleSelectionChange">

 vue.config.js

@@ -38,10 +38,10 @@
        // target: `http://localhost:8080`,

        // 付立麒
        target: `http://192.168.3.64:8080`,
        // target: `http://192.168.3.64:8080`,

        // 龚焕茏
        // target: `http://192.168.3.87:8080`,
        target: `http://192.168.3.87:8080`,
        
        // 向培
        // target: `http://192.168.3.88:8085`,