得等等

npminstall-debug.log

@@ -0,0 +1,194 @@
+{
+  root: 'D:\\project\\jiJin',
+  registry: 'https://registry.npmmirror.com',
+  pkgs: [],
+  production: false,
+  cacheStrict: false,
+  cacheDir: 'C:\\Users\\86175\\.npminstall_tarball',
+  env: {
+    npm_config_registry: 'https://registry.npmmirror.com',
+    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"]}',
+    npm_config_user_agent: 'npminstall/7.8.0 npm/? node/v18.14.0 win32 x64',
+    npm_config_cache: 'C:\\Users\\86175\\.npminstall_tarball',
+    NODE: 'C:\\Program Files\\nodejs\\node.exe',
+    npm_node_execpath: 'C:\\Program Files\\nodejs\\node.exe',
+    npm_execpath: 'C:\\Users\\86175\\AppData\\Roaming\\npm\\node_modules\\cnpm\\node_modules\\npminstall\\bin\\install.js',
+    npm_config_userconfig: 'C:\\Users\\86175\\.cnpmrc',
+    npm_config_disturl: 'https://cdn.npmmirror.com/binaries/node',
+    npm_config_r: 'https://registry.npmmirror.com',
+    COREPACK_NPM_REGISTRY: 'https://registry.npmmirror.com',
+    NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+    NVM_NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+    PHANTOMJS_CDNURL: 'https://cdn.npmmirror.com/binaries/phantomjs',
+    CHROMEDRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/chromedriver',
+    OPERADRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/operadriver',
+    CYPRESS_DOWNLOAD_PATH_TEMPLATE: 'https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip',
+    ELECTRON_MIRROR: 'https://cdn.npmmirror.com/binaries/electron/',
+    ELECTRON_BUILDER_BINARIES_MIRROR: 'https://cdn.npmmirror.com/binaries/electron-builder-binaries/',
+    SASS_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-sass',
+    SWC_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-swc',
+    NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
+    PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+    SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
+    SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
+    RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
+    RE2_DOWNLOAD_SKIP_PATH: 'true',
+    PRISMA_ENGINES_MIRROR: 'https://cdn.npmmirror.com/binaries/prisma',
+    npm_config_better_sqlite3_binary_host: 'https://cdn.npmmirror.com/binaries/better-sqlite3',
+    npm_config_keytar_binary_host: 'https://cdn.npmmirror.com/binaries/keytar',
+    npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
+    npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
+    npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs',
+    npm_rootpath: 'D:\\project\\jiJin',
+    INIT_CWD: 'D:\\project\\jiJin'
+  },
+  binaryMirrors: {
+    ENVS: {
+      COREPACK_NPM_REGISTRY: 'https://registry.npmmirror.com',
+      NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+      NVM_NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+      PHANTOMJS_CDNURL: 'https://cdn.npmmirror.com/binaries/phantomjs',
+      CHROMEDRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/chromedriver',
+      OPERADRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/operadriver',
+      CYPRESS_DOWNLOAD_PATH_TEMPLATE: 'https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip',
+      ELECTRON_MIRROR: 'https://cdn.npmmirror.com/binaries/electron/',
+      ELECTRON_BUILDER_BINARIES_MIRROR: 'https://cdn.npmmirror.com/binaries/electron-builder-binaries/',
+      SASS_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-sass',
+      SWC_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-swc',
+      NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
+      PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+      SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
+      SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
+      RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
+      RE2_DOWNLOAD_SKIP_PATH: 'true',
+      PRISMA_ENGINES_MIRROR: 'https://cdn.npmmirror.com/binaries/prisma',
+      npm_config_better_sqlite3_binary_host: 'https://cdn.npmmirror.com/binaries/better-sqlite3',
+      npm_config_keytar_binary_host: 'https://cdn.npmmirror.com/binaries/keytar',
+      npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
+      npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
+      npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs'
+    },
+    '@ali/s2': { host: 'https://cdn.npmmirror.com/binaries/looksgood-s2' },
+    sharp: { replaceHostFiles: [Array], replaceHostMap: [Object] },
+    '@tensorflow/tfjs-node': {
+      replaceHostFiles: [Array],
+      replaceHostRegExpMap: [Object],
+      replaceHostMap: [Object]
+    },
+    cypress: {
+      host: 'https://cdn.npmmirror.com/binaries/cypress',
+      newPlatforms: [Object]
+    },
+    'utf-8-validate': {
+      host: 'https://cdn.npmmirror.com/binaries/utf-8-validate/v{version}'
+    },
+    xprofiler: {
+      remote_path: './xprofiler/v{version}/',
+      host: 'https://cdn.npmmirror.com/binaries'
+    },
+    leveldown: { host: 'https://cdn.npmmirror.com/binaries/leveldown/v{version}' },
+    couchbase: { host: 'https://cdn.npmmirror.com/binaries/couchbase/v{version}' },
+    gl: { host: 'https://cdn.npmmirror.com/binaries/gl/v{version}' },
+    sqlite3: {
+      host: 'https://cdn.npmmirror.com/binaries/sqlite3',
+      remote_path: 'v{version}'
+    },
+    '@journeyapps/sqlcipher': { host: 'https://cdn.npmmirror.com/binaries' },
+    grpc: {
+      host: 'https://cdn.npmmirror.com/binaries',
+      remote_path: '{name}/v{version}'
+    },
+    'grpc-tools': { host: 'https://cdn.npmmirror.com/binaries' },
+    wrtc: {
+      host: 'https://cdn.npmmirror.com/binaries',
+      remote_path: '{name}/v{version}'
+    },
+    fsevents: { host: 'https://cdn.npmmirror.com/binaries/fsevents' },
+    nodejieba: { host: 'https://cdn.npmmirror.com/binaries/nodejieba' },
+    canvas: { host: 'https://cdn.npmmirror.com/binaries/canvas' },
+    'skia-canvas': { host: 'https://cdn.npmmirror.com/binaries/skia-canvas' },
+    'flow-bin': {
+      replaceHost: 'https://github.com/facebook/flow/releases/download/v',
+      host: 'https://cdn.npmmirror.com/binaries/flow/v'
+    },
+    'jpegtran-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpegtran-bin'
+    },
+    'cwebp-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/cwebp-bin'
+    },
+    'zopflipng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/zopflipng-bin'
+    },
+    'optipng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/optipng-bin'
+    },
+    mozjpeg: {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/mozjpeg-bin'
+    },
+    gifsicle: {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/gifsicle-bin'
+    },
+    'pngquant-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngquant-bin',
+      replaceHostMap: [Object]
+    },
+    'pngcrush-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngcrush-bin'
+    },
+    'jpeg-recompress-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpeg-recompress-bin'
+    },
+    'advpng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/advpng-bin'
+    },
+    'pngout-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngout-bin'
+    },
+    'jpegoptim-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpegoptim-bin'
+    },
+    argon2: { host: 'https://cdn.npmmirror.com/binaries/argon2' },
+    'ali-zeromq': { host: 'https://cdn.npmmirror.com/binaries/ali-zeromq' },
+    'ali-usb_ctl': { host: 'https://cdn.npmmirror.com/binaries/ali-usb_ctl' },
+    'gdal-async': { host: 'https://cdn.npmmirror.com/binaries/node-gdal-async' },
+    'libpg-query': { host: 'https://cdn.npmmirror.com/binaries' }
+  },
+  forbiddenLicenses: null,
+  flatten: false,
+  proxy: undefined,
+  prune: false,
+  disableFallbackStore: false,
+  workspacesMap: Map(0) {},
+  enableWorkspace: false,
+  workspaceRoot: 'D:\\project\\jiJin',
+  isWorkspaceRoot: true,
+  isWorkspacePackage: false,
+  offline: false,
+  strictSSL: true,
+  ignoreScripts: false,
+  ignoreOptionalDependencies: false,
+  detail: false,
+  forceLinkLatest: false,
+  trace: false,
+  engineStrict: false,
+  registryOnly: false,
+  client: false,
+  autoFixVersion: [Function: autoFixVersion]
+}

