xieyihao / blog Goto Github PK

表头1  | 表头2
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

| 表头1  | 表头2|
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

| 名字 | 描述          |
| ------------- | ----------- |
| Help      | Display the help window.|
| Close     | Closes a window     |

| 名字 | 描述          |
| ------------- | ----------- |
| Help      | ~~Display the~~ help window.|
| Close     | _Closes_ a window     |

| 左对齐 | 居中  | 右对齐 |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

<a href="#part1"></a>

#方法一：name属性只对a标签生效
<a name="part1"></a>

#方法二：id属性其他标签可以
<h5 id="part1"></h5>

# notice: can't work

const scrollBehavior = function (to, from, savedPosition) {
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  let position = false

  // if no children detected
  if (to.matched.length < 2) {
    // scroll to the top of the page
    position = { x: 0, y: 0 }
  } else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
    // if one of the children has scrollToTop option set to true
    position = { x: 0, y: 0 }
  }

  // savedPosition is only available for popstate navigations (back button)
  if (savedPosition) {
    position = savedPosition
  }

  return new Promise(resolve => {
    // wait for the out transition to complete (if necessary)
    window.$nuxt.$once('triggerScroll', () => {
      // coords will be used if no selector is provided,
      // or if the selector didn't match any element.
      if (to.hash && document.querySelector(to.hash)) {
        // scroll to anchor by returning the selector
        position = { selector: to.hash }
      }
      resolve(position)
    })
  })
}

# notice: can't work

scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        let position = {}
        if (to.matched.length < 2) {
          position = {x: 0, y: 0}
        } else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
          position = {x: 0, y: 0}
        }
        if (to.hash) {
          position = {selector: to.hash}
        }
        return position
      }
}

window.addEventListener('pageshow', event => {
    console.log('[test]', 'addEventListener pageshow');
});

window.addEventListener('pagehide', event => {
    console.log('[test]', 'addEventListener pagehide');
});

window.addEventListener('popstate', event => {
    console.log('[test]', 'addEventListener popstate');
});

window.onunload = function () {
    console.log('[test]', 'onunload ');
};

window.onbeforeunload = function (event) {};

document.addEventListener("visibilitychange", function () {
    console.log('[test]', 'addEventListener visibilitychange ', document.visibilityState);
});

# Bundle of packages for data manipulation. If working from your own machine uncomment to download.
# install.packages("tidyverse")
library(tidyverse)

# For working with geospatial data.  If working from your own machine uncomment to download.
# install.packages("sf")
library(sf)

# For performing microsimulation.
install.packages("rakeR")

# Set default ggplot2 theme.
theme_set(theme_minimal())

# Path to data dowload.
url_data <- "http://homepages.see.leeds.ac.uk/~georjb/predictive_analytics/"
download.file(paste0(url_data,"data.zip"), "./data.zip")
unzip("./data.zip")

# Read in Census data (constraints)
age_cons <- read_csv("./data/age_cons.csv")
age_sex_cons <- read_csv("./data/agesex_xtab_cons.csv")
oac_cons <- read_csv("./data/oac_cons.csv")
sex_cons <- read_csv("./data/sex_cons.csv")

# Read in individual-level survey data
individuals <- read_csv("./data/individuals.csv")

# Read in geojson files defining OAs and wards in Leeds
oa_boundaries <- st_read("./data/oa_boundaries.geojson", crs=27700)
ward_boundaries <- st_read("./data/ward_boundaries.geojson", crs=27700)

# Recast as factor
individuals <- individuals %>% mutate_at(vars(oac_grp, sex,age_band, age_sex),funs(factor(.)))
# Reorder according to order vars appear in constraints table : required by rakeR.
individuals <- individuals %>% mutate(
  oac_grp=fct_relevel(oac_grp, colnames(oac_cons %>% select(-oa_code))),
  sex=fct_relevel(sex, colnames(sex_cons %>% select(-oa_code))),
  age_band=fct_relevel(age_band, colnames(age_cons %>% select(-oa_code))),
  age_sex=fct_relevel(age_sex, colnames(age_sex_cons %>% select(-oa_code)))
)

# Check levels and variable names exactly match.
all.equal(
  levels(individuals$age_sex),
  colnames(age_sex_cons %>% select(-oa_code))
)

# Identify the variables to use as constraints.
cons_vars <- c("oac_grp", "age_sex")
# Join to generate a single constraint table.
temp_cons <- oac_cons %>% inner_join(age_sex_cons)
# Joining, by = "oa_code"

# Calculate weights. May take several seconds to execute.
weights_oac_age_sex <- rakeR::weight(cons=temp_cons, inds=individuals %>% select(person_id, oac_grp, age_sex), vars=cons_vars)

# Run rk_take to generate simulated dataset. May take several seconds to execute.
simulated_oac_age_sex <- rakeR::rake(cons=temp_cons, inds=individuals %>% select(person_id, oac_grp, age_sex),
                                vars=cons_vars, output = "integer",
                                method = "trs", seed = 42)