src/utils/ui.js

@@ -0,0 +1,81 @@
+// 中间背景雨
+export function rainBg(className, bgClassName) {
+  var c = document.querySelector(`.${className}`);
+  if (!c) return
+  var ctx = c.getContext('2d'); //获取canvas上下文
+  var w = (c.width = document.querySelector(`.${bgClassName}`).clientWidth);
+  var h = (c.height = document.querySelector(`.${bgClassName}`).clientHeight);
+  //设置canvas宽、高
+
+  function random(min, max) {
+    return Math.random() * (max - min) + min;
+  }
+
+  function RainDrop() { }
+  //雨滴对象 这是绘制雨滴动画的关键
+  RainDrop.prototype = {
+    init: function () {
+      this.x = random(0, w); //雨滴的位置x
+      this.y = h; //雨滴的位置y
+      this.color = 'hsl(180, 100%, 50%)'; //雨滴颜色 长方形的填充色
+      this.vy = random(4, 5); //雨滴下落速度
+      this.hit = 0; //下落的最大值
+      this.size = 2; //长方形宽度
+    },
+    draw: function () {
+      if (this.y > this.hit) {
+        var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.size * 30);
+        // 设置起始颜色
+        linearGradient.addColorStop(0, '#14789c');
+        // 设置终止颜色
+        linearGradient.addColorStop(1, '#090723');
+        // 设置填充样式
+        ctx.fillStyle = linearGradient;
+        ctx.fillRect(this.x, this.y, this.size, this.size * 50); //绘制长方形，通过多次叠加长方形，形成雨滴下落效果
+      }
+      this.update(); //更新位置
+    },
+    update: function () {
+      if (this.y > this.hit) {
+        this.y -= this.vy; //未达到底部，增加雨滴y坐标
+      } else {
+        this.init();
+      }
+    },
+  };
+
+  function resize() {
+    w = c.width = window.innerWidth;
+    h = c.height = window.innerHeight;
+  }
+
+  //初始化一个雨滴
+
+  var rs = [];
+  for (var i = 0; i < 10; i++) {
+    setTimeout(function () {
+      var r = new RainDrop();
+      r.init();
+      rs.push(r);
+    }, i * 300);
+  }
+
+  function anim() {
+    ctx.clearRect(0, 0, w, h); //填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
+    for (var i = 0; i < rs.length; i++) {
+      rs[i].draw(); //绘制雨滴
+    }
+    requestAnimationFrame(anim); //控制动画帧
+  }
+
+  window.addEventListener('resize', resize);
+  //启动动画
+  anim();
+}
+
+// 获取图片资源路径
+export const getAssetURL = (image) => {
+  // 参数一: 相对路径
+  // 参数二: 当前路径的URL
+  return new URL(`../assets/images/${image}`, import.meta.url).href
+}