# Generate OA-level summary statistics on weights.
temp_weights_summary <- weights_oac_age_sex %>%
  # Create row_index variable.
  mutate(row_index=row_number()) %>%
  # Rather than a matrix, we want a row for each individual and OA.
  gather(key=oa_code, value=weight, -row_index) %>%
  group_by(oa_code) %>%
  filter(weight>0) %>%
  summarise(weight_mean=mean(weight), weight_max=max(weight), weight_sd=sd(weight)) %>%
  ungroup()

# Generate OA-level summary statistics on simulated data.
temp_simulated_summary <- simulated_oac_age_sex %>%
  group_by(zone) %>%
  summarise(distinct_persons=n_distinct(person_id), total_person=n(),
  sim_oversample=1-(distinct_persons/total_person)) %>%
  select(zone, sim_oversample)

# Merge and gather for charting.
oa_level_summary <- temp_weights_summary %>%
  inner_join(temp_simulated_summary, by=c("oa_code"="zone")) %>%
  gather(key="statistic_type", value="statistic_value",-oa_code)

# Remove temp datasets.
rm(temp_simulated_summary, temp_weights_summary)

# Generate histograms of summary stats, faceted on statistic type.
plot <- oa_level_summary %>%
  # Rescale summary stats between 0 and 1 for local scale on facet.
  group_by(statistic_type) %>%
  mutate(statistic_value_rescale=statistic_value/max(statistic_value)) %>%
  ungroup() %>%
  ggplot()+
    geom_histogram(aes(x=statistic_value_rescale, fill=..x..), bins=10)+
    geom_histogram(aes(x=statistic_value_rescale), fill="transparent", colour="#636363", size=0.1, bins=10)+
    scale_fill_distiller(palette="Blues", direction=1, guide=FALSE)+
    facet_wrap(~statistic_type, scales="free", nrow=1)
# Display in plots pane.
plot
# Save to project directory.
ggsave("stats_histograms.png", plot, width=10, height=2.5)

# Generate choropleths of summary stats, faceted on statistic type.
# So that the histograms and map can be related we need to assign each
# value to decile bins.

# Generate choropleths.
# First a data frame summerising over statstic types.
plot_data <- oa_level_summary %>%
  group_by(statistic_type) %>%
  mutate(
    # Rescale summary stats between 0 and 1 for local scale on facet.
    statistic_value_rescale=statistic_value/max(statistic_value),
    # Cut into equal-range bins as per histogram.
    statistic_value_bin = cut_interval(statistic_value_rescale, 10, labels=FALSE)
  ) %>%
  ungroup()
# Merge with oa_boundaries for plotting.
plot <- oa_boundaries %>%
  left_join(plot_data) %>%
  ggplot()+
    geom_sf(aes(fill=statistic_value_bin), colour=NA)+
    geom_sf(data=ward_boundaries, fill="transparent", colour="#636363", size=0.1)+
    coord_sf(crs=st_crs(oa_boundaries), datum=NA)+
    scale_fill_distiller(palette="Blues", direction=1, guide=FALSE)+
    theme(axis.title=element_blank())+
    facet_wrap(~statistic_type, nrow=1)
rm(plot_data)
# Save to project directory: necessary as resource-intensive to draw.
ggsave("stats_choropleths.png", plot, width=10, height=5)

simulated_oac_age_sex <- simulated_oac_age_sex %>% select(person_id, zone) %>%
     inner_join(individuals)

// page.vue
<canvas ref="canvas"/>

function loadImg() {
        let img = new Image,
          canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d"),
          src = this.loginUserInfo.faceUrl; // insert image url here
        let _self = this;
        img.crossOrigin = "Anonymous";
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage( img, 0, 0 );
          let dataURL = canvas.toDataURL("image/png");
          console.log('【dataURL】', dataURL);
          localStorage.setItem( "savedImageData", dataURL );
          _self.createQrCodeWithLogo(dataURL);
        };
        img.src = src;
}

function createQRCode(){
        let canvas = this.$refs.canvas;
        let originURL = getOriginURL();  // 'http://a.com?a=id'
        QrCodeWithLogo.toCanvas({
          canvas: canvas,
          content: originURL,
          width: 120,
          nodeQrCodeOptions: {
            margin: 4,
          },
          logo: {
            src: dataURL,
          }
        }).then(res => {});
}

createQrCodeWithLogo() {
        let originURL = getWebsiteShareLink({gameId: this.loginUserInfo.gameId}),
          dataURL = this.headerDataURL,
          newCanvas = document.createElement("canvas"),
          _self = this;
        QrCodeWithLogo.toCanvas({
          canvas: newCanvas,
          content: originURL,
          width: 120,
          nodeQrCodeOptions: {
            margin: 4,
            color: {
            }
          },
          logo: {
            src: dataURL,
          }
        }).then(res => {
          let data = newCanvas.toDataURL("image/png");
          console.log("【dataURL】", data);
          _self.imageData = data;
        });
}

loadHeaderImg(){
        let _self = this;
        let img = new Image,
          canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d"),
          src = this.loginUserInfo.faceUrl;
        img.crossOrigin = "Anonymous";
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage( img, 0, 0 );
          let dataURL = canvas.toDataURL("image/png");
          _self.headerDataURL = dataURL;
          // 生成二维码
          _self.createQrCodeWithLogo();
          // 设置头像
          _self.$refs.header.src = img.src;
        };
        img.src = src;
}