src/views/vent/common/basicCard.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="basicCard">
+        <div class="card-box" v-for="(item, index) in cardContentLists" :key="index">
+            <img class="card-box-img" :src="item.imgSrc" alt="">
+            <div class="card-box-item">
+                <div class="item-labels">{{ item.label }}</div>
+                <div class="item-vals">{{ item.val }}</div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive,defineProps,watch } from 'vue'
+
+
+let props=defineProps({
+    cardContentList:{
+        type:Array,
+        default:()=>{
+            return []
+        }
+    }
+})
+let cardContentLists=ref<any[]>([])
+
+
+watch(()=>props.cardContentList,(newV,oldV)=>{
+    console.log(newV,'工作面卡片-----')
+    cardContentLists.value=newV
+    
+},{immediate:true,deep:true})
+</script>
+
+<style lang="less" scoped>
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../assets/font/douyuFont.otf');
+}
+.basicCard {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgba(41, 49, 53, .8);
+    overflow-x: auto;
+
+    .card-box {
+        width: 416px;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        border-left: 2px solid;
+        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+
+        &:first-child {
+            border: none;
+        }
+
+        .card-box-img {
+            width: 94px;
+            height: 94px;
+
+        }
+
+        .card-box-item {
+            height: 94px;
+            margin-left: 10px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .item-labels {
+                color: #fff
+            }
+
+            .item-vals {
+                font-family: 'douyuFont';
+                font-size: 20px;
+                color: #02bbe9;
+            }
+        }
+
+    }
+}</style>

src/views/vent/common/basicEchartLine.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="basicEchartLine">
+    <div class="echart-box" ref="line"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, nextTick, defineProps } from 'vue'
+import * as echarts from 'echarts';
+
+
+let props = defineProps({
+  //距离边缘的距离
+  gridV: {
+    type: Object,
+    default: () => {
+      return {
+        top: '8%',
+        left: '3%',
+        right: '3%',
+        bottom: '10%'
+      }
+    }
+  }
+})
+
+//获取don元素节点
+let line = ref()
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(line.value);
+    let option = {
+
+      tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type:'line',
+                    lineStyle: {
+                        color: {
+                            type: 'solid',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: 'rgba(31, 179, 247,0)'
+                            }, {
+                                offset: 0.5,
+                                color: 'rgba(31, 179, 247,1)',
+                            }, {
+                                offset: 1,
+                                color: 'rgba(31, 179, 247,0)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            },
+      grid: props.gridV,
+      xAxis: [{//x轴
+        type: 'category',//数据类型为不连续数据
+        boundaryGap: false,//坐标轴两边是否留白
+        axisLine: { //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            color: 'rgba(100, 99, 99,.5)',
+            type: 'dashed'
+          },
+        },
+        axisLabel: {
+          fontSize: 14,
+          // margin: 10,
+          textStyle: {
+            color: '#b3b8cc',
+          },
+        },
+        axisTick: { show: true, },//刻度点数轴
+        splitLine: {
+          show: false,
+        },
+        data: ['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
+      }],
+      yAxis: [{//y轴的相关设置
+        type: 'value',//y轴数据类型为连续的数据
+        min: 0,//y轴上的刻度最小值
+        // splitNumber: 7,//y轴上的刻度段数
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(100, 99, 99,.5)',
+            type: 'dashed'
+          }
+        },
+        axisLine: {//y轴的相关设置
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          margin: 20,
+          textStyle: {
+            color: '#b3b8cc',
+          },
+        },
+        axisTick: { show: true, },  //刻度点数轴
+      }],
+      series: [{
+        name: '',
+        type: 'line',//统计图类型为折线图
+        smooth: true, //是否平滑曲线显示
+        symbolSize: 0,//数据点的大小，[0,0]//b表示宽度和高度
+        lineStyle: {//线条的相关设置
+          normal: {
+            color: "#3deaff"   // 线条颜色
+          }
+        },
+        areaStyle: { //区域填充样式
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(61,234,255, 0.9)' },
+              { offset: 0.7, color: 'rgba(61,234,255, 0)' }
+            ], false),
+
+            shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          }
+        },
+        data: [90, 105, 84, 125, 110, 92, 98]
+      }]
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+onMounted(() => {
+  getOption()
+})
+
+</script>
+
+<style lang="less" scoped>
+.basicEchartLine {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .echart-box {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/vent/common/basicSensor.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="basicSensor">
+    <div class="sensor-title">{{ sensorTitle }}</div>
+    <div class="sensor-content">
+      <div class="sensor-content-item" v-for="(items,ind) in sensorList" :key="ind">
+        <div class="content-item-bg"></div>
+        <span>{{ items.name }}</span>
+        <span>{{ items.status }}</span>
+        <span>{{ items.times }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, defineProps } from 'vue'
+
+let props = defineProps({
+  //标题
+  sensorTitle: {
+    type: String,
+    default: () => {
+      return '烟雾传感器'
+    }
+  }
+})
+
+let sensorList=reactive([
+  {id:0,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:1,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:2,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:0,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:1,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:2,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:0,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:1,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+  {id:2,name:'上仓皮带1515',status:'无烟',times:'2023-11-07 16:53:48'},
+])
+
+
+</script>
+
+<style lang="less" scoped>
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../assets/font/douyuFont.otf');
+}
+
+.basicSensor {
+  position: relative;
+  width: 550px;
+  height: 100%;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  background-color: rgba(41, 49, 53, .8);
+
+  .sensor-title {
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    font-family: 'douyuFont';
+    font-size: 16px;
+  }
+  .sensor-content{
+    height: calc(100% - 40px);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    overflow-y: auto;
+    .sensor-content-item{
+      position: relative;
+      width: 100%;
+      height:32px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      flex-shrink: 0;
+      background: url('../../../assets/images/workPlaceWarn/work-bot.png') no-repeat center;
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+      .content-item-bg{
+        position: absolute;
+        left: 8px;
+        top: 0;
+        height: 32px;
+        width: 168px;
+        background: url('../../../assets/images/workPlaceWarn/work-bot1.png') no-repeat center;
+        background-size: 100% 100%;
+      }
+      span{
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+      }
+    }
+   
+  }
+}
+</style>

src/views/vent/common/basicTree.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="basicTree">
+        <a-tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
+            v-model:expandedKeys="expandedKeys">
+            <template #switcherIcon>
+                <CaretDownOutlined />
+            </template>
+
+        </a-tree>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineProps, watch } from 'vue'
+import { CaretDownOutlined, } from '@ant-design/icons-vue';
+
+let props = defineProps({
+    treeData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+
+let treeDatas = ref([])//树节点数据
+//默认选中节点
+let selectedKeys = ref(['0-0-0'])
+//默认展开节点
+const expandedKeys = ref<string[]>(['1']);
+
+//递归遍历菜单数据
+function getMenuTree(menuList, pid) {
+    let treeList = [];
+    for (let i = 0; i < menuList.length; i++) {
+        let menu = menuList[i];
+        if (menu.pid === pid) {
+            let tree = {
+                key: menu.id,
+                title: menu.name,
+                children: getMenuTree(menuList, menu.id)
+            };
+            tree.children.length === 0 && delete tree.children;
+            treeList.push(tree);
+        }
+    }
+    return treeList;
+}
+
+watch(() => props.treeData, (newV, oldV) => {
+    treeDatas.value.length = 0
+    treeDatas.value = getMenuTree(newV, null)
+    console.log(treeDatas.value, '树节点数据------')
+
+}, { immediate: true, deep: true })
+
+
+
+
+
+
+
+
+</script>
+
+<style lang="less" scoped>
+.basicTree {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 15px 10px;
+    box-sizing: border-box;
+}
+
+:deep(.zxm-tree) {
+    color: #fff;
+    background-color: transparent;
+    letter-spacing: 1px;
+}
+
+:deep(.zxm-tree .zxm-tree-node-content-wrapper.zxm-tree-node-selected) {
+    background-color: transparent;
+    color: #02bbe9;
+}
+
+:deep(.zxm-tree .zxm-tree-node-content-wrapper:hover) {
+    background-color: transparent;
+    color: #02bbe9;
+}</style>

src/views/vent/common/basicWorkBtn.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="basicWorkBtn">
+    <div :class="activeIndex == index ? 'btn-box1' : 'btn-box'" v-for="(item, index) in workBtnLists" :key="index"
+      @click="WorkBtnClick(index, item)">
+      <div class="work-btn-text">{{ item.name }}</div>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineProps, watch } from 'vue'
+
+let props = defineProps({
+  workBtnList: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+
+let workBtnLists = ref<any[]>([])
+
+
+let activeIndex = ref(0) //当前按钮激活索引
+
+//选项切换
+function WorkBtnClick(index, item) {
+  console.log(index, 'index-----')
+  activeIndex.value = index
+}
+
+watch(() => props.workBtnList, (newV, oldV) => {
+  console.log(newV, '按钮新数据--------')
+  workBtnLists.value = newV
+}, { immediate: true, deep: true })
+
+</script>
+
+<style lang="less" scoped>
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../assets/font/douyuFont.otf');
+}
+
+.basicWorkBtn {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+
+  .btn-box {
+    width: 203px;
+    height: 74px;
+    margin: 0px 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url('../../../assets/images/workPlaceWarn/work-btn.png') no-repeat center;
+    background-size: 100% 100%;
+    cursor: pointer;
+
+    &:first-child {
+      margin-left: 0px;
+    }
+
+    &:last-child {
+      margin-right: 0px;
+    }
+
+    .work-btn-text {
+      font-family: 'douyuFont';
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+
+  .btn-box1 {
+    position: relative;
+    width: 203px;
+    height: 92px;
+    margin: 0px 10px;
+
+
+    background: url('../../../assets/images/workPlaceWarn/work-btn-choice.png') no-repeat center;
+    background-size: 100% 100%;
+    cursor: pointer;
+
+    &:first-child {
+      margin-left: 0px;
+    }
+
+    &:last-child {
+      margin-right: 0px;
+    }
+
+    .work-btn-text {
+      position: absolute;
+      left: 50%;
+      top: 26px;
+      transform: translate(-50%, 0);
+      font-family: 'douyuFont';
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/vent/fire/wokeFace/index.vue

@@ -1,5 +1,92 @@
 <template>
-  <div>fire/wokeFace</div>
+  <div class="workPlaceWarn">
+
+    <div class="top-box-card">
+      <basicCard :cardContentList="cardContentList"></basicCard>
+    </div>
+    <div class="top-box-btn">
+      <basicWorkBtn :workBtnList="workBtnList"></basicWorkBtn>
+    </div>
+    <div class="center-box">
+      <basicEchartLine></basicEchartLine>
+    </div>
+    <div class="bot-box">
+      <div class="bot-box-card" v-for="(item,index) in botCardList" :key="index">
+        <basicSensor></basicSensor>
+      </div>
+    </div>
+
+  </div>
 </template>
-<script lang="ts" setup></script>
-<style lang="less" scoped></style>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { getAssetURL } from '../../../../utils/ui';
+import basicCard from '../../common/basicCard.vue'
+import basicWorkBtn from '../../common/basicWorkBtn.vue'
+import basicEchartLine from '../../common/basicEchartLine.vue'
+import basicSensor from '../../common/basicSensor.vue'
+
+
+
+
+
+let cardContentList = reactive([
+  { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度()', val: '18.1' },
+  { id: 1, imgSrc: getAssetURL('workPlaceWarn/smoke.png'), label: '烟雾', val: '无' },
+  { id: 2, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度()', val: '16.3' },
+  { id: 3, imgSrc: getAssetURL('workPlaceWarn/dspl.png'), label: '自动喷淋灭火装置', val: '打开' },
+
+])
+
+let workBtnList = reactive([
+  { id: 0, name: '行人侧' },
+  { id: 1, name: "非行人侧" }
+])
+
+let botCardList=reactive([
+  {id:0},
+  {id:1},
+  {id:2},
+  
+])
+
+</script>
+
+<style lang="less" scoped>
+.workPlaceWarn {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 98px);
+  padding: 15px 10px;
+  box-sizing: border-box;
+
+
+  .top-box-card {
+    height: 110px;
+    width: 100%;
+    margin-bottom: 15px;
+    // background-color: rgba(27, 35, 39, .8);
+  }
+
+  .top-box-btn {
+    height: 100px;
+    width: 100%;
+  }
+  .center-box{
+    width: 100%;
+    height: 260px;
+    margin-bottom: 15px;
+    border: 1px solid #1e96cd;
+  }
+  .bot-box{
+    height: calc(100% - 500px);
+   
+    display: flex;
+    justify-content: space-between;
+    flex-shrink:0;
+    overflow-x: auto;
+  }
+
+}
+</style